자동완성 요소
개요(Overview)
자동완성(auto complete)는 사용자가 편집창에서 텍스트를 입력할 때, 그 중에 하나를 선택할 수 있도록 서버나 페이지에 저장된 여러 값들을 추천 목록으로 표시해 주는 기능으로 기억나지 않는 키워드를 찾는 대에 도움이 된다. 사용자는 이 기능으로 하여금 편집창에 완성된 글자를 체워넣거나, 해당 키워드로 즉시 검색(기능 실행)을 수행한다.
구현 방법 핵심 및 주요 개념
| 주요 속성(편집창) | |
|---|---|
| role="combobox" | 자동완성의 경우, 사용자가 입력한 값에 따라, 일치하는 글자가 있는 결과를 목록화하여 표시하므로, role="combobox"를 편집 가능한 type="Text"인 input 태그에 부여한다. |
| aria-expanded="Boolean" |
자동완성 편집창으로 사용되는 콤보 상자와 일반적인 콤보 상자는 확장/축소가 가능하므로 aria-expanded로 확장 및 축소 상태를 제공해야 한다 이 속성에 대한 정보는 여기를 참고하기 바람 |
| aria-autocomplete="Type" |
스크린 리더가 자동완성이 가능한 편집창임을 사용자에게 알려줄 수 있도록 하는 속성으로 속성값은 다음과 같다.
이 세 가지의 속성에서 의미하는 자동완성의 유형에는 분명히 차이가 존재하나, 현재의 접근성 API로부터 제공되는 음성 피드백은 동일하다. 다만, 의미에 맞게끔 속성값을 명시해주는 것이 바람직하다. |
| aria-controls="Id" | 검색 콤보 상자의 목록(role="listbox") 컨테이너의 아이디를 명시하여 연결하는 역할을 한다. |
| aria-activedescendant="id" | 선택된 option에 id를 부여하고, 해당 option의 id를 aria-activedescendant의 속성값으로 전달하면 해당 텍스트와 몇 개의 목록 중 몇 번쨰 목록을 탐색 중인가를 스크린 리더 사용자에게 음성으로 전달한다. |
| 주요 속성(목록 상자/항목) | |
|---|---|
| role="listbox" (목록) |
컨테이너가 option의 목록임을 알 수 있도록 role="listbox"를 사용해야 하며, 목록 상자에는 콤보 상자에서 연결할 때 사용할 id가 필요하다. |
| role="option" (항목) |
|
| 원칙 | |
|---|---|
| 마크업 구조 |
WAI-ARIA 1.1의 콤보 상자의 구조는 컨테이너에 combobox 역할을 제공하고, text 유형의 input 태그를 넣는 형태였다. 하지만, W3C 표준 마크업 규칙에 위배되어 현재 최신의 WAI-ARIA 1.2 에서는 input에 직접 combobox 역할을 제공하는 것으로 변경되었다. 또한 WAI-ARIA 1.2에서의 콤보 상자에서는 aria-owns 속성 사용이 제외되어 더는 사용하지 않는다. |
| 키보드/마우스 조작 이벤트 제공 |
|