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

19 Oct 2023

javascript

드롭다운 메뉴는 웹 사이트에서 널리 사용되는 중요한 컴포넌트입니다. 하지만 드롭다운 메뉴는 시각적으로 표현되는 부분 이외에 접근성 문제가 있을 수 있습니다. 이러한 문제를 해결하기 위해 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 속성을 활용하여 드롭다운 메뉴의 접근성을 개선할 수 있습니다.

WAI-ARIA는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준입니다. 이를 활용하여 드롭다운 메뉴에 접근성을 추가할 수 있습니다.

1. 드롭다운 트리거

드롭다운 메뉴는 주로 마우스 클릭이나 터치를 통해 트리거됩니다. 하지만 키보드 사용자를 위해 열린 상태를 유지하면서 메뉴 항목 간에 이동할 수 있는 포커싱 메커니즘이 필요합니다.

WAI-ARIA 속성을 활용하여 드롭다운 트리거에 다음과 같은 속성을 추가할 수 있습니다:

<button aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu">
  메뉴 트리거
</button>

aria-haspopup: 드롭다운 메뉴를 가지고 있는 요소임을 나타냅니다.
aria-expanded: 드롭다운 메뉴가 열려있는지 여부를 나타냅니다.
aria-controls: 드롭다운 메뉴와 연관된 요소의 ID를 나타냅니다.

2. 드롭다운 메뉴

드롭다운 메뉴는 키보드 사용자가 메뉴 항목 사이를 이동할 수 있도록 포커스 이동을 제공해야 합니다. 또한, 메뉴 항목들은 시각적으로 보이지 않더라도 스크린 리더가 읽을 수 있도록 해야 합니다.

WAI-ARIA 속성을 활용하여 드롭다운 메뉴에 다음과 같은 속성을 추가할 수 있습니다:

<ul id="dropdown-menu" role="menu" aria-labelledby="dropdown-trigger" tabindex="-1">
  <li role="menuitem">
    메뉴 항목 1
  </li>
  <li role="menuitem">
    메뉴 항목 2
  </li>
  <li role="menuitem">
    메뉴 항목 3
  </li>
</ul>

role="menu": 요소가 메뉴임을 나타냅니다.
aria-labelledby: 메뉴를 제공하는 트리거 요소의 ID를 나타냅니다.
tabindex="-1": 드롭다운 메뉴가 숨겨져 있을 때에도 포커스를 받을 수 있게 합니다.
role="menuitem": 각각의 메뉴 항목을 나타냅니다.

3. 이벤트 처리

드롭다운 트리거를 클릭하거나 키보드로 열고 닫을 때에는 이벤트를 처리하는 JavaScript 코드가 필요합니다. 이벤트 처리를 통해 aria-expanded 속성을 업데이트하고, 포커스 이동이 제대로 동작하도록 해야합니다.

자바스크립트 코드의 예시는 다음과 같습니다:

const dropdownTrigger = document.getElementById('dropdown-trigger');
const dropdownMenu = document.getElementById('dropdown-menu');

dropdownTrigger.addEventListener('click', () => {
  const expanded = dropdownTrigger.getAttribute('aria-expanded') === 'true';
  dropdownTrigger.setAttribute('aria-expanded', !expanded);
  
  if (!expanded) {
    dropdownMenu.focus();
  }
});

dropdownMenu.addEventListener('keydown', (event) => {
  const isFirstItem = event.target === dropdownMenu.firstElementChild;
  const isLastItem = event.target === dropdownMenu.lastElementChild;
  
  switch (event.key) {
    case 'ArrowUp':
      if (isFirstItem) {
        dropdownTrigger.focus();
      } else {
        event.target.previousElementSibling.focus();
      }
      break;
    case 'ArrowDown':
      if (isLastItem) {
        dropdownTrigger.focus();
      } else {
        event.target.nextElementSibling.focus();
      }
      break;
    case 'Escape':
      dropdownMenu.setAttribute('aria-expanded', 'false');
      dropdownTrigger.focus();
      break;
  }
});

이 코드 예시는 드롭다운 트리거를 클릭하거나 키보드로 열고 닫을 때 aria-expanded 속성을 업데이트하고, 화살표 키로 메뉴 항목 사이를 이동하고 Escape 키로 메뉴를 닫을 수 있도록 합니다.

드롭다운 메뉴의 접근성을 개선하기 위해 WAI-ARIA 속성을 활용하고 이벤트 처리를 통해 포커스 이동을 제공하는 방법을 살펴보았습니다. 이를 통해 모든 사용자가 웹 사이트의 드롭다운 메뉴를 쉽게 이용할 수 있게 됩니다.

1. 드롭다운 트리거

2. 드롭다운 메뉴

3. 이벤트 처리

참고 자료