무엇을 묻는 선택인지

KRDS CP-288 — 그룹 레이블과 라디오 그룹 간의 관계를 스크린리더가 확인할 수 있게 제공하고 있다.

0. 들어가며 — 옵션은 알지만 질문은 모를 때

이번 408편은 그룹 레이블과 라디오 그룹 간의 관계를 스크린리더가 확인할 수 있게 제공하라는 규칙입니다.

각 옵션에 이름이 있어도(CP-287) — 그 라디오 그룹 전체가 무엇을 묻는지(예: ‘성별’, ‘배송 방법’)를 스크린 리더가 모르면, 사용자는 ‘남성/여성’이라는 옵션은 듣지만 ’무엇에 대한 남성/여성인지’ 맥락을 잃죠. CP-288은 그룹 레이블(질문)과 라디오 그룹의 관계를 프로그래밍적으로 연결하라고 규정합니다. 라디오 버튼 그룹의 마지막 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 그룹 레이블 관계 SR 확인

CP-288 (컴포넌트 > 라디오 버튼) “그룹 레이블과 라디오 그룹 간의 관계를 스크린리더가 확인할 수 있게 제공하고 있다.”

라디오 그룹 전체의 레이블(질문)과 그 그룹의 관계를, 스크린 리더가 프로그래밍적으로 확인할 수 있게 연결하라는 뜻입니다.

정리: 그룹 질문과 라디오 그룹을 스크린 리더가 알 수 있게 연결하라. 이게 CP-288입니다.

2. 왜 그룹 레이블 관계가 필요한가

라디오 버튼은 — 거의 항상 여러 옵션이 하나의 질문에 대한 답입니다. ’남성/여성’은 ’성별’이라는 질문의 답이고, ’일반/빠른’은 ’배송 방법’의 답이죠. 각 옵션의 이름(CP-287)만 있고 그룹 전체의 질문이 없으면 — 맥락이 끊깁니다.

그룹 레이블이 연결 안 됐을 때:

질문 맥락 상실 스크린 리더 사용자가 라디오 그룹에 도달하면 옵션(‘남성, 라디오 버튼’)은 듣지만, 화면에 보이는 ‘성별’이라는 제목이 그룹과 연결 안 돼 있으면 무엇을 묻는지 모릅니다. ’이 남성/여성이 무슨 맥락이지?’ 하고 혼란스럽죠. 특히 한 페이지에 여러 라디오 그룹이 있으면(성별·연령대·지역) 더 헷갈립니다.

시각 사용자와의 격차 — 보는 사용자는 ‘성별’ 제목 아래 옵션들을 보고 맥락을 즉시 알지만, 스크린 리더 사용자는 그 시각적 그룹핑을 못 보니 — 프로그래밍적 연결이 없으면 맥락을 못 얻죠.

그래서 CP-288은 — 그룹 레이블(질문)과 라디오 그룹의 관계를 스크린 리더가 확인할 수 있게 연결하라고 합니다.

구현 방법:

① <fieldset> + <legend> (권장) — 관련 라디오 버튼들을 <fieldset>으로 묶고, 그룹 질문을 <legend>에 넣습니다.

<fieldset> <legend>성별</legend> <label><input type="radio" name="sex" value="m"> 남성</label> <label><input type="radio" name="sex" value="f"> 여성</label> </fieldset>

스크린 리더는 — 각 옵션을 읽을 때 <legend> 내용(‘성별’)을 함께 안내하죠(‘성별, 남성, 라디오 버튼, 2개 중 1번째’). 이것이 가장 표준적이고 견고한 방법입니다.

② role="radiogroup" + aria-labelledby/aria-label — 커스텀 구조면, 그룹 컨테이너에 role="radiogroup"을 주고 aria-labelledby로 질문 텍스트를 가리키거나 aria-label로 직접 질문을 부여합니다.

같은 name 속성. 표준 구현에서 — 같은 그룹의 라디오 버튼들은 같은 name 속성을 공유하죠(name="sex"). 이게 ‘하나만 선택’ 동작과 그룹핑의 기반입니다. <fieldset>/<legend>는 여기에 접근성 레이블을 더하는 것이고요.

