WAI-ARIA 속성을 활용한 자바스크립트 드롭다운 메뉴 접근성 개선 방안

19 Oct 2023

javascript

드롭다운 메뉴는 웹 사이트의 네비게이션에서 자주 사용되는 구성 요소입니다. 그러나 일부 사용자들은 드롭다운 메뉴를 마우스로만 접근하기 어려워 접근성이 제한될 수 있습니다. 이를 해결하기 위해 WAI-ARIA 속성을 활용한 접근성 개선 방안을 알아보겠습니다.

WAI-ARIA란?

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 애플리케이션에서 접근성을 향상시키기 위한 기술적인 지침과 규칙을 제공하는 표준입니다. 이를 활용하면 장애가 있는 사용자들이 웹 사이트를 보다 쉽게 이용할 수 있도록 도와줄 수 있습니다.

드롭다운 메뉴의 접근성 개선을 위한 WAI-ARIA 속성 활용 방안

role="button" 속성 추가: 드롭다운 메뉴의 트리거 역할을 하는 요소에 role="button" 속성을 추가하여 키보드 사용자가 해당 요소를 인식할 수 있도록 합니다.
```
 <div role="button" aria-haspopup="true" aria-expanded="false">드롭다운 메뉴</div>
```
aria-haspopup와 aria-expanded 속성 활용: 드롭다운 메뉴의 트리거 요소에 aria-haspopup="true"와 aria-expanded="false" 속성을 추가하여 드롭다운 메뉴의 상태를 나타냅니다. 드롭다운 메뉴가 열렸을 때 aria-expanded 값을 true로 변경하여 상태를 업데이트합니다.
```
 <div role="button" aria-haspopup="true" aria-expanded="true">드롭다운 메뉴</div>
```

role="menu" 속성 추가: 드롭다운 메뉴의 목록을 감싸는 요소에 role="menu" 속성을 추가하여 스크린 리더 사용자에게 목록을 인식할 수 있도록 합니다.

 <div role="menu">
     <ul>
         <li><a href="#">메뉴 항목 1</a></li>
         <li><a href="#">메뉴 항목 2</a></li>
         <li><a href="#">메뉴 항목 3</a></li>
     </ul>
 </div>

role="menuitem" 속성 추가: 드롭다운 메뉴의 각 항목에 role="menuitem" 속성을 추가하여 스크린 리더 사용자에게 각 항목을 인식할 수 있도록 합니다.

 <div role="menu">
     <ul>
         <li role="menuitem"><a href="#">메뉴 항목 1</a></li>
         <li role="menuitem"><a href="#">메뉴 항목 2</a></li>
         <li role="menuitem"><a href="#">메뉴 항목 3</a></li>
     </ul>
 </div>

결론

WAI-ARIA 속성을 사용하여 자바스크립트로 구현된 드롭다운 메뉴의 접근성을 개선할 수 있습니다. 이를 통해 모든 사용자들이 웹 사이트의 드롭다운 메뉴를 키보드만으로도 쉽게 접근할 수 있게 됩니다.

References:

Web Accessibility Initiative - Accessible Rich Internet Applications
ARIA menus, keyboard interaction #accessibility #WAI-ARIA