ARIA 접근성 가이드

역할 · 위젯

role="option"

목록 상자(listbox) 안의 선택할 수 있는 항목입니다. 선택 상태는 aria-selected로 알립니다.

중급HTML 요소 우선

한눈에 보기

분류
위젯
대응 HTML
<select> · <datalist> 안의 <option>
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
listbox group
필수 하위 요소
없음

설명

option은 listbox(또는 그 안의 group)에 들어가는 선택지입니다. 콤보박스의 팝업 목록, 단독 목록 상자, 여러 개를 고르는 목록 모두 같은 역할을 씁니다. WAI-ARIA 1.2에서 aria-selected는 필수 속성이며 기본값은 false입니다.

  • 단일 선택 — 선택된 옵션 하나만 aria-selected="true"입니다. “포커스가 곧 선택”(selection follows focus)으로 만들 수 있습니다.
  • 다중 선택 — 목록 상자에 aria-multiselectable="true"를 붙이고, 선택 가능한 모든 옵션에 true/false를 명시합니다. 포커스와 선택은 분리됩니다.
  • 체크 표시형 — 선택과 별개로 체크 상태가 필요하면 aria-checked를 씁니다. 한 목록에서 aria-selected와 aria-checked를 섞어 같은 의미로 쓰지 않습니다.

옵션은 Children Presentational이 True입니다. 옵션 안에 넣은 버튼·링크·제목 같은 의미는 사라지므로, “항목 + 삭제 버튼”처럼 내부에 조작 요소가 필요하면 목록 상자 대신 grid나 일반 목록을 씁니다.

가능하면 select를 먼저

HTML <select>와 <option>은 모바일에서 운영체제 기본 선택 UI가 뜨고, 키보드·화면낭독기 지원도 가장 안정적입니다. 디자인 요구 때문에 목록 상자를 직접 만들 때만 role="option"을 씁니다.

테스터 관점

  • 옵션으로 이동할 때 “선택됨/선택 안 됨”과 위치(3/5)가 읽히는지 확인합니다.
  • 다중 선택 목록에서 Space로 선택을 바꿀 수 있는지, 선택 상태가 색만이 아니라 체크 아이콘 등으로도 보이는지 확인합니다.
  • 필터링으로 일부만 보일 때 aria-setsize/aria-posinset가 실제 개수와 맞는지 확인합니다.

함께 쓰는 속성

필수 속성

aria-selected

지원 속성

aria-checkedaria-disabledaria-posinsetaria-setsize

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

키보드 동작

키보드 동작
키동작
↓다음 옵션으로 포커스를 옮깁니다. 단일 선택 목록에서는 선택도 함께 옮길 수 있습니다.
↑이전 옵션으로 포커스를 옮깁니다.
Home(선택 사항) 첫 옵션으로 이동합니다.
End(선택 사항) 마지막 옵션으로 이동합니다.
글자 키(권장) 입력한 글자로 시작하는 다음 옵션으로 이동합니다(type-ahead).
Space(다중 선택) 포커스된 옵션의 선택을 바꿉니다.
Shift + ↓(다중 선택, 선택 사항) 다음 옵션으로 이동하며 선택을 바꿉니다.
Shift + ↑(다중 선택, 선택 사항) 이전 옵션으로 이동하며 선택을 바꿉니다.
Ctrl + A(다중 선택, 선택 사항) 모든 옵션을 선택합니다. 이미 모두 선택되어 있으면 모두 해제할 수 있습니다.

사용 예

네이티브 선택 목록

권장권장
<label for="city">지역</label>
<select id="city">
  <option>서울</option>
  <option selected>부산</option>
</select>

단일 선택 목록 상자

HTML
<p id="ship-label">배송 방법</p>
<ul role="listbox" tabindex="0" aria-labelledby="ship-label" aria-activedescendant="ship-2">
  <li role="option" id="ship-1" aria-selected="false">일반 배송</li>
  <li role="option" id="ship-2" aria-selected="true">빠른 배송</li>
  <li role="option" id="ship-3" aria-selected="false" aria-disabled="true">새벽 배송 (지역 불가)</li>
</ul>

다중 선택에서 선택 바꾸기

JavaScript
function toggleOption(opt) {
  var on = opt.getAttribute('aria-selected') === 'true';
  opt.setAttribute('aria-selected', String(!on));
}

옵션 안에 버튼 넣기

비권장비권장
<li role="option" aria-selected="false">
  사과 <button type="button">삭제</button>   <!-- 표현용으로 바뀌어 조작할 수 없습니다 -->
</li>

직접 해 보기

여러 개를 고를 수 있는 목록 상자입니다(로빙 tabindex 방식). ↑ ↓로 이동하고 Space로 선택을 바꾸세요. Shift+↑/↓는 이동하며 선택, Ctrl+A는 전체 선택·해제입니다.

관심 분야 (여러 개 선택)

  • 디자인
  • 개발
  • 기획
  • 마케팅
  • 접근성

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
목록 상자 안 옵션에 포커스관심 분야, 다중 선택 목록, 디자인, 선택 안 됨, 1/5
Space로 선택선택됨
비활성 옵션으로 이동새벽 배송 (지역 불가), 사용할 수 없음, 3/3

사용 지침

이렇게 쓰세요

  • listbox 안에 직접 넣거나, 묶음이 필요하면 group으로 묶은 뒤 넣습니다.
  • 다중 선택 목록에서는 선택 가능한 모든 옵션에 aria-selected를 명시합니다.
  • 선택 상태를 색과 함께 아이콘·굵기 등 다른 시각 단서로도 보여 줍니다.

이렇게 쓰지 마세요

  • 옵션 안에 버튼·링크·입력란을 넣지 않습니다.
  • 같은 목록에서 aria-selected와 aria-checked를 같은 뜻으로 섞어 쓰지 않습니다.
  • <ul>에 role="listbox"를 줄 때 중간에 다른 요소를 끼워 옵션과의 소유 관계를 끊지 않습니다.
listboxcomboboxgrouptreeitem

이 역할을 쓰는 패턴

리스트박스콤보박스(자동완성)

참고 자료