aria-checked

설명

aria-checked는 체크할 수 있는 위젯의 현재 체크 상태를 나타냅니다. checkbox, radio, switch, menuitemcheckbox, menuitemradio, option, treeitem에 쓰며, 특히 checkbox, radio, switch, menuitemcheckbox, menuitemradio 역할에는 필수입니다. 화면낭독기는 이 값을 읽어 “선택됨”, “선택 안 됨”, “부분 선택됨” 등으로 알려 줍니다.

HTML <input type="checkbox">와 <input type="radio">는 체크 상태가 자동으로 전달되므로 aria-checked를 붙이지 않습니다. 오히려 네이티브 요소에 붙이면 실제 checked 상태와 어긋날 위험만 생깁니다. 디자인 때문에 <div>·<span>으로 체크 상자를 직접 만들어야 하는 경우에만 role, tabindex="0", Space 키 처리와 함께 씁니다.

mixed는 “일부만 체크됨”입니다. 하위 항목 중 일부만 체크된 “전체 선택” 체크 상자가 대표적이며, HTML에서는 스크립트로 input.indeterminate = true를 설정하면 같은 의미가 됩니다. 명세상 mixed는 radio, menuitemradio, switch에서 지원되지 않으며 브라우저는 이를 false로 처리해야 합니다.

aria-selected, aria-pressed와 혼동하기 쉽습니다. 체크는 “켜고 끄는 선택지”, 선택(selected)은 목록·탭에서 “고른 항목”, 눌림(pressed)은 “토글 버튼”입니다. 값은 반드시 화면의 체크 표시와 함께 바꿔야 하며, 클릭과 Space 키 모두에서 상태가 바뀌어야 합니다.

테스트할 때는 Tab으로 포커스가 가는지, Space로 상태가 바뀌는지, 바뀐 상태가 즉시 읽히는지, 체크 표시 아이콘이 화면낭독기에 따로 읽히지 않는지(aria-hidden) 확인합니다.

값

사용 예

<label><input type="checkbox" name="agree"> 마케팅 정보 수신에 동의합니다</label>

<div role="checkbox" aria-checked="false" tabindex="0">
  <span class="box" aria-hidden="true"></span> 마케팅 정보 수신에 동의합니다
</div>

function toggle(box) {
  var checked = box.getAttribute('aria-checked') === 'true';
  box.setAttribute('aria-checked', String(!checked));
}
box.addEventListener('click', function () { toggle(box); });
box.addEventListener('keydown', function (e) {
  if (e.key === ' ') { e.preventDefault(); toggle(box); }   // 스크롤 방지
});

<input type="checkbox" aria-checked="true">

직접 해 보기

“전체 선택”과 각 토핑을 클릭하거나 Tab으로 이동한 뒤 Space를 눌러 보세요. 일부만 체크하면 “전체 선택”이 mixed가 됩니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-checked (새 창)
• APG: Checkbox 패턴 (새 창)
• APG 예제: Mixed-State Checkbox (새 창)
• MDN: aria-checked (새 창)