1. 목표 팝업에서 사용할 수 있는 aria-* 속성을 적절히 사용하여 웹 접근성을 향상합니다.
모달 팝업에서 포커스 트래핑(Focus Trapping)을 구현하여 키보드 사용자가 실수로 팝업에서 벗어나지 않고 팝업 내부를 탐색할 수 있도록 합니다. ️모달 팝업이 오픈된 상태라면 tab을 눌렀을 때 팝업 내부 영역에서만 이동해야 합니다. 2.
구현 미리보기 3. 구현하기 STEP1.
HTML MarkUp
![[JavaScript] 모달 팝업의 Focus Trapping과 WAI-ARIA](https://mblogthumb-phinf.pstatic.net/MjAyMzA0MjlfMTUz/MDAxNjgyNzQ0MTQzOTU2.8VmXbY1ePXv76YO0g0vVCKJdF3S1leeu6WITAzvUgTMg.6qi8mpiJb9No8vsHpmpe8xk0jNpdVyyNU1VmqLdYvV0g.GIF.eujin0131/%C8%AD%B8%E9_%B1%E2%B7%CF_2023-04-29_%BF%C0%C8%C4_1.52.04.gif?type=w2)
#
FocusTrapping
#
KeyboardTrap
#
WAI
#
접근성
#
키보드탐색
#
팝업
![[OS] 운영체제(Operating System)와 커널(Kernel)](https://blogimgs.pstatic.net/nblog/mylog/post/og_default_image_160610.png)
![[Network] 프로토콜과 프로토콜의 기본 구조 및 동작 이해 - OSI 7계층](https://mblogthumb-phinf.pstatic.net/MjAyMzA0MjhfMTg2/MDAxNjgyNjc0NjkwMTEx.QMkDgvlrIY2tlOPk7YJH2o5FvL_WHEZ5ivFoNUdZWKUg.yV6VgTt3fKtVZL9h0I9SQI6AS000o_hPPav4dvYjrhUg.PNG.eujin0131/%B1%D7%B7%EC_61.png?type=w2)
![[React] 비제어 컴포넌트와 React-Hook-Form](https://mblogthumb-phinf.pstatic.net/MjAyMzA3MDdfNTcg/MDAxNjg4NzI2MDE0MjUy.MLww2Jh1EIK15uotG7C92TE69K4WbY451aR5WRhVm3cg.6XP_Xiqhgoz-DpMvoHooju6WxpHuI6oM0UwCd0h80CAg.PNG.eujin0131/%A4%B7%A4%B1%A4%B7%A4%A4%A4%A9.png?type=w2)
![[React] 리액트 리팩토링, 테스트부터 최적화까지](https://mblogthumb-phinf.pstatic.net/MjAyMzA3MjlfOTUg/MDAxNjkwNTU3NDQ5Nzcx.Ss4-pJ8JVFH6Y_VhHotgCfM_GiGnx2cHbDM7vrhRk40g.UtNwwOwzXZrQS5bx4YxlyPB4ShDznQlZuxgCMzsqQ0gg.JPEG.eujin0131/Screenshot_2023-07-27_at_22.50.46.JPG.jpg?type=w2)
![[Network] Network Proxy(Forward Proxy, Reverse Proxy)란?](https://mblogthumb-phinf.pstatic.net/MjAyMzExMjBfMjEg/MDAxNzAwNDYyMTIxMTMy.ojMwRupt2sbHDMZ_Mna9IEBnyeteGkSHPSYF9xiB0Rcg.n7aeqCToegG34o6opu5TOTTCUF9Hyksr7R_gfUjALtMg.PNG.eujin0131/forward.png?type=w2)