웹 접근성을 고려한 자바스크립트 드롭다운 컴포넌트 개발 가이드

19 Oct 2023

javascript

웹 접근성은 모든 사용자가 웹 사이트에 쉽게 접근하고 이용할 수 있는 것을 의미합니다. 자바스크립트를 사용하여 드롭다운 컴포넌트를 개발할 때 웹 접근성을 고려하는 것은 매우 중요합니다. 이 가이드에서는 웹 접근성에 중점을 두고 자바스크립트로 드롭다운 컴포넌트를 개발하는 방법을 안내하겠습니다.

드롭다운 컴포넌트의 기본 구조

드롭다운 컴포넌트는 사용자가 클릭하거나 호버하는 것에 반응하여 선택할 수 있는 목록을 표시하는 기능을 제공합니다. 이를 위해 일반적으로 HTML 요소와 자바스크립트 이벤트 처리를 사용합니다.

기본적인 드롭다운 컴포넌트의 구조는 다음과 같습니다.

<button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">드롭다운</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-toggle">
  <li><a href="#">항목 1</a></li>
  <li><a href="#">항목 2</a></li>
  <li><a href="#">항목 3</a></li>
</ul>

위의 예제에서는 button 요소를 토글 버튼으로 사용하고, ul 요소를 드롭다운 목록으로 사용합니다. aria-haspopup 속성은 해당 요소가 하위 요소를 가지고 있는지를 나타내고, aria-expanded 속성은 목록이 펼쳐져 있는지를 나타냅니다. 또한 aria-labelledby 속성을 사용하여 토글 버튼과 목록을 연결합니다.

드롭다운 기능 구현하기

드롭다운 컴포넌트의 기능을 구현하기 위해 자바스크립트를 사용합니다. 이때 웹 접근성을 고려하여 몇 가지 요구사항을 만족해야 합니다.

토글 버튼을 클릭하거나 호버할 때, 목록이 펼쳐지거나 닫혀야 합니다.
목록이 펼쳐질 때, 키보드 포커스가 목록 내부로 이동해야 합니다.
목록이 닫힐 때, 키보드 포커스가 토글 버튼으로 이동해야 합니다.
키보드로 목록 내 항목을 선택할 수 있어야 합니다.

이러한 요구사항을 충족하기 위해 다음과 같은 자바스크립트 코드를 추가해야 합니다.

const toggleButton = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

toggleButton.addEventListener('click', function() {
  const expanded = toggleButton.getAttribute('aria-expanded') === 'true' || false;
  toggleButton.setAttribute('aria-expanded', !expanded);
  dropdownMenu.classList.toggle('show');
});

toggleButton.addEventListener('keydown', function(event) {
  if (event.keyCode === 13 || event.keyCode === 32) {
    event.preventDefault();
    const expanded = toggleButton.getAttribute('aria-expanded') === 'true' || false;
    toggleButton.setAttribute('aria-expanded', !expanded);
    dropdownMenu.classList.toggle('show');
  }
});

dropdownMenu.addEventListener('keydown', function(event) {
  if (event.keyCode === 27) {
    toggleButton.focus();
    toggleButton.setAttribute('aria-expanded', 'false');
    dropdownMenu.classList.remove('show');
  } else if (event.keyCode === 40) {
    event.preventDefault();
    const nextItem = event.target.nextElementSibling;
    if (nextItem) {
      nextItem.querySelector('a').focus();
    }
  } else if (event.keyCode === 38) {
    event.preventDefault();
    const prevItem = event.target.previousElementSibling;
    if (prevItem) {
      prevItem.querySelector('a').focus();
    } else {
      toggleButton.focus();
      toggleButton.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('show');
    }
  }
});

위의 코드에서는 토글 버튼과 목록 요소를 변수에 할당하고, 클릭 및 키 이벤트를 처리하는 핸들러를 추가합니다. 각 핸들러 함수는 요구사항에 따라 토글 버튼 상태를 변경하고 목록을 펼치거나 닫아주는 역할을 수행합니다.

드롭다운 컴포넌트의 기본 구조

드롭다운 기능 구현하기

참고 자료 및 링크

#웹접근성 #자바스크립트