role="combobox"

설명

combobox는 입력 요소 하나와, 값을 고르는 데 도움을 주는 팝업으로 이루어집니다. 검색어 자동완성, 주소 검색, 디자인을 바꾼 선택 상자가 대표적입니다. 팝업은 기본적으로 listbox이며, aria-haspopup으로 grid, tree, dialog도 지정할 수 있습니다(기본값 listbox).

WAI-ARIA 1.2 방식

• 포커스를 받는 입력 요소 자체가 role="combobox"입니다. 편집 가능한 콤보박스는 <input type="text" role="combobox">, 선택만 하는 콤보박스는 <div role="combobox" tabindex="0">입니다.
• aria-controls(필수)로 팝업의 id를 가리킵니다.
• aria-expanded(필수)로 팝업이 열렸는지 알립니다.
• 포커스는 입력란에 그대로 두고, 팝업 안 “현재 옵션”은 aria-activedescendant로 가리킵니다. 그 옵션에 aria-selected="true"를 주어 시각적 포커스와 맞춥니다.
• aria-autocomplete — list(목록으로 제안), inline(입력란 안에 나머지 글자를 채움), both, none.

이전 방식과의 차이

1.1의 컨테이너 방식은 보조기술 지원이 일관되지 않아 1.2에서 폐기되었습니다. 오래된 라이브러리 코드에서 role="combobox"가 <div> 래퍼에 붙어 있고 그 안에 <input>이 있다면 1.1 방식이므로 1.2 방식으로 고칩니다. aria-owns 대신 aria-controls를 씁니다.

테스터 관점

• 입력란에 포커스했을 때 “콤보 상자, 축소됨”처럼 역할과 펼침 상태가 읽히는지 확인합니다.
• ↓로 옵션을 이동할 때 포커스가 입력란에 남아 있으면서 옵션 이름이 읽히는지(aria-activedescendant가 바뀌는지) 확인합니다.
• Esc로 팝업이 닫히고, 선택 후 값이 입력란에 들어가는지 확인합니다.
• 결과 개수나 “결과 없음”이 라이브 리전 등으로 알려지는지 확인합니다.

함께 쓰는 속성

필수 속성

지원 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

사용 예

<label for="city">도시</label>
<input type="text" id="city" role="combobox"
       aria-autocomplete="list" aria-expanded="false" aria-controls="city-list">
<ul id="city-list" role="listbox" aria-label="도시" hidden>
  <li role="option" id="city-1">서울</li>
  <li role="option" id="city-2">세종</li>
</ul>

<span id="sort-label">정렬</span>
<div role="combobox" tabindex="0" aria-labelledby="sort-label"
     aria-haspopup="listbox" aria-expanded="false" aria-controls="sort-list">최신순</div>
<ul id="sort-list" role="listbox" aria-labelledby="sort-label" hidden>
  <li role="option" id="sort-1" aria-selected="true">최신순</li>
  <li role="option" id="sort-2" aria-selected="false">인기순</li>
</ul>

function open() {
  list.hidden = false;
  input.setAttribute('aria-expanded', 'true');
}
function move(opt) {
  options.forEach(function (o) { o.setAttribute('aria-selected', String(o === opt)); });
  input.setAttribute('aria-activedescendant', opt.id);   // 포커스는 input에 그대로
  opt.scrollIntoView({ block: 'nearest' });
}

<div role="combobox" aria-expanded="false" aria-owns="list">
  <input type="text" aria-controls="list">
</div>
<ul id="list" role="listbox">...</ul>

직접 해 보기

ARIA 1.2 방식의 편집 가능 콤보박스입니다(목록 자동완성, 수동 선택). 글자를 입력하면 목록이 걸러지고, ↓/↑로 옵션을 고른 뒤 Enter로 확정합니다. Alt+↓는 목록만 열고, Esc는 닫거나(닫혀 있으면) 입력을 지웁니다. 포커스가 입력란에 머무는 동안 aria-activedescendant가 바뀌는 모습을 실시간 코드에서 볼 수 있습니다.

화면낭독기에서는

사용 지침

관련 역할·패턴

이 역할을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: combobox 역할 (새 창)
• APG: Combobox 패턴 (새 창)
• APG: 목록 자동완성 콤보박스 예제 (새 창)
• APG: 선택 전용 콤보박스 예제 (새 창)