[JavaScript] 모달 팝업의 Focus Trapping과 WAI-ARIA

1. 목표 팝업에서 사용할 수 있는 aria-* 속성을 적절히 사용하여 웹 접근성을 향상합니다. 모달 팝업에서 포커스 트래핑(Focus Trapping)을 구현하여 키보드 사용자가 실수로 팝업에서 벗어나지 않고 팝업 내부를 탐색할 수 있도록 합니다. ️모달 팝업이 오픈된 상태라면 tab을 눌렀을 때 팝업 내부 영역에서만 이동해야 합니다. 2. 구현 미리보기 3. 구현하기 STEP1. HTML MarkUp <h1 tabindex="0">Focus Trapping & WAI </h1> <button id="openPopupBtn" class="popup-open" aria-haspopup="true">Open Popup</button> <div id="popupContainer" class="popup" role="dialog" aria-modal="true" aria-labelledby="popupTitle" tabindex="-1"> <div class="popup-content">...

원문링크 : [JavaScript] 모달 팝업의 Focus Trapping과 WAI-ARIA