287과 288의 합:

CP-287 — 개별 옵션 이름(‘남성’, ‘여성’).

CP-288 — 그룹 전체 질문(‘성별’)과의 연결.

둘이 합쳐져 — 스크린 리더가 ’성별(288) — 남성(287), 라디오 버튼, 2개 중 1번째’처럼 질문 + 옵션 + 상태를 완전히 안내하죠. 키보드 도달(286)·옵션 이름(287)·그룹 질문(288)이 모여 라디오 버튼의 접근성이 완성됩니다.

이 규칙은 라디오 버튼의 ’맥락 제공’을 담당합니다 — 옵션 이름(287)을 넘어, 그 선택이 무엇에 대한 것인지(288)를 스크린 리더 사용자에게 전해, 시각 사용자와 같은 맥락을 주죠. <fieldset>/<legend>라는 표준 HTML이면 대부분 자동 충족됩니다.

정리하면 — 옵션 이름만 있고 그룹 질문이 연결 안 되면 스크린 리더 사용자가 선택의 맥락을 잃으므로, <fieldset>/ <legend>(또는 role=“radiogroup”+aria-labelledby)로 그룹 레이블과 라디오 그룹의 관계를 프로그래밍적으로 연결 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

그룹 레이블 연결 — 그룹 질문이 <fieldset>/<legend> 또는 radiogroup+aria-labelledby로 연결됐는가.

SR 안내 — 스크린 리더가 옵션 읽을 때 그룹 질문을 함께 안내하는가.

다중 그룹 구별 — 한 페이지의 여러 라디오 그룹이 각자 질문으로 구별되는가.

개선 방향

관련 라디오 버튼을 <fieldset>으로 묶고 질문을 <legend>에. 커스텀이면 radiogroup+aria-labelledby.

스크린 리더로 그룹 질문이 읽히는지 실제 테스트.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	fieldset/legend·radiogroup 구현
QA/접근성	스크린 리더 그룹 안내 검증

기관 유형	CP-288 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 그룹 질문이 <fieldset>/<legend> 또는 radiogroup+aria-labelledby로 연결됐나요?

□ 스크린 리더가 옵션 읽을 때 그룹 질문을 함께 안내하나요?

□ 한 페이지의 여러 라디오 그룹이 각자 질문으로 구별되나요?

❓ FAQ

Q1. 옵션 레이블(CP-287)만 있으면 안 되나요? 옵션 이름은 알아도 ‘무엇에 대한 선택인지’ 맥락이 없습니다. 그룹 질문 연결이 별도로 필요하죠. Q2. 가장 쉬운 방법은? <fieldset>으로 묶고 질문을 <legend>에 넣으면 됩니다. 표준 HTML이라 스크린 리더가 자동 안내하죠. Q3. 같은 name만 주면 그룹이 되지 않나요? 같은 name은 ‘하나만 선택’ 동작을 만들지만, 접근성 그룹 레이블은 별도(fieldset/legend)로 줘야 합니다.

6. 마무리

CP-288의 메시지:

무엇을 묻는 선택인지 — 그룹 레이블과 라디오 그룹의 관계를 스크린 리더가 알게 하라.

옵션 이름(287)만 있고 그룹 질문이 연결 안 되면 스크린 리더 사용자가 선택 맥락을 잃습니다. <fieldset>/<legend> 로 그룹 질문을 연결하면 ‘성별 — 남성’ 식으로 맥락이 전해지죠. 이로써 라디오 버튼 11개 규칙이 마무리됩니다. 다음 편부터는 체크박스 그룹입니다.

다음 편 예고 ▶ 「409. (CP-289) 체크박스 — 다중 선택이 필요한 항목에 사용하고 있다.」

ViewCheck는 라디오 그룹의 그룹 레이블이 스크린 리더에 연결됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.html

WAI-ARIA APG — Radio Group Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/radio/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준