자동완성이 없는 편집 가능한 콤보박스 예제

다음 콤보박스는 사용자가 이전에 검색된 용어의 가상의 목록에서 용어를 선택할 수 있는 콤보박스에 대한 설계 패턴을 보여줍니다. 설계 패턴은 자동 완성 동작의 네 가지 유형을 설명합니다. 이 예제는 자동완성이 없는 것으로 알려진 자동완성 동작을 보여줍니다. 목록상자 팝업에 나타나는 용어는 텍스트상자에 존재하는 문자열과 관련이 없습니다. 이 구현에서, 목록상자 팝업은 텍스트상자가 초점을 얻을 때 자동으로 작동되지 않습니다; 사용자가 텍스트 상자에 문자를 입력할 때 또는 명시적인 열기 명령을 통해 목록이 열립니다.

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

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

예제

접근성 특성

브라우저는 초점과 마찬가지로 aria-activedescendant로 참조된 엘리먼트의 가시성을 관리하지 않습니다. 키보드 이벤트가 목록상자의 활성 옵션 항목을 변경할 때, 자바스크립트는 aria-activedescendant로 참조된 옵션 항목을 뷰(view) 안으로 스크롤합니다. aria-activedescendant 가시성을 관리하는 것은 콘텐츠의 크기를 키우기 위해 브라우저의 확대 기능을 사용하는 사용자에 대한 접근성에 필수적입니다.
콤보박스를 운용할 때 인지가능성을 높이기 위해, 시각적 키보드 초점과 호버(hover)가 CSS :hover 가상 클래스와 focus 및 blur 이벤트 핸들러를 사용하여 스타일링 됩니다:
- 콤보박스가 초점을 얻을 때 쉽게 인식할 수 있게 하기 위해, 초점은 input과 button 엘리먼트 주위에 콤보박스와 포커스링 사이에 2px 공간이 있는 2px 포커스 링을 생성합니다.
- input이나 버튼이 목록 상자를 열기 위해 클릭 될 수 있음을 쉽게 인식할 수 있게 하기 위해, 호버가 초점과 동일한 스타일을 만듭니다.
- 시각 장애를 가진 사람들이 콤보박스를 인터랙티브 엘리먼트로 식별할 수 있도록, 콤보박스나 목록 위로 마우스를 가져가면 커서가 포인터로 변경됩니다.
- 선택 된 목록상자 옵션 항목과 다른 옵션 항목을 쉽게 구별할 수 있도록, 선택 항목은 옵션 항목 위 아래에 2px 테두리를 만듭니다.
- 참고: 투명 테두리는 고대비 설정이 활성화 된 일부 운영체제에서 보일 수 있기 때문에, 초점을 얻은 엘리먼트와 다른 엘리먼트 사이에 시각적 차이를 만드는데 사용될 수 없습니다. 투명도를 사용하는 대신, 초점을 얻은 엘리먼트가 두꺼운 테두리와 적은 안쪽 여백(padding)을 가집니다. 엘리먼트가 초점을 얻을 때, 테두리가 0에서 2px로 바뀌고 안쪽 여백이 2px 줄어듭니다. 엘리먼트가 초점을 잃을 때, 테두리가 2px에서 0으로 바뀌고 안쪽 여백이 2px 증가합니다.
고대비 설정이 텍스트 콘텐츠의 색상을 변경할 때 열기 버튼에 화살표로 사용되는 인라인 SVG 그래픽이 배경과 충분한 대비를 가지도록 하기 위해, svg 엘리먼트에 CSS forced-color-adjust가 auto로 설정되고 polygon 엘리먼트의 fill 어트리뷰트 값이 currentcolor로 설정됩니다. 이로 인해 polygon 엘리먼트의 fill 색상이 고대비 색상 설정에 의해 덮어씌워집니다. forced-color-adjust가 fill 속성(property)에 정의된 색상을 덮어씌우는데 사용되지 않았다면, 색상은 고대비 모드에서 동일하게 유지되어, 화살표와 배경색 간 대비가 부족하거나 색상이 고대비 모드 배경색과 일치하는 경우 보이지 않게 만들 수 있습니다.
참고: 일부 브라우저들은 SVG 그래픽에 기본값으로 auto를 사용하지 않기 때문에 forced-color-adjust의 명시적인 설정이 필요합니다.

키보드 지원

이 페이지의 예제 콤보박스는 다음의 키보드 인터페이스를 구현합니다. 콤보박스 설계 패턴의 키보드 인터랙션 섹션에 기술되어 있습니다.

Textbox

키	기능
`Down Arrow`	우선 목록상자가 노출되어 있지 않다면 목록상자를 열고 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다. DOM 초점은 텍스트상자에 유지합니다.
`Alt + Down Arrow`	초점 이동이나 선택 변경 없이 목록상자를 엽니다.
`Up Arrow`	우선 목록상자가 노출되어 있지 않다면 목록상자를 열고 마지막 옵션 항목으로 시각적 초점을 이동시킵니다. DOM 초점은 텍스트상자에 유지합니다.
`Enter`	목록상자가 노출되어 있다면 닫습니다.
표준 단일 라인 텍스트 편집 키	키는 `Delete`와 `Shift + Right Arrow` 같이, 커서 이동과 텍스트 조작에 사용됩니다. `type="text"`를 가진 HTML `input`은 텍스트 상자로 사용되므로 브라우저는 플랫폼별 편집 키를 제공할 것입니다.

