실제로 작동하는 접근성 높은 맞춤형 드롭다운(콤보박스) 만드는 방법
Source: Dev.to
원래는 AccessGuard 블로그에서 게시되었습니다.
Step 1: 올바른 역할부터 시작하기
콤보박스는 단순히 스타일이 적용된 버튼이 아닙니다. WAI‑ARIA Authoring Practices에서는 다음과 같은 역할 구조를 정의하고 있습니다:
aria-haspopup="listbox"와 열림 상태를 나타내는aria-expanded를 가진 콤보박스 요소(보통 버튼이나 입력 필드).- 리스트박스 id를 가리키는
aria-controls. - 팝업 자체는
role="listbox"를 사용합니다. - 각 옵션은
role="option"을 사용하고, 현재 선택된 옵션에는aria-selected를 지정합니다.
Tip: 역할은 동작과 일치해야 합니다. 메뉴처럼 동작하는 div에 무작정
role="listbox"를 붙이지 마세요.
Step 2: 트리거를 접근 가능하고 설명적으로 만들기
- 트리거는 실제 포커스 가능한 요소여야 합니다 — 기본
또는에tabindex="0"을 지정한 경우이어야 합니다. - 보이는 레이블,
aria-label, 또는aria-labelledby를 사용하여 접근 가능한 이름을 제공하십시오. - 현재 값을 알리도록 하여 스크린리더 사용자가 “Country, combobox, United States”라고 듣게 하고, 단순히 “combobox, collapsed”라고만 듣지 않도록 합니다.
3단계: 키보드 지원은 절대 양보할 수 없습니다
- Enter 또는 Space – 리스트박스를 엽니다.
- Arrow Down – 닫혀 있으면 열고 첫 번째 또는 선택된 옵션으로 이동합니다.
- Arrow Up / Arrow Down – 옵션 사이를 이동합니다.
- Home / End – 첫 번째와 마지막 옵션으로 이동합니다.
- Escape – 닫고 트리거로 포커스를 반환합니다.
- Tab – 닫고 다음 포커스 가능한 요소로 이동합니다.
- Typeahead – 문자를 누르면 다음 일치하는 옵션으로 이동합니다.
Step 4: 포커스 관리, 시각적 강조만이 아니라
리스트박스 패턴에서는 DOM 포커스가 콤보박스 트리거에 남아 있습니다.
트리거에 aria-activedescendant를 사용하고, 현재 강조된 옵션의 id를 가리키게 합니다.
이렇게 하면 트리거에 타입어헤드와 키보드 핸들러가 유지되면서 보조 기술에 어떤 옵션이 활성화되었는지 알려줄 수 있습니다.
실제 포커스를 리스트로 이동시키는 것은 타입어헤드를 깨뜨리고 스크린 리더를 혼란스럽게 만드는 흔한 실수입니다.
Step 5: 소음 없이 변경 사항 알리기
리스트박스가 열릴 때, aria-expanded와 aria-activedescendant가 올바르게 연결되어 있으면 스크린 리더가 확장된 상태와 현재 옵션을 자동으로 알립니다.
중복된 알림을 만드는 추가 aria-live 영역을 피하세요—두 번 알리는 것이 전혀 알리지 않는 것보다 더 나쁩니다.
Step 6: 닫기 동작을 잊지 마세요
- Escape 키, 외부 클릭, 그리고 콤보박스 블러 시 리스트박스를 닫습니다.
- Escape 키로 닫을 때 트리거에 포커스를 복원합니다.
- 사용자가 옵션을 선택할 때:
- 트리거의 표시 텍스트와 접근성 이름을 업데이트합니다.
- 리스트박스를 닫습니다.
- 트리거로 포커스를 반환합니다.
빠른 테스트 체크리스트
- 키보드만으로 열고, 탐색하고, 선택하고, 닫을 수 있나요?
- VoiceOver 또는 NVDA가 역할, 상태, 활성 옵션을 알리나요?
- 타입어헤드가 작동하나요?
- Escape 키를 누르면 항상 트리거로 포커스가 돌아가나요?
- 모바일 터치 사용자가 사용 가능한 경험을 얻나요? (힌트: TalkBack 및 iOS의 VoiceOver로 테스트)
모든 항목에 예라고 답할 수 있다면, 웹상의 맞춤형 드롭다운 중 90 % 이상을 앞선 것입니다.
언제 이 모든 것을 건너뛸까
솔직히 말해서, 가능한 경우 언제든지 기본 요소를 사용하세요. 접근성이 뛰어나고 모든 플랫폼에서 작동하며 모바일 브라우저는 무료로 훌륭한 선택기를 제공합니다. 기본 요소가 제공하지 못하는 기능—검색 가능한 옵션, 풍부한 옵션 콘텐츠, 비동기 로딩—이 진정으로 필요할 때만 커스텀 콤보박스를 구축하세요. 가장 좋은 접근성 컴포넌트는 종종 직접 만들 필요가 없었던 것입니다.
우리는 이 패턴 위에 또 다른 복잡성을 더하는 접근 가능한 자동완성에 대한 게시물로 이어갈 예정입니다. 다음에 다루었으면 하는 까다로운 컴포넌트가 있다면 알려주세요.
AccessGuard의 더 많은 내용을 getaccessguard.com에서 읽어보세요.