WARI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications): WAI는 W3C에서 웹 접슨성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격
RIA: 정적인 HTML, 단순한 JS 환경의웹이 아닌 웹이 동적인 JS와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 사용자 경험을 제공하는 웹 애플리케이션.
WARI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고 행동을 유도.
aria-* 속성 활용
- aria-haspopup = "dialog" : 버튼이 팝업을 여는 버튼임을 명시.
- aria-controls = "popup" : 버튼이 제어하는 요소의 ID를 지정.
- aria-labelledby = "popup-title" : 팝업의 제목의 정의. 이를 통해 화면 리더 사용자는 팝업이 무엇에 관한 것인지 알 수 있음.
- aria-hidden = "true" : 팝업이 열릴 때 기본적으로 숨겨져 있다는 것을 의미. 팝업이 열리면 aria-hidden="false"으로 변경
tabindex 사용
- tableindex = "-1" : 요소가 초기 상태에서 포커스를 받지 않도록 설정.
- tableindex = "0" : 요소가 기본적인 순서대로 탭 순서를 따를 수 있도록 설정.
팝업 열기 및 닫기
팝업이 열릴 때 aria-hidden을 false로 설정하고, 팝업 내부의 요소들이 키보드 탐색을 따를 수 있도록 설정한다. 또한, 팝업이 닫힐 때는 aria-hidden="true"로 되돌리고, 포커스가 팝업을 여는 버튼으로 돌아가도록 한다.
팝업 내부 영역에서 키보드 이동
팝업 내에서만 키보드 탐색이 이루어지도록 keydown이벤트를 사용하여 Tab키를 눌렀을 때 포커스가 팝업 내에서만 이동하도록 설정한다.
이렇게 하여 팝업이 접근 가능하게 되며, 키보드만으로도 팝업 내에서만 이동할 수 있다. aria-* 속성으로 화면 리더 사용자가 팝업을 인식할 수 있도록 하며, tabindex와 keydown 이벤트로 키보드 탐색을 할 수 있도록 한다.
