ARIA 접근성 가이드

역할 · 복합 위젯

role="radiogroup"

라디오 버튼(radio)을 하나로 묶어, 그중 하나만 선택되게 하는 그룹입니다.

기초HTML 요소 우선

한눈에 보기

분류
복합 위젯
대응 HTML
같은 name의 <input type="radio">를 감싼 <fieldset> (역할은 group)
이름 정하는 방법
작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
radio

설명

radiogroup은 radio를 담는 묶음으로, 필수 하위 요소는 radio입니다. 이름이 필수이며 보통 질문 텍스트를 aria-labelledby로 가리킵니다. 화면낭독기는 묶음에 들어갈 때 그룹 이름을 읽고, 각 라디오의 위치(“3개 중 1번째”)를 알려 줍니다.

그룹 수준 상태도 여기에 붙입니다.

HTML에서는 <fieldset>+<legend>가 같은 역할을 합니다. 엄밀히 fieldset의 역할은 group이지만, 같은 name의 라디오가 브라우저 수준에서 묶여 키보드·위치 정보가 모두 처리되므로 따로 radiogroup을 붙일 필요가 없습니다.

로빙 tabindex 또는 aria-activedescendant

APG에는 두 가지 구현 예제가 있습니다. 라디오에 직접 포커스를 옮기는 로빙 tabindex 방식(선택된 라디오만 tabindex="0")과, 그룹에 포커스를 두고 aria-activedescendant로 현재 라디오를 가리키는 방식입니다. 대부분의 경우 로빙 tabindex가 더 단순합니다.

테스터 관점

  • 그룹 이름(질문)이 읽히는지, 필수 여부가 전달되는지 확인합니다.
  • Tab 한 번으로 그룹에 들어가고 나오는지, 방향키가 선택을 옮기는지 확인합니다.

함께 쓰는 속성

지원 속성

aria-activedescendantaria-disabledaria-errormessagearia-invalidaria-orientationaria-readonlyaria-required

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

키보드 동작

키보드 동작
키동작
Tab그룹으로 들어오면 선택된 라디오로(없으면 첫 라디오로) 포커스가 갑니다. 다시 누르면 그룹 밖으로 나갑니다.
Space포커스된 라디오가 선택되어 있지 않으면 선택합니다.
→다음 라디오로 이동해 선택합니다(끝에서 처음으로 순환). ↓도 같습니다.
←이전 라디오로 이동해 선택합니다(처음에서 끝으로 순환). ↑도 같습니다.

사용 예

네이티브 그룹

권장권장
<fieldset>
  <legend>결제 수단 <span aria-hidden="true">*</span></legend>
  <label><input type="radio" name="pay" required> 카드</label>
  <label><input type="radio" name="pay"> 계좌 이체</label>
</fieldset>

ARIA 라디오 그룹 (필수·오류)

HTML
<div role="radiogroup" aria-labelledby="pay-q" aria-required="true"
     aria-invalid="true" aria-errormessage="pay-err">
  <p id="pay-q">결제 수단</p>
  <div role="radio" aria-checked="false" tabindex="0">카드</div>
  <div role="radio" aria-checked="false" tabindex="-1">계좌 이체</div>
</div>
<p id="pay-err">결제 수단을 선택하세요.</p>

이름 없는 그룹

비권장비권장
<p>결제 수단</p>
<div role="radiogroup">   <!-- 질문과 연결되지 않아 “그룹”으로만 읽힙니다 -->
  ...
</div>

직접 해 보기

Tab으로 그룹에 들어가 방향키로 선택을 옮겨 보세요. 아무것도 고르지 않고 “다음”을 누르면 그룹에 aria-invalid="true"와 오류 메시지가 연결됩니다.

결제 수단 (필수)

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
그룹으로 이동결제 수단 (필수), 라디오 그룹, 필수, 신용·체크카드, 라디오 버튼, 체크 안 됨, 1/3
오류 상태에서 그룹으로 이동결제 수단 (필수), 라디오 그룹, 유효하지 않은 항목, 결제 수단을 선택하세요.

사용 지침

이렇게 쓰세요

  • 그룹에 이름을 붙입니다(질문 텍스트를 aria-labelledby로).
  • 필수·오류 상태는 개별 라디오가 아니라 그룹에 붙입니다.
  • 가능하면 <fieldset>+<legend>와 네이티브 라디오를 씁니다.

이렇게 쓰지 마세요

  • 라디오가 아닌 요소(버튼, 링크)를 넣지 않습니다.
  • 그룹 안 모든 라디오를 탭 순서에 넣지 않습니다.
radiogroupmenuitemradio

이 역할을 쓰는 패턴

라디오 그룹폼 오류 검증

참고 자료