목록과 인라인 자동완성이 있는 편집 가능한 콤보박스 예제
US 주 또는 지역 이름을 선택하는 다음 콤보박스는 콤보박스에 대한 설계 패턴을 보여줍니다. 설계 패턴은 자동 완성 동작의 네 가지 유형을 설명합니다. 이 예제는 인라인 완성을 가진 목록으로 패턴 내부에서 참조되는 자동완성 동작을 보여줍니다. 사용자가 편집 상자에 하나 이상의 문자를 입력하고 입력된 문자가 하나 이상의 주 또는 지역 이름의 시작 부분과 일치하는 경우, 일치하는 이름을 포함하는 목록상자 팝업이 나타나고, 첫 번째 일치 항목이 자동으로 선택됩니다. 또한, 사용자가 입력하지 않은 선택된 제안의 부분인 완성 문자열이 텍스트상자의 입력 커서 뒤에 인라인으로 나타납니다. 사용자가 다른 제안을 선택하거나 텍스트상자의 문자열을 변경하지 않는 한 콤보박스가 초점을 잃을 때 자동으로 선택 된 제안이 텍스트상자의 값이 됩니다. 이 구현이 사용자가 주나 지역 이름을 입력하는 것을 허용하지만 다른 임의의 값의 입력은 방지하고 있음에 유의하세요.
유사한 예는 다음과 같습니다:
- 선택 전용 콤보박스: HTML
select엘리먼트와 기능적으로 유사한 텍스트 입력이 없는 선택 전용 콤보박스. - 목록 자동완성이 있는 편집 가능한 콤보박스:
수동 선택 목록
으로 알려진 자동완성 동작을 보여주는 편집 가능한 콤보박스. - 자동완성이 없는 편집 가능한 콤보박스:
aria-autocomplete=none과 관련된 동작을 보여주는 편집 가능한 콤보박스. - 그리드 팝업이 있는 편집 가능한 콤보박스: 사용자가 각 제안에 대한 설명 정보를 탐색할 수 있게 하는, 그리드에 제안이 표현되는 편집 가능한 콤보박스.
- 날짜 선택 콤보박스: 달력과 월 및 년도를 탐색하는 버튼을 포함하는 대화상자를 여는 편집 가능한 날짜 입력 콤보박스.
예제
- Alabama
- Alaska
- American Samoa
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- District of Columbia
- Florida
- Georgia
- Guam
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Northern Marianas Islands
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Puerto Rico
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Virgin Islands
- Washington
- West Virginia
- Wisconsin
- Wyoming
접근성 특성
- 브라우저는 초점과 마찬가지로 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엘리먼트에 CSSforced-color-adjust가auto로 설정되고polygon엘리먼트의fill어트리뷰트 값이currentcolor로 설정됩니다. 이로 인해 polygon 엘리먼트의fill색상이 고대비 색상 설정에 의해 덮어씌워집니다.forced-color-adjust가fill속성(property)에 정의된 색상을 덮어씌우는데 사용되지 않았다면, 색상은 고대비 모드에서 동일하게 유지되어, 화살표와 배경색 간 대비가 부족하거나 색상이 고대비 모드 배경색과 일치하는 경우 보이지 않게 만들 수 있습니다.
참고: 일부 브라우저들은 SVG 그래픽에 기본값으로auto를 사용하지 않기 때문에forced-color-adjust의 명시적인 설정이 필요합니다.
키보드 지원
이 페이지의 콤보박스 예제는 다음의 키보드 인터페이스를 구현합니다. 키보드 인터페이스에 대한 다른 변형과 옵션은 콤보박스 설계 패턴의 키보드 인터랙션 섹션에 기술되어 있습니다.
텍스트상자
| 키 | 기능 |
|---|---|
| Down Arrow |
|
| Alt + Down Arrow | 초점 이동이나 선택 변경 없이 목록상자를 엽니다. |
| Up Arrow |
|
| Enter |
|
| Escape |
|
| 표준 단일 라인 텍스트 편집 키 |
|
목록상자 팝업
참고: 시각적 초점이 목록상자에 있다면, DOM 초점은 텍스트상자에 유지되고 텍스트상자의 aria-activedescendant의 값이 시각적으로 초점을 얻은 것으로 나타나는 목록상자 옵션 항목을 가리키는 값으로 설정됩니다.
키보드 명령에 대한 다음 설명이 초점을 언급하는 경우, 이는 시각적 초점 표시기를 가리킵니다.
이 초점 관리 기법에 대한 더 자세한 정보는
초점 관리를 위해 aria-activedescendant 사용하기를 참고하세요.
| 키 | 기능 |
|---|---|
| Enter |
|
| Escape |
|
| Down Arrow |
|
| Up Arrow |
|
| 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="both"
|
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"] |
|
|
aria-activedescendant="ID_REF"
|
input[type="text"] |
|
목록상자 팝업
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
listbox
|
ul
|
ul 엘리먼트를 listbox로 식별시킵니다. |
|
aria-label="States"
|
ul |
listbox에 대한 레이블을 제공합니다. |
|
option
|
li |
|
|
aria-selected="true"
|
li |
|
버튼
| 역할(role) | 어트리뷰트 | 엘리먼트 | 사용법 |
|---|---|---|---|
tabindex="-1"
|
button |
기능이 콤보박스의 키보드 운용과 중복되기 때문에 페이지의 탭 시퀀스에서 버튼을 제거합니다. | |
aria-label="States"
|
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
HTML Source Code