ARIA 접근성 가이드

역할 · 위젯

role="menuitemcheckbox"

메뉴 안에서 체크박스처럼 켜고 끌 수 있는 항목입니다. 상태는 aria-checked로 알립니다.

중급

한눈에 보기

분류
위젯
대응 HTML
없음
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
menu menubar group
필수 하위 요소
없음

설명

menuitemcheckbox는 menuitem의 하위 역할로, 메뉴 안에서 “눈금자 표시”, “자동 줄 바꿈”처럼 독립적으로 켜고 끄는 설정을 나타냅니다. 필수 속성 aria-checked는 true 또는 false입니다. 명세상 mixed도 쓸 수 있지만, 메뉴 항목에서 혼합 상태를 쓰는 경우는 드뭅니다.

상태를 바꾼 뒤 메뉴를 닫을지는 선택할 수 있습니다. APG는 Space를 누르면 메뉴를 연 채로 상태만 바꾸고, Enter는 상태를 바꾸고 메뉴를 닫는 방식을 제시합니다. 여러 설정을 연달아 바꾸기 편해집니다.

체크 표시는 장식입니다

화면의 ✓ 아이콘은 aria-checked와 함께 바꾸는 시각 표현일 뿐입니다. 아이콘에 텍스트가 있다면 aria-hidden="true"로 숨겨 이름에 섞이지 않게 합니다. 이 역할은 Children Presentational이 True라서 내부 의미는 모두 사라지고 텍스트만 이름이 됩니다.

테스터 관점

  • 항목에 포커스했을 때 현재 상태(체크됨/체크 안 됨)가 읽히는지, 바꾸면 새 상태가 바로 알려지는지 확인합니다.
  • 체크 아이콘 상태와 aria-checked 값이 일치하는지 확인합니다.

함께 쓰는 속성

필수 속성

aria-checked

지원 속성

aria-disabledaria-expandedaria-haspopuparia-posinsetaria-setsize

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

키보드 동작

키보드 동작
키동작
Space(권장) 메뉴를 닫지 않고 상태만 바꿉니다.
Enter상태를 바꾸고 메뉴를 닫습니다.
↓다음 메뉴 항목으로 이동합니다.
↑이전 메뉴 항목으로 이동합니다.
Home첫 메뉴 항목으로 이동합니다.
End마지막 메뉴 항목으로 이동합니다.
Esc메뉴를 닫고 메뉴를 연 요소로 포커스를 돌려보냅니다.

사용 예

보기 메뉴의 체크 항목

HTML
<ul role="menu" aria-label="보기">
  <li role="menuitemcheckbox" aria-checked="true" tabindex="-1">눈금자 표시</li>
  <li role="menuitemcheckbox" aria-checked="false" tabindex="-1">격자 표시</li>
</ul>

상태 바꾸기

JavaScript
function toggle(item) {
  var on = item.getAttribute('aria-checked') === 'true';
  item.setAttribute('aria-checked', String(!on));
  applySetting(item.dataset.setting, !on);
}

체크 상태를 이름에 넣는 실수

비권장비권장
<li role="menuitem">✓ 눈금자 표시</li>
<!-- “체크 표시 눈금자 표시, 메뉴 항목” → 상태가 아니라 이름의 일부로 읽힙니다 -->

직접 해 보기

“보기” 버튼을 누르거나 포커스를 두고 Enter·Space·↓를 누르면 메뉴가 열립니다. 메뉴 안에서 ↑ ↓로 이동하고, Space는 메뉴를 연 채로 상태만 바꾸며, Enter는 상태를 바꾸고 메뉴를 닫습니다. Esc로 닫으면 포커스가 버튼으로 돌아갑니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
체크된 항목으로 이동눈금자 표시, 메뉴 항목, 체크됨, 1/5
Space로 끔체크 안 됨

사용 지침

이렇게 쓰세요

  • aria-checked를 항상 명시하고, 화면 표시와 함께 바꿉니다.
  • 여러 설정을 이어서 바꿀 수 있게 Space는 메뉴를 닫지 않는 방식을 고려합니다.

이렇게 쓰지 마세요

  • 하나만 고를 수 있는 선택지에는 쓰지 않습니다. menuitemradio를 씁니다.
  • 메뉴 밖에서 쓰지 않습니다. 일반 폼에서는 checkbox를 씁니다.
menuitemmenuitemradiocheckboxmenu

이 역할을 쓰는 패턴

메뉴 버튼

참고 자료