무엇을 묻는 선택인지

KRDS CP-297 — 스크린 리더에서 그룹 레이블과 체크박스 그룹의 관계를 확인할 수 있도록 하고 있다.

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

이번 417편은 그룹 레이블과 체크박스 그룹의 관계를 스크린 리더가 확인할 수 있게 하라는 규칙입니다. 체크박스 그룹의 마지막 규칙이죠.

각 체크박스에 이름이 있어도(CP-296) — 그 체크박스 그룹 전체가 무엇을 묻는지(예: ‘받고 싶은 알림’, ‘관심 분야’)를 스크린 리더가 모르면, 사용자는 ‘SMS/이메일/앱푸시’라는 옵션은 듣지만 ’무엇에 대한 것인지’ 맥락을 잃죠. CP-297은 그룹 레이블(질문)과 체크박스 그룹의 관계를 프로그래밍적으로 연결하라고 규정합니다. 라디오 CP-288과 평행한 규칙이죠. 이번 편을 풀어냅니다.

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

CP-297 (컴포넌트 > 체크박스) “스크린 리더에서 그룹 레이블과 체크박스 그룹의 관계를 확인할 수 있도록 하고 있다.”

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

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

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

체크박스는 — 여러 옵션이 하나의 질문에 대한 다중 선택인 경우가 많습니다. ‘SMS/이메일/앱푸시’는 ’받고 싶은 알림’ 이라는 질문의 답이고, ’경제/문화/스포츠’는 ’관심 분야’의 답이죠. 각 옵션의 이름(CP-296)만 있고 그룹 전체의 질문이 없으면 — 맥락이 끊깁니다.

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

질문 맥락 상실 스크린 리더 사용자가 체크박스 그룹에 도달하면 옵션(‘이메일, 체크박스’)은 듣지만, 화면에 보이는 ’받고 싶은 알림’이라는 제목이 그룹과 연결 안 돼 있으면 무엇을 묻는지 모릅니다. 특히 한 페이지에 여러 체크박스 그룹이 있으면(알림 종류·관심 분야·약관 동의) 더 헷갈리죠.

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

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

구현 방법:

① <fieldset> + <legend> (권장) — 관련 체크박스들을 <fieldset>으로 묶고, 그룹 질문을 <legend>에 넣습니다.

<fieldset> <legend>받고 싶은 알림</legend> <label><input type="checkbox" name="noti" value="sms"> SMS</label> <label><input type="checkbox" name="noti" value="email"> 이메일</label> <label><input type="checkbox" name="noti" value="push"> 앱 푸시</label> </fieldset>

스크린 리더는 — 각 옵션을 읽을 때 <legend> 내용(‘받고 싶은 알림’)을 함께 안내하죠(‘받고 싶은 알림, 이메일, 체크박스, 선택 안 됨’). 가장 표준적이고 견고한 방법입니다.

② role="group" + aria-labelledby/aria-label — 커스텀 구조면, 그룹 컨테이너에 role="group"을 주고 aria-labelledby로 질문 텍스트를 가리키거나 aria-label로 직접 질문을 부여합니다. (라디오는 role="radiogroup" 이었지만, 체크박스 그룹은 일반 role="group"을 씁니다 — 체크박스는 라디오 같은 단일 선택 그룹 의미가 아니라 독립 항목들의 묶음이라서요.)

라디오 CP-288과의 차이. 구조는 평행하지만 — 라디오 그룹은 role="radiogroup"(단일 선택 그룹), 체크박스 그룹은 role="group"(일반 묶음)을 씁니다. <fieldset>/<legend>는 양쪽 다 동일하게 쓰이고요. 같은 name을 공유하는 것도 비슷하지만 — 체크박스는 name이 ’하나만 선택’을 강제하지 않습니다(다중 선택이라). name은 폼 전송 시 묶음 식별용이고, 접근성 그룹 레이블은 <fieldset>/<legend>로 별도로 줍니다.

296과 297의 합:

CP-296 — 개별 체크박스 이름(‘SMS’, ‘이메일’).

CP-297 — 그룹 전체 질문(‘받고 싶은 알림’)과의 연결.

둘이 합쳐져 — 스크린 리더가 ’받고 싶은 알림(297) — 이메일(296), 체크박스, 선택 안 됨’처럼 질문 + 옵션 + 상태를 완전히 안내하죠. 키보드 도달(295)·옵션 이름(296)·그룹 질문(297)이 모여 체크박스의 접근성이 완성됩니다.

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

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

3. 점검 / 개선

무엇을 점검하나

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

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

다중 그룹 구별 — 한 페이지의 여러 체크박스 그룹이 각자 질문으로 구별되는가.

개선 방향

관련 체크박스를 <fieldset>으로 묶고 질문을 <legend>에. 커스텀이면 role=“group”+aria-labelledby.

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

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

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

기관 유형	CP-297 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (체크박스 그룹 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

□ 한 페이지의 여러 체크박스 그룹이 각자 질문으로 구별되나요?

❓ FAQ

Q1. 옵션 레이블(CP-296)만 있으면 안 되나요? 옵션 이름은 알아도 ‘무엇에 대한 선택인지’ 맥락이 없습니다. 그룹 질문 연결이 별도로 필요하죠. Q2. 라디오 그룹과 똑같이 하나요? <fieldset>/<legend>는 같지만, ARIA role은 체크박스 그룹이 role="group"(라디오는 role="radiogroup")을 씁니다. Q3. 가장 쉬운 방법은? <fieldset>으로 묶고 질문을 <legend>에 넣으면 됩니다. 표준 HTML이라 스크린 리더가 자동 안내하죠.

6. 마무리

CP-297의 메시지:

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

옵션 이름(296)만 있고 그룹 질문이 연결 안 되면 스크린 리더 사용자가 선택 맥락을 잃습니다. <fieldset>/<legend> 로 그룹 질문을 연결하면 ‘받고 싶은 알림 — 이메일’ 식으로 맥락이 전해지죠. 이로써 체크박스 9개 규칙이 마무리됩 니다. 다음 편부터는 셀렉트(드롭다운)입니다.

다음 편 예고 ▶ 「418. (CP-298) 셀렉트(Select) — 많은 옵션 중 하나를 선택하는 경우에 사용하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 체크박스(Checkbox) 가이드 — https://www.krds.go.kr/html/site/component/component_27.html

WAI-ARIA APG — Checkbox Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

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

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