여러 옵션 중 하나를 선택하는 라디오 버튼 그룹
관련 WCAG 기준 — 클릭하여 상세 보기
컨테이너에 radiogroup 역할
모든 라디오 버튼을 감싸는 요소에 role="radiogroup"이 있어야 합니다.
각 옵션에 radio 역할
각 라디오 버튼에 role="radio" 또는 네이티브 <input type="radio">를 사용해야 합니다.
aria-checked로 선택 상태
선택된 라디오는 aria-checked="true", 나머지는 aria-checked="false"여야 합니다.
그룹 레이블
radiogroup에 aria-labelledby 또는 aria-label로 그룹 목적을 명시해야 합니다.
화살표 키로 이동 및 선택
오른쪽/아래 화살표로 다음 옵션 선택, 왼쪽/위 화살표로 이전 옵션 선택이 가능해야 합니다.
roving tabindex 사용
선택된 라디오만 tabindex="0", 나머지는 tabindex="-1"이어야 합니다.
경계에서 포커스 순환
마지막 옵션에서 아래 화살표를 누르면 첫 번째로 순환해야 합니다.
Tab으로 각 옵션 이동 금지
각 라디오를 Tab 정류장으로 만들지 마세요. 그룹 전체를 하나의 Tab 정류장으로 처리하세요.
그룹 레이블 누락 금지
그룹 레이블 없이 라디오 버튼만 나열하면 사용자가 그룹 목적을 알 수 없습니다.
RadioGroup과 FormLabel 연결
RadioGroup을 FormControl로 감싸고 FormLabel로 그룹 레이블을 제공하세요.