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

US 주 또는 지역 이름을 선택하는 다음 콤보박스는 콤보박스에 대한 설계 패턴을 보여줍니다. 설계 패턴은 자동 완성 동작의 네 가지 유형을 설명합니다. 이 예는 수동 선택을 가진 목록 자동완성으로 알려진 자동완성 동작을 보여줍니다. 사용자가 편집 상자에 하나 이상의 문자를 입력하고 입력된 문자가 하나 이상의 주 또는 지역 이름의 시작 부분과 일치하는 경우, 일치하는 이름을 포함하는 목록상자 팝업이 나타납니다. 목록상자가 나타날 때, 제안 이름이 자동으로 선택되지 않습니다. 따라서, 입력 후, 사용자가 목록상자의 값을 선택하지 않고 콤보박스 밖으로 탭하거나 클릭하는 경우, 입력된 문자열이 콤보박스의 값이 됩니다. 이 구현이 사용자가 주나 지역 이름을 입력하는 것을 허용하지만, 다른 임의의 값의 입력을 방지하지 않고 있음에 유의하세요.

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

예제

  • 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

접근성 특성

키보드 지원

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

Textbox

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

목록상자 팝업

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

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

Button

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

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

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

Textbox

역할(role) 어트리뷰트 엘리먼트 사용법
combobox input[type="text"] input을 콤보박스로 식별시킵니다.
aria-autocomplete="list" 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="States" ul listbox에 대한 레이블을 제공합니다.
option li
  • 엘리먼트를 listbox option으로 식별시킵니다.
  • 엘리먼트의 텍스트 콘텐츠가 option의 접근 가능한 이름을 제공합니다.
aria-selected="true" li
  • 목록상자의 옵션 항목이 선택된 것으로 시각적으로 강조 될 때 지정됩니다.
  • 목록의 옵션 항목이 aria-activedescendant에 의해 참조 될 때만 발생합니다.

버튼

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

Javascript와 CSS 소스 코드

HTML Source Code