Colin's Blog
WAI-ARIA 속성을 이용한 자바스크립트로 구현하는 드롭다운 메뉴 접근성 개선 방안

소개

드롭다운 메뉴는 웹 애플리케이션에서 자주 사용되는 요소 중 하나입니다. 그러나 드롭다운 메뉴의 접근성은 제한된 화면 독자나 키보드 사용자에게 어려움을 줄 수 있습니다. 이를 해결하기 위해 WAI-ARIA 속성과 자바스크립트를 사용하여 드롭다운 메뉴의 접근성을 개선할 수 있습니다.

WAI-ARIA란?

WAI-ARIA(웹 접근성 이니셔티브 - 접근 가능한 리치 인터넷 애플리케이션)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준입니다. WAI-ARIA는 다양한 장애를 가진 사용자가 웹 콘텐츠에 더 쉽게 접근하고 상호 작용할 수 있도록 돕습니다.

드롭다운 메뉴에 WAI-ARIA 사용하기

WAI-ARIA 속성을 사용하여 드롭다운 메뉴의 접근성을 개선하는 방법을 살펴보겠습니다.

1. 메뉴 버튼에 aria-haspopup 속성 추가하기

메뉴 버튼을 클릭하면 드롭다운 메뉴가 표시되는데, 해당 버튼에는 aria-haspopup 속성을 추가해야 합니다. 이 속성은 드롭다운 메뉴가 표시 가능한 하위 메뉴를 가지고 있음을 알려줍니다.

<button aria-haspopup="true">메뉴</button>

2. 드롭다운 메뉴에 aria-expanded 속성 추가하기

드롭다운 메뉴가 펼쳐져 있는지 여부를 aria-expanded 속성을 사용하여 표시해야 합니다. 메뉴가 펼쳐져 있을 때는 true로 설정하고, 접혀져 있을 때는 false로 설정합니다.

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

3. 드롭다운 메뉴에 aria-labelledby 속성 추가하기

드롭다운 메뉴와 연결된 메뉴 버튼을 나타내기 위해 aria-labelledby 속성을 사용합니다. 이 속성은 메뉴 버튼의 id 값을 참조하여 드롭다운 메뉴를 레이블링합니다.

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

4. 키보드 접근성을 고려하기

드롭다운 메뉴를 키보드로 접근할 수 있도록 해야 합니다. 메뉴 버튼을 누르면 드롭다운 메뉴가 펼쳐지고, 다른 메뉴 항목으로 이동할 수 있어야 합니다. 이를 위해 자바스크립트를 사용하여 키보드 이벤트를 처리해야 합니다.

const button = document.querySelector('#menu-button');
const menu = document.querySelector('[role="menu"]');

// 메뉴 버튼 클릭 시 드롭다운 메뉴 토글
button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true' || false;
  button.setAttribute('aria-expanded', !expanded);
});

// 드롭다운 메뉴 외 다른 곳 클릭 시 드롭다운 메뉴 숨기기
document.addEventListener('click', (e) => {
  if (!menu.contains(e.target)) {
    button.setAttribute('aria-expanded', 'false');
  }
});

// 키보드 이벤트 처리
menu.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    e.preventDefault();
    // 메뉴 항목으로 이동하는 로직 추가
  }
});

결론

WAI-ARIA 속성과 자바스크립트를 사용하여 드롭다운 메뉴의 접근성을 개선할 수 있습니다. 메뉴 버튼에 aria-haspopup 속성을 추가하고, 드롭다운 메뉴에 aria-expanded 속성을 적용하여 펼쳐진 상태를 표시할 수 있습니다. 또한, 키보드 접근성을 고려하여 키보드 이벤트를 처리해야 합니다. 이러한 개선 사항을 적용하면 웹 애플리케이션에서 드롭다운 메뉴를 사용하는 모든 사용자에게 더 나은 접근성을 제공할 수 있습니다.

참고 자료:\

© 2018 Colin. All rights reserved.