01. 팝업이란?
팝업은 웹 사이트에서 많이 사용되는 요소 중 하나로, 사용자에게 중요한 정보를 제공하거나 상호작용을 유도하기 위해 활용된다. 마우스로 옵션을 선택하거나 특수 기능 키를 누르면 갑자기 나타나는 창이 나타나는 방식이다. 일반적으로 팝업 창에는 명령 메뉴가 포함되어 있으며 명령 중 하나를 선택할 때까지만 화면에 남아 있는다.
그러나 접근성을 고려하지 않을 경우 스크린 리더 사용자나 시각적으로 장애가 있는 사용자는 팝업에 있는 정보를 제대로 파악하기 위해 명확한 설명이 필요할 수 있고, 팝업에 대한 컨트롤이 부족할 경우 상호작용하기 어려울수 있다. 그러므로 WAI-ARIA(Accessible Rich Internet Applications)를 활용하여 팝업의 접근성을 개선하는 것이 중요하다.
02. WAI-ARIA 활용
WAI-ARIA는 팝업 요소의 역할, 상태 및 속성을 정의하여 스크린 리더 사용자에게 명확한 정보를 제공한다. 다음과 같은 WAI-ARIA 속성을 사용하여 팝업의 접근성을 개선할 수 있다.
role="dialog"
팝업이 대화 상자로 역할을 수행함을 나타낸다.aria-labelledby
팝업의 제목을 제공하는 요소의 ID를 연결한다.aria-describedby
팝업의 설명을 제공하는 요소의 ID를 연결한다.aria-modal="true"
팝업이 모달 형식으로 동작함을 나타낸다.aria-hidden
팝업이 숨겨져 있을 때는 aria-hidden="true" 로 설정하여 스크린 리더 사용자에게 숨겨져 있음을 알린다.
<div role="dialog" aria-labelledby="popup-title" aria-describedby="popup-desc" aria-modal="true" aria-hidden="true">
<h2 id="popup-title">팝업 제목</h2>
<p id="popup-desc">팝업 설명</p>
<!-- 팝업 내용 및 상호작용 요소들 -->
</div>03. tabindex
팝업 내부에서 탭 이동이 팝업 외부로 벗어나지 않도록 제한하는 것도 가능하다. 이를 위해 tabindex 속성을 사용하여 탭 키를 이용한 요소의 포커스 이동을 제어할 수 있다. 팝업 내부의 첫 번째 포커스 가능한 요소에 tabindex="0"을 지정하여 초점을 받을 수 있도록 설정하고, 팝업 외부로 포커스가 이동하지 않도록 팝업 외부의 요소들은 tabindex="-1"로 설정한다.
<div role="dialog" aria-labelledby="popup-title"
aria-describedby="popup-desc" aria-modal="true" aria-hidden="true">
<h2 id="popup-title">팝업 제목</h2>
<p id="popup-desc">팝업 설명</p>
<input type="text" tabindex="0" placeholder="내부에서 이동 가능한 요소">
<!-- 팝업 내용 및 상호작용 요소들 -->
</div>
<!-- 팝업 외부의 다른 요소들 -->
<button>다른 버튼</button>
<input type="text" tabindex="-1" placeholder="팝업 외부 요소">
Frontend Developer