목록상자 팝업

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

키	기능
`Enter`	텍스트상자 값을 목록상자의 초점을 얻은 옵션 내용으로 설정합니다. 목록상자를 닫습니다. 시각적 초점을 텍스트상자에 설정합니다.
`Escape`	목록상자를 닫습니다. 시각적 초점을 텍스트상자에 설정합니다.
`Down Arrow`	시각적 초점을 다음 옵션 항목으로 이동시킵니다. 시각적 초점이 마지막 옵션 항목에 있다면, 시각적 초점을 첫 번째 옵션 항목으로 이동시킵니다. 참고: 이 행 변경 동작은 `Home`과 `End`가 아래 기술 된 대로 편집 커서를 이동시킬 경우 유용합니다.
`Up Arrow`	시각적 초점을 이전 옵션 항목으로 이동시킵니다. 시각적 초점이 첫 번째 옵션 항목에 있다면, 시각적 초점을 마지막 옵션 항목으로 이동시킵니다. 참고: 이 행 변경 동작은 `Home`과 `End`가 아래 기술 된 대로 편집 커서를 이동시킬 경우 유용합니다.
`Right Arrow`	시각적 초점을 텍스트상자로 이동시키고 편집 커서를 오른쪽으로 한 문자 이동시킵니다.
`Left Arrow`	시각적 초점을 텍스트상자로 이동시키고 편집 커서를 왼쪽으로 한 문자 이동시킵니다.
`Home`	시각적 초점을 텍스트상자로 이동시키고 편집 커서를 필드의 시작 부분에 위치시킵니다.
`End`	시각적 초점을 텍스트상자로 이동시키고 편집 커서를 필드 마지막 부분에 위치시킵니다.
력 가능한 문자	시각적 초점을 텍스트상자로 이동시킵니다. 텍스트상자에 문자를 입력합니다. 목록상자의 옵션 항목은 텍스트상자의 문자를 기반으로 필터링 되지 않습니다.

버튼

버튼이 페이지의 탭 시퀀스에서 제거되었지만, 터치 이벤트를 사용하는 모바일 기기를 위한 보조 기술이 옵션 목록을 여는데 여전히 중요합니다.

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

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

텍스트상자

역할(role)	어트리뷰트	엘리먼트	사용법
`combobox`		`input[type="text"]`	input을 콤보박스로 식별시킵니다.
	`aria-autocomplete="none"`	`input[type="text"]`	콤보박스 팝업의 제안이 현재 텍스트상자 입력을 완성하는 값이 아님을 나타냅니다.
	`aria-controls="ID_REF"`	`input[type="text"]`	팝업으로 제공되는 엘리먼트를 식별시킵니다.
	`aria-expanded="false"`	`input[type="text"]`	팝업 엘리먼트가 노출되어 있지 않음을 나타냅니다.
	`aria-expanded="true"`	`input[type="text"]`	팝업 엘리먼트가 노출노출되어 있음을 나타냅니다.
	`id="string"`	`input[type="text"]`	접근 가능한 이름을 제공하기 위해`label` 엘리먼트의 `for` 어트리뷰트에 의해 참조됩니다. 레이블을 클릭하는 것이 input에 초점을 주기 때문에 HTML input 엘리먼트에 대한 이름 지정 기법이 추천됩니다.
	`aria-activedescendant="ID_REF"`	`input[type="text"]`	목록상자의 옵션 항목이 시각적으로 키보드 초점을 가지고 있는 것으로 나타나는 경우, 그 옵션 항목을 가리킵니다. `Down Arrow`와 같은 탐색 키가 눌린 경우, 자바스크립트가 값을 변경합니다. DOM 초점이 `input` 엘리먼트에 유지되는 동안 어플리케이션이 어떤 엘리먼트가 초점을 얻은 것으로 간주하는지를 보조기술이 알도록 합니다. 이 초점 관리 기법에 대한 더 자세한 정보는 초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.

목록상자 팝업

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

버튼

어트리뷰트	엘리먼트	사용법
`tabindex="-1"`	`button`	키보드 기능이 콤보박스의 키보드 운용과 중복되기 때문에 페이지의 탭 시퀀스에서 버튼을 제거합니다.
`aria-label="Previous Searches"`	`button`	`button`에 대한 레이블을 제공합니다.
`aria-controls="ID_REF"`	`button`	팝업으로 제공되는 엘리먼트를 식별시킵니다.
`aria-expanded="false"`	`button`	팝업 엘리먼트가 노출되어 있지 않음을 나타냅니다.
`aria-expanded="true"`	`button`	팝업 엘리먼트가 노출 되어 있음을 나타냅니다.

Javascript와 CSS 소스 코드

CSS: combobox-autocomplete.css
Javascript: combobox-autocomplete.js

자동완성이 없는 편집 가능한 콤보박스 예제

예제

접근성 특성

키보드 지원

Textbox

목록상자 팝업

버튼

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

텍스트상자

목록상자 팝업

버튼

Javascript와 CSS 소스 코드

HTML Source Code