선택 전용 콤보박스 예제

다음 콤보박스에 대한 ARIA 설계 패턴의 구현 예제는 HTML select 엘리먼트와 기능적으로 유사한 선택 전용 콤보박스 위젯을 보여줍니다. 편집 가능한 콤보박스 예제와 달리, 이 선택 전용 콤보박스는 <input> 엘리먼트로 만들어지지 않으며, 자유 형식 사용자 입력을 허용하지 않습니다. 하지만, HTML <select>와 마찬가지로, 사용자는 일치하는 옵션 항목을 선택하기 위해 문자를 입력할 수 있습니다.

유사한 예는 다음과 같습니다:

목록과 인라인 자동완성이 있는 편집 가능한 콤보박스: 인라인 자동완성 목록으로 알려진 자동완성 동작을 보여주는 편집 가능한 콤보박스.
목록 자동완성이 있는 편집 가능한 콤보박스: 수동 선택 목록으로 알려진 자동완성 동작을 보여주는 편집 가능한 콤보박스.
자동완성이 없는 편집 가능한 콤보박스: aria-autocomplete=none과 관련된 동작을 보여주는 편집 가능한 콤보박스.
그리드 팝업이 있는 편집 가능한 콤보박스: 사용자가 각 제안에 대한 설명 정보를 탐색할 수 있게 하는, 그리드에 제안이 표현되는 편집 가능한 콤보박스.
날짜 선택 콤보박스: 달력과 월 및 년도를 탐색하는 버튼을 포함하는 대화상자를 여는 편집 가능한 날짜 입력 콤보박스.

예제

좋아하는 과일

접근성 특성

이 예제의 기능과 사용자 경험은 size="1" 어트리뷰트를 가진 HTML select 엘리먼트와 거의 동일하지만, 동작에서의 다음 차이가 접근성과 일반적인 사용성을 향상시킵니다.

콤보박스가 축소되어 있고 사용자가 출력 가능한 문자를 입력하는 경우, 목록상자가 표시되고 aria-activedescendant를 통해 접근성 초점을 얻습니다. 이는 사용자가 옵션 항목의 존재를 인식할 수 있게 하고, 보조 기술 사용자가 옵션 항목 목록의 크기를 이해할 수 있게 합니다.
옵션 항목 목록 탐색은 입력 값을 설정하지 않습니다. 이는 옵션 항목을 인식하려면 옵션 항목들을 탐색해야하는 스크린리더 사용자가 현재 입력의 값을 잃어버리지 않고 옵션 항목을 탐색할 수 있게 합니다. 값은 사용자가 Space, Enter, Tab을 누를 때 또는 초점이 콤보박스 밖으로 이동할 때 설정됩니다. 목록상자가 Escape로 닫히거나 사용자가 input을 클릭하여 목록을 축소시킨 경우 현재 값은 유지됩니다.
브라우저는 aria-activedescendant로 참조된 엘리먼트에 대해 초점과 마찬가지로 가시성을 관리하지 않습니다. 키보드 이벤트가 목록상자의 활성 옵션 항목을 변경할 때, 자바스크립트는aria-activedescendant로 참조된 옵션 항목을 뷰(view) 안으로 스크롤합니다. aria-activedescendant 가시성을 관리하는 것은 콘텐츠의 크기를 키우기 위해 확대 기능을 사용하는 사용자에 대한 접근성에 필수적입니다.

키보드 지원

이 페이지의 예제 콤보박스는 다음의 키보드 인터랙션을 구현합니다. 키보드 인터페이스에 대한 다른 변형과 옵션 항목은 콤보박스 설계 패턴의 키보드 인터랙션 섹션에 기술되어 있습니다.

닫힌 콤보박스

키	기능
`Down Arrow`	목록상자가 노출 되어 있지 않다면 초점 이동이나 선택 변경 없이 목록상자를 엽니다. DOM 초점은 콤보박스에 유지됩니다.
`Alt + Down Arrow`	초점 이동이나 선택 변경 없이 목록상자를 엽니다.
`Up Arrow`	목록상자가 노출 되어 있지 않다면 우선 목록상자를 열고 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. DOM 초점은 콤보박스에 유지됩니다.
`Enter`	초점 이동이나 선택 변경 없이 목록상자를 엽니다.
`Space`	초점 이동이나 선택 변경 없이 목록상자를 엽니다.
`Home`	목록상자를 열고 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다.
`End`	목록상자를 열고 마지막 옵션 항목으로 시각적 초점을 이동시킵니다.
출력 가능한 문자	목록상자가 노출되어 있지 않다면 우선 목록상자를 열고 입력 된 문자와 일치하는 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. 여러 키가 빠르게 연속으로 입력 되는 경우, 전체 문자열과 일치하는 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. 동일한 문자가 연속으로 입력 되는 경우, 시각적 초점이 그 문자로 시작하는 옵션 항목들을 순회합니다

목록상자 팝업

참고: 시각적 초점이 목록상자에 있는 경우, DOM 초점은 콤보박스에 유지되고 콤보박스의 aria-activedescendant 값이 시각적으로 초점을 받은 것으로 나타나는 목록상자 옵션 항목을 가리키는 값으로 설정됩니다. 키보드 명령에 대한 다음 설명이 초점을 언급하는 경우, 이는 시각적 초점 표시기를 가리킵니다. 이 초점 관리 기법에 대한 더 자세한 정보는 초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.

키	기능
`Enter`	값을 목록상자의 초점을 얻은 옵션 항목의 내용으로 설정합니다. 목록상자를 닫습니다. 콤보박스에 시각적 초점을 설정합니다.
`Space`	값을 목록상자의 초점을 얻은 옵션 항목의 내용으로 설정합니다. 목록상자를 닫습니다. 콤보박스에 시각적 초점을 설정합니다.
`Tab`	값을 목록상자의 초점을 얻은 옵션 항목의 내용으로 설정합니다. 목록상자를 닫습니다. 다음 초점을 얻을 수 있는(focusable) 엘리먼트로 초점을 이동시키는, 기본 동작을 수행합니다. 참고: 네이티브 `<select>` 엘리먼트는 목록상자를 닫지만 탭에서 초점을 이동하지 않습니다. 이 패턴은 이 경우 네이티브 엘리먼트보다는 다른 콤보박스의 동작과 일치합니다.
`Escape`	목록상자를 닫습니다. 시각적 초점을 콤보박스에 설정합니다.
`Down Arrow`	시각적 초점을 다음 옵션 항목으로 이동시킵니다. 시각적 초점이 마지막 옵션 항목에 있다면, 시각적 초점을 이동시키지 않습니다.
`Up Arrow`	시각적 초점을 이전 옵션 항목으로 이동시킵니다. 시각적 초점이 첫 번째 옵션 항목에 있다면, 시각적 초점을 이동시키지 않습니다.
`Alt + Up Arrow`	값을 목록상자의 초점을 얻은 옵션 항목의 내용으로 설정합니다. 목록상자를 닫습니다. 시각적 초점을 콤보박스에 설정합니다.
`Home`	시각적 초점을 첫 번째 옵션 항목으로 이동시킵니다.
`End`	시각적 초점을 마지막 옵션 항목으로 이동시킵니다.
`PageUp`	시각적 초점을 10개 옵션 위로(혹은 첫 번째 옵션 항목으로) 이동시킵니다.
`PageDown`	시각적 초점을 10개 옵션 아래로(혹은 마지막 옵션 항목으로) 이동시킵니다.
출력 가능한 문자	목록상자가 노출되어 있지 않다면 우선 목록상자를 열고 입력 된 문자와 일치하는 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. 여러 키가 빠르게 연속으로 입력 되는 경우, 전체 문자열과 일치하는 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. 동일한 문자가 연속으로 입력 되는 경우, 시각적 초점이 그 문자로 시작하는 옵션 항목들을 순회합니다.

Role, Property, State, Tabindex 어트리뷰트

이 페이지의 콤보박스 예제는 다음 ARIA 역할(role), 상태(state), 속성(property)을 구현합니다. 역할(role), 상태(state), 속성(property)을 적용하는 다른 방법에 대한 정보는 콤보박스 설계 패턴의 역할(role), 상태(state), 속성(property) 섹션에서 볼 수 있습니다.

콤보박스

역할(role)	어트리뷰트	엘리먼트	사용법
`combobox`		`div`	input을 콤보박스로 식별시킵니다.
	`aria-labelledby="#IDREF"`	`div`	콤보박스에 레이블을 지정하는 엘리먼트를 식별시킵니다.
	`aria-controls="#IDREF"`	`div`	팝업으로 제공되는 엘리먼트를 식벽시킵니다.
	`aria-expanded="false"`	`div`	팝업 엘리먼트가 노출되어 있지 않음을 나타냅니다.
	`aria-expanded="true"`	`div`	팝업 엘리먼트가 노출되어 있음을 나타냅니다.
	`aria-activedescendant="IDREF"`	`div`	목록상자의 옵션 항목이 시각적으로 키보드 초점을 가진 것으로 나타나는 경우, 그 옵션 항목을 가리키게 하세요. `Down Arrow`와 같은 탐색 키가 눌린 경우, 자바스크립트가 값을 변경시킵니다. DOM 초점이 `input` 엘리먼트에 유지되는 동안 어플리케이션이 어떤 엘리먼트가 초점을 얻은 것으로 간주하는지를 보조기술이 알도록 합니다. 이 초점 관리 기법에 대한 더 자세한 정보는 초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.

목록상자 팝업

역할(role)	어트리뷰트	엘리먼트	사용법
`listbox`		`div`	엘리먼트를 `listbox`로 식별시킵니다.
`option`		`div`	엘리먼트를 `listbox` `option`으로 식별시킵니다. 엘리먼트의 텍스트 콘텐트가 `option`의 접근 가능한 이름을 제공합니다.
	`aria-selected="true"`	`li`	선택 된 것으로 시각적으로 강조된 경우 목록 상자의 옵션 항목에 지정됩니다. 목록의 옵션 항목이 `aria-activedescendant`에 의해 참조될 때만 발생합니다.

Javascript와 CSS 소스 코드

CSS: select-only.css
Javascript: select-only.js

선택 전용 콤보박스 예제

예제

접근성 특성

키보드 지원

닫힌 콤보박스

목록상자 팝업

Role, Property, State, Tabindex 어트리뷰트

콤보박스

목록상자 팝업

Javascript와 CSS 소스 코드

HTML Source Code