ARIA 접근성 가이드

역할 · 위젯

role="menuitemradio"

메뉴 안에서 같은 그룹의 항목 중 하나만 선택되는 라디오형 항목입니다.

중급

한눈에 보기

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

설명

menuitemradio는 menuitemcheckbox의 하위 역할로, 메뉴 안에서 “글자 크기: 작게/보통/크게”처럼 여러 개 중 하나를 고르는 항목입니다. 선택된 항목은 aria-checked="true", 나머지는 "false"이며, 하나를 고르면 같은 그룹의 다른 항목은 자동으로 해제해야 합니다(스크립트로 처리).

한 메뉴에 라디오 묶음이 둘 이상이거나 다른 항목과 섞여 있으면, 각 묶음을 role="group"으로 감싸고 그룹 이름을 붙이거나 separator로 구분합니다. 그래야 “어떤 항목들끼리 하나만 선택되는지”가 보조기술에 전달됩니다.

테스터 관점

  • 항목을 고르면 이전 선택이 해제되는지(aria-checked가 하나만 true인지) 확인합니다.
  • 여러 라디오 묶음이 있으면 그룹 이름이 읽히는지 확인합니다.

함께 쓰는 속성

필수 속성

aria-checked

지원 속성

aria-disabledaria-expandedaria-haspopuparia-posinsetaria-setsize

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

키보드 동작

키보드 동작
키동작
Space(권장) 메뉴를 닫지 않고 이 항목을 선택하며, 같은 그룹의 다른 항목은 해제합니다.
Enter이 항목을 선택하고 메뉴를 닫습니다.
↓다음 메뉴 항목으로 이동합니다. 일반 라디오 버튼과 달리 이동만으로는 선택되지 않습니다.
↑이전 메뉴 항목으로 이동합니다.
Home첫 메뉴 항목으로 이동합니다.
End마지막 메뉴 항목으로 이동합니다.
Esc메뉴를 닫고 메뉴를 연 요소로 포커스를 돌려보냅니다.

사용 예

그룹으로 묶은 라디오 항목

HTML
<ul role="menu" aria-label="서식">
  <li role="menuitemcheckbox" aria-checked="false" tabindex="-1">굵게</li>
  <li role="separator"></li>
  <li role="none">
    <ul role="group" aria-label="정렬">
      <li role="menuitemradio" aria-checked="true" tabindex="-1">왼쪽</li>
      <li role="menuitemradio" aria-checked="false" tabindex="-1">가운데</li>
      <li role="menuitemradio" aria-checked="false" tabindex="-1">오른쪽</li>
    </ul>
  </li>
</ul>

선택 바꾸기

JavaScript
function check(item) {
  var group = item.closest('[role="group"]') || item.closest('[role="menu"]');
  group.querySelectorAll('[role="menuitemradio"]').forEach(function (r) {
    r.setAttribute('aria-checked', String(r === item));
  });
}

직접 해 보기

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

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
선택된 라디오 항목으로 이동보통, 메뉴 항목, 체크됨, 2/3
“크게”를 Space로 선택크게, 체크됨
그룹 안으로 처음 이동글자 크기, 그룹, 작게, 메뉴 항목, 체크 안 됨, 1/3

사용 지침

이렇게 쓰세요

  • 같은 묶음에서 항상 하나만 aria-checked="true"가 되게 관리합니다.
  • 라디오 묶음이 다른 항목과 섞이면 group으로 감싸고 이름을 붙입니다.

이렇게 쓰지 마세요

  • 독립적으로 켜고 끄는 설정에는 쓰지 않습니다. menuitemcheckbox를 씁니다.
  • 선택 상태를 텍스트(“● 보통”)로만 표시하지 않습니다.
menuitemcheckboxmenuitemradiomenugroup

이 역할을 쓰는 패턴

메뉴 버튼

참고 자료