ARIA 접근성 가이드

역할 · 위젯

role="radio"

묶음(radiogroup) 안에서 하나만 선택되는 라디오 버튼입니다.

기초HTML 요소 우선

한눈에 보기

분류
위젯
대응 HTML
<input type="radio"> (같은 name으로 묶음)
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

radio는 여러 선택지 중 하나만 고르는 항목입니다. 하나를 선택하면 같은 묶음의 다른 항목은 자동으로 해제됩니다. 상태는 필수 속성 aria-checked(true/false)로 알리며, 묶음은 radiogroup으로 감쌉니다. WAI-ARIA 1.2 표에는 필수 상위 역할이 없지만, 화면낭독기가 “3개 중 1번째”처럼 위치를 알리고 그룹 이름을 읽으려면 radiogroup으로 묶어야 합니다.

HTML <input type="radio">는 같은 name끼리 자동으로 묶이고, 방향키 이동과 선택, 그룹 하나당 탭 정지 하나를 브라우저가 처리합니다. <fieldset>과 <legend>로 질문을 붙이면 됩니다.

탭 순서와 방향키

라디오 묶음은 탭 순서에서 한 번만 멈춥니다. Tab으로 들어오면 선택된 항목(없으면 첫 항목)에 포커스가 가고, 방향키로 이동하면 포커스와 함께 선택도 바뀝니다. 직접 만들 때는 로빙 tabindex(선택된 항목만 tabindex="0")로 구현합니다.

툴바 안의 라디오는 다릅니다

APG는 toolbar 안에 들어간 라디오 묶음은 툴바의 방향키 이동과 충돌하지 않도록, 방향키는 포커스만 옮기고 Space로 선택하도록 안내합니다.

테스터 관점

  • Tab 한 번으로 묶음에 들어가고 한 번 더 누르면 묶음을 벗어나는지 확인합니다.
  • 방향키로 이동할 때 선택이 따라 바뀌고, 처음·끝에서 순환하는지 확인합니다.
  • 그룹 이름(질문)과 “n개 중 m번째”가 읽히는지 확인합니다.

함께 쓰는 속성

필수 속성

aria-checked

지원 속성

aria-disabledaria-posinsetaria-setsize

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

키보드 동작

키보드 동작
키동작
Tab묶음 안으로 들어오면 선택된 라디오로, 선택된 것이 없으면 첫 라디오로 포커스를 옮깁니다. 한 번 더 누르면 묶음 밖으로 나갑니다.
Shift + Tab묶음 밖의 이전 요소로 이동합니다.
Space포커스된 라디오가 선택되어 있지 않으면 선택합니다.
→다음 라디오로 이동해 선택합니다. 마지막이면 첫 라디오로 순환합니다.
↓→와 같습니다.
←이전 라디오로 이동해 선택합니다. 첫 라디오면 마지막으로 순환합니다.
↑←와 같습니다.

사용 예

네이티브 라디오 묶음

권장권장
<fieldset>
  <legend>배송 방법</legend>
  <label><input type="radio" name="ship" value="normal" checked> 일반 배송</label>
  <label><input type="radio" name="ship" value="fast"> 빠른 배송</label>
</fieldset>

ARIA 라디오 묶음 (로빙 tabindex)

HTML
<div role="radiogroup" aria-labelledby="ship-q">
  <p id="ship-q">배송 방법</p>
  <div role="radio" aria-checked="true" tabindex="0">일반 배송</div>
  <div role="radio" aria-checked="false" tabindex="-1">빠른 배송</div>
</div>

선택 옮기기

JavaScript
function check(radio, radios) {
  radios.forEach(function (r) {
    var on = r === radio;
    r.setAttribute('aria-checked', String(on));
    r.tabIndex = on ? 0 : -1;
  });
  radio.focus();
}

모든 라디오를 탭 순서에 넣는 실수

비권장비권장
<div role="radio" aria-checked="true" tabindex="0">일반 배송</div>
<div role="radio" aria-checked="false" tabindex="0">빠른 배송</div>
<!-- 묶음은 탭 정지 하나여야 합니다. 나머지는 tabindex="-1" -->

직접 해 보기

Tab으로 묶음에 들어가 방향키로 이동해 보세요. 포커스와 선택이 함께 옮겨지고, 선택된 항목만 tabindex="0"이 됩니다.

음료 크기

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
묶음으로 처음 이동음료 크기, 그룹, 작은 컵, 라디오 버튼, 체크 안 됨, 1/3
↓로 다음 항목중간 컵, 라디오 버튼, 체크됨, 2/3

사용 지침

이렇게 쓰세요

  • 가능하면 <input type="radio">와 <fieldset>/<legend>를 씁니다.
  • 직접 만들면 radiogroup으로 묶고 그룹 이름을 붙입니다.
  • 묶음 안에서 선택된 항목(없으면 첫 항목)만 tabindex="0"으로 둡니다.

이렇게 쓰지 마세요

  • 선택지가 하나뿐인 켜기/끄기에 라디오를 쓰지 않습니다. 체크박스나 스위치를 씁니다.
  • 방향키 이동 시 선택을 바꾸지 않아 네이티브와 다르게 동작하게 만들지 않습니다(툴바 안 예외 제외).
  • 선택만 바뀌어도 페이지를 이동시키는 등 예상치 못한 맥락 변화를 일으키지 않습니다(WCAG 3.2.2).
radiogroupcheckboxmenuitemradiooption

이 역할을 쓰는 패턴

라디오 그룹폼 오류 검증

참고 자료