자동 완성 위젯의 접근성

WAI-ARIA 콤보 상자 패턴은 자동 완성 위젯에 사용할 특정 역할과 속성 집합을 정의합니다. 콤보 상자는 목록 상자 팝업과 연결된 입력 요소입니다. 이 패턴을 사용하면 화면 낭독기가 시각적 UI를 볼 수 없는 사용자에게 상호작용 방식, 사용 가능한 옵션, 현재 선택 항목을 정확하게 안내할 수 있습니다.

입력 요소를 div로 감싸고 role="combobox"를 지정합니다. 이렇게 하면 보조 기술에 입력 요소와 연결된 팝업 목록이 있음을 알립니다. 이 래퍼에 aria-expanded={isOpen}을 설정하여 제안 목록이 현재 표시되어 있는지 숨겨져 있는지를 화면 낭독기에 알립니다.

입력 요소 자체에는 다음 속성이 있어야 합니다. aria-autocomplete="list"(팝업에 제안 목록이 포함됨), aria-haspopup="listbox"(클릭하거나 입력하면 목록 상자가 열림), aria-expanded={isOpen}, 그리고 드롭다운 목록 요소의 id를 가리키는 aria-controls="suggestion-list-id"입니다.

입력 요소의 aria-activedescendant는 현재 강조된 옵션의 id를 가리킵니다. selectedIndex가 0이면 aria-activedescendant="option-0"으로 설정합니다. 화면 낭독기는 실제 포커스를 입력 요소에서 이동하지 않고도 이 속성을 사용하여 어떤 항목이 활성 상태인지 안내합니다. 선택된 항목이 없으면 속성을 제거하거나 빈 문자열로 설정합니다.

드롭다운 컨테이너 요소에는 role="listbox"와 입력 요소의 aria-controls와 일치하는 고유한 id가 있어야 합니다. 이 역할은 접근성 트리에 이 요소가 선택 가능한 옵션의 목록임을 알립니다. 목록 상자는 입력 요소의 aria-activedescendant를 통해 간접적으로 포커스를 받습니다.

모든 제안 항목에는 role="option"과 option-0, option-1 등과 같은 고유한 id가 있어야 합니다. 현재 어떤 항목이 강조되었는지 나타내도록 aria-selected={index === selectedIndex}를 추가합니다. 사용자가 화살표 키로 탐색하면 화면 낭독기는 옵션의 내용과 선택 여부를 모두 안내합니다.

사용자가 ArrowDown을 누르고 aria-activedescendant가 option-1로 업데이트되면 VoiceOver는 "React 훅, 5개 중 2번째"와 같이 안내합니다. 화면 낭독기는 ARIA 마크업에서 옵션의 텍스트와 목록 내 위치를 자동으로 읽습니다. 키보드 탐색에는 추가 라이브 영역이 필요하지 않습니다.

macOS에서는 VoiceOver(Cmd+F5로 켜고 끄기)를, Windows에서는 NVDA(무료 다운로드)를 사용하여 테스트합니다. 입력 요소로 이동하여 입력을 시작합니다. 화면 낭독기가 콤보 상자 역할, 검색된 결과 수, 화살표 키로 이동할 때 각 옵션을 안내하는지 확인합니다. WAI-ARIA 작성 지침의 예제와 동작을 비교합니다.

제안 항목이 비동기적으로 로드될 때 aria-live="polite"와 aria-atomic="true"가 지정된 시각적으로 숨겨진 div를 추가합니다. 로딩이 완료되면 텍스트 내용을 "결과 5개를 찾았습니다" 또는 "결과를 찾지 못했습니다"로 업데이트합니다. 화면 낭독기는 현재 읽고 있는 내용이 끝난 후 이 메시지를 안내하므로 사용자를 방해하지 않고 계속 정보를 제공할 수 있습니다.

w3.org/WAI/ARIA/apg에 있는 WAI-ARIA 작성 지침(APG)에는 작동하는 코드 예제와 자세한 키보드 상호작용 사양이 포함된 전용 콤보 상자 패턴 페이지가 있습니다. 자동 완성, 대화 상자, 탭과 같은 상호작용 위젯을 구현할 때는 완전한 접근성 준수를 위해 항상 APG를 참고합니다.

화면에 보이는 레이블 요소가 없다면 입력 요소에 aria-label을 제공합니다: aria-label="Search suggestions". 레이블로 placeholder에만 의존하지 마세요. 사용자가 입력하면 자리 표시자가 사라지고 모든 화면 낭독기가 일관되게 안내하지 않기 때문입니다. htmlFor를 사용하는 화면 표시 label 요소가 항상 가장 좋은 방법입니다.

자동 완성 입력 요소에서 aria-activedescendant 속성의 용도는 무엇인가요?

래퍼에 role="combobox"를 사용하고, 입력 요소에 aria-autocomplete="list", aria-expanded, aria-controls, aria-activedescendant를 사용하여 입력 요소와 제안 목록을 연결합니다. 각 옵션에는 role="option", 고유한 id, aria-selected가 필요합니다. 비동기 결과 수를 알리기 위해 aria-live 영역을 추가합니다.