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

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

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

예제

  • weather
  • salsa recipes
  • cheap flights to NY
  • dictionary
  • baseball scores
  • hotels in NY
  • mortgage calculator
  • restaurants near me
  • free games
  • gas prices
  • classical music

접근성 특성

키보드 지원

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

Textbox

기능
Down Arrow
  • 우선 목록상자가 노출되어 있지 않다면 목록상자를 열고 첫 번째 옵션 항목으로 시각적 초점을 이동시킵니다.
  • DOM 초점은 텍스트상자에 유지합니다.
Alt + Down Arrow 초점 이동이나 선택 변경 없이 목록상자를 엽니다.
Up Arrow
  • 우선 목록상자가 노출되어 있지 않다면 목록상자를 열고 마지막 옵션 항목으로 시각적 초점을 이동시킵니다.
  • DOM 초점은 텍스트상자에 유지합니다.
Enter 목록상자가 노출되어 있다면 닫습니다.
표준 단일 라인 텍스트 편집 키
  • 키는 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 시각적 초점을 텍스트상자로 이동시키고 편집 커서를 필드 마지막 부분에 위치시킵니다.
력 가능한 문자
  • 시각적 초점을 텍스트상자로 이동시킵니다.
  • 텍스트상자에 문자를 입력합니다.
  • 목록상자의 옵션 항목은 텍스트상자의 문자를 기반으로 필터링 되지 않습니다.

버튼

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

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에 의해 참조 될 때만 발생합니다.

버튼

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

Javascript와 CSS 소스 코드

HTML Source Code