WAI-ARIA 속성을 활용하여 자바스크립트로 구현하는 드롭다운 메뉴 접근성 개선

19 Oct 2023

javascript

들어가기 전에, 웹 접근성은 모든 사용자가 웹 콘텐츠에 접근하고 이해할 수 있도록 보장하는 것을 목표로 합니다. 특히 드롭다운 메뉴와 같은 상호작용 요소를 개발할 때, 스크린 리더 사용자를 포함한 모든 사용자가 콘텐츠를 정확히 이해하고 조작할 수 있도록 해야 합니다.

WAI-ARIA(Accessible Rich Internet Applications) 속성은 웹 사이트나 웹 애플리케이션을 보다 접근성이 높은 상호작용 요소로 변환하는 데 도움을 줍니다. 이번 기술 블로그에서는 WAI-ARIA 속성을 활용하여 자바스크립트로 구현하는 드롭다운 메뉴 접근성을 개선하는 방법에 대해 알아보겠습니다.

1. 드롭다운 메뉴의 역할과 구조 정의하기

드롭다운 메뉴를 구현하기 전에, 메뉴 요소의 역할과 구조를 명확하게 정의하는 것이 중요합니다. role 속성을 사용하여 드롭다운 메뉴의 역할을 지정할 수 있습니다. 예를 들어, role="menubar"을 사용하여 메뉴바 역할을 정의하고, role="menu"를 사용하여 메뉴 역할을 정의할 수 있습니다.

<nav role="menubar">
  <button aria-haspopup="true" aria-expanded="false">메뉴</button>
  <ul role="menu">
    <li role="presentation">
      <a role="menuitem" href="#">항목 1</a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#">항목 2</a>
    </li>
  </ul>
</nav>

2. 드롭다운 메뉴의 상태 관리하기

드롭다운 메뉴는 보통 특정 이벤트에 따라 열리거나 닫힙니다. 이런 상태 변화를 스크린 리더에게 알려주기 위해 aria-expanded 속성을 사용합니다. 드롭다운 메뉴가 열렸을 때는 aria-expanded="true"로 설정하고, 닫혔을 때는 aria-expanded="false"로 설정합니다.

또한, 드롭다운 메뉴 버튼에 aria-haspopup="true" 속성을 추가하여 하위 메뉴가 있는지 스크린 리더에게 알려줄 수 있습니다.

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

3. 드롭다운 메뉴의 포커스 관리하기

스크린 리더 사용자는 키보드를 통해 드롭다운 메뉴를 조작할 수 있어야 합니다. 따라서 포커스가 메뉴에 올바르게 이동되어야 합니다.

메뉴가 열렸을 때, 첫 번째 메뉴 항목에 포커스가 가도록 자바스크립트로 설정할 수 있습니다. 또한, aria-current="true" 속성을 사용하여 현재 선택된 항목을 표시하는 것도 중요합니다.

function openDropdownMenu() {
  // 드롭다운 메뉴가 열리면서 첫 번째 메뉴 항목에 포커스를 지정한다.
  document.querySelector('ul[role="menu"] > li:first-child > a').focus();
}

function selectMenuItem() {
  // 메뉴 항목이 선택되면 aria-current="true"를 설정한다.
  const menuItem = event.currentTarget;
  menuItem.setAttribute('aria-current', 'true');
}

4. 드롭다운 메뉴의 키보드 조작 가능하도록 만들기

드롭다운 메뉴는 키보드를 통해 쉽게 조작할 수 있어야 합니다. WAI-ARIA 속성을 활용하여 키보드 조작을 개선할 수 있습니다. 예를 들어, 엔터 키를 누르면 해당 메뉴 항목으로 이동하고, 스페이스 키를 누르면 해당 메뉴 항목을 선택할 수 있도록 할 수 있습니다.

// 키보드 이벤트 핸들러
function handleDropdownMenuKeyPress(event) {
  const key = event.key;
  
  switch (key) {
    case 'Enter':
      event.preventDefault();
      openSubMenu();
      break;
    case ' ':
      event.preventDefault();
      selectMenuItem();
      break;
    // 다른 키에 대한 처리 추가...
  }
}

5. 접근성 테스트와 개선

드롭다운 메뉴의 접근성을 개선한 후에는 실제로 스크린 리더와 다양한 브라우저에서 테스트해야 합니다. 스크린 리더를 이용하여 메뉴를 조작하고, 모든 상황에서 의도한 동작이 발생하는지 확인해야 합니다. 또한, 다양한 브라우저와 플랫폼에서도 테스트하여 호환성을 확보해야 합니다.

접근성 테스트를 통해 발견된 문제점들은 적절한 수정을 통해 개선해야 합니다. 예를 들어, 스크린 리더가 제대로 드롭다운 메뉴를 읽어주지 않거나, 포커스 이동이 올바르게 동작하지 않는 등의 문제가 발견된다면, 해당 문제에 대한 수정을 진행해야 합니다.

마무리

WAI-ARIA 속성을 활용하여 자바스크립트로 구현되는 드롭다운 메뉴의 접근성을 개선하는 방법에 대해 알아보았습니다. 접근성은 모든 사용자를 배려하는 개발자로서 중요한 요소입니다. 드롭다운 메뉴를 개발할 때에는 WAI-ARIA 속성을 올바르게 활용하여 모든 사용자에게 콘텐츠의 접근성과 이해성을 보장할 수 있도록 노력해야 합니다.

#웹접근성 #WAI-ARIA