ARIA 접근성 가이드

상태 · 위젯 상태

aria-selected

탭·목록 상자 옵션·그리드 셀처럼 고를 수 있는 항목이 현재 선택되었는지 알립니다.

기초

한눈에 보기

구분
상태 (State)
분류
위젯 상태
값 형식
true / false / undefined
기본값
undefined
적용 범위
특정 역할에만 사용
HTML 대체
<option>의 selected 상태

설명

aria-selected는 선택을 지원하는 복합 위젯 안의 항목이 선택되었는지 나타냅니다. tab, option, gridcell, row와 이를 상속하는 treeitem, columnheader, rowheader에 씁니다. 화면낭독기는 “선택됨” 또는 “선택 안 됨”으로 읽습니다.

탭 패턴에서는 현재 보이는 탭 패널에 연결된 탭이 aria-selected="true", 나머지 탭은 "false"입니다. 목록 상자(listbox)에서는 사용자가 고른 옵션에, 그리드에서는 선택한 셀이나 행에 씁니다. 여러 항목을 동시에 선택할 수 있다면 컨테이너에 aria-multiselectable을 함께 씁니다.

aria-checked·aria-current·aria-pressed와 구분해야 합니다. “선택”은 위젯 안에서 어떤 항목을 고른 상태이고, 체크는 선택지를 켜고 끄는 것, 현재(current)는 내비게이션의 현재 위치, 눌림(pressed)은 토글 버튼 상태입니다. 일반 링크 내비게이션에 aria-selected를 쓰는 것은 대표적인 오용입니다. link 역할은 이 속성을 지원하지 않습니다.

단일 선택 위젯에서는 보통 선택이 포커스를 따라갑니다(방향키로 이동하면 선택도 바뀜). 탭은 APG의 “자동 활성화” 방식이 이에 해당하며, 패널 내용을 불러오는 데 시간이 걸리면 Enter·Space로 선택하는 “수동 활성화”를 씁니다. 어느 쪽이든 한 번에 하나의 탭만 true여야 하고, 선택된 탭이 Tab 순서에 들어가야(tabindex="0") 합니다.

테스트할 때는 방향키로 항목을 이동할 때 선택 상태가 정확히 읽히는지, 값이 시각적 선택 표시와 일치하는지, 선택된 항목이 하나뿐인지(단일 선택), 선택할 수 없는 항목에 불필요한 false가 붙어 있지 않은지 확인합니다.

값

값
값의미
true선택되었습니다.
false선택할 수 있지만 선택되지 않았습니다.
undefined 기본값선택할 수 있는 항목이 아닙니다.

사용 예

탭

권장HTML
<div role="tablist" aria-label="상품 정보">
  <button type="button" role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">상세 설명</button>
  <button type="button" role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1">리뷰</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">…</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>…</div>

탭 선택 바꾸기

JavaScript
function select(tab) {
  tabs.forEach(function (t) {
    var on = t === tab;
    t.setAttribute('aria-selected', String(on));
    t.tabIndex = on ? 0 : -1;
    document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
  });
  tab.focus();
}

목록 상자 옵션

HTML
<ul role="listbox" aria-label="정렬 기준" tabindex="0" aria-activedescendant="sort-2">
  <li role="option" id="sort-1" aria-selected="false">추천순</li>
  <li role="option" id="sort-2" aria-selected="true">최신순</li>
</ul>

내비게이션 링크에 사용 (비권장)

비권장HTML
<nav aria-label="주 메뉴">
  <a href="/" aria-selected="true">홈</a>
  <a href="/about">소개</a>
</nav>

링크는 aria-selected를 지원하지 않습니다. 현재 페이지는 aria-current="page"로 표시합니다.

직접 해 보기

탭 목록에 Tab으로 들어간 뒤 왼쪽·오른쪽 방향키, Home·End로 이동해 보세요. 이동하면 선택과 패널이 함께 바뀝니다(자동 활성화).

가볍고 통기성이 좋은 러닝화입니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
선택된 탭에 포커스상품 정보, 탭 목록, 상세 설명, 탭, 선택됨, 1/3
오른쪽 방향키로 다음 탭 이동 (자동 활성화)리뷰, 탭, 선택됨, 2/3
목록 상자에서 선택되지 않은 옵션으로 이동 (다중 선택)추천순, 선택 안 됨, 1/2

사용 지침

이렇게 쓰세요

  • 탭, 목록 상자 옵션, 그리드 셀·행처럼 선택을 지원하는 항목에 씁니다.
  • 단일 선택 위젯에서는 한 번에 한 항목만 true로 둡니다.
  • 선택된 탭은 tabindex="0", 나머지는 -1로 관리합니다.
  • 다중 선택이면 컨테이너에 aria-multiselectable을 함께 씁니다.

이렇게 쓰지 마세요

  • 내비게이션 링크에 쓰지 않습니다. 현재 페이지는 aria-current입니다.
  • 체크 상자·라디오 버튼의 상태에 쓰지 않습니다. 이 경우 aria-checked입니다.
  • 선택이 불가능한 항목에 false를 붙여 선택 가능한 것처럼 보이게 하지 않습니다.

사용할 수 있는 역할

taboptiongridcellrowtreeitemcolumnheaderrowheader
aria-multiselectablearia-checkedaria-currentaria-controlsaria-activedescendant

이 속성을 쓰는 패턴

탭리스트박스콤보박스(자동완성)정렬 가능한 표

참고 자료