각 체크박스에 이름을

KRDS CP-296 — 스크린 리더 사용자가 체크박스의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공하고 있다.

0. 들어가며 — 이름 없는 네모

이번 416편은 각 체크박스에 <label>, title, aria-label, aria-labelledby 중 1가지로 레이블을 제공하라는 규칙입니다.

체크박스(네모)에 — 프로그래밍적으로 연결된 레이블이 없으면, 스크린 리더는 ‘체크박스’라고만 읽고 ’무엇을 켜는 건지’ 못 알려주죠. 화면에 텍스트가 옆에 보여도 — 연결이 안 돼 있으면 스크린 리더엔 의미가 없습니다. CP-296은 4가지 방법 중 하나로 각 체크박스에 접근가능한 이름을 주라고 규정합니다. 라디오 CP-287과 평행한 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 4가지 중 하나로 레이블

CP-296 (컴포넌트 > 체크박스) “스크린 리더 사용자가 체크박스의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식을 이용하여 레이블을 제공하고 있다.”

각 체크박스에 4가지 방법(<label>, title, aria-label, aria-labelledby) 중 하나로 접근가능한 이름 (accessible name)을 부여하라는 뜻입니다.

정리: 각 체크박스에 4가지 중 하나로 레이블을 제공하라. 이게 CP-296입니다.

2. 왜 레이블을 제공하나

체크박스(<input type="checkbox">)는 그 자체로는 ‘켜고/끄는 네모’일 뿐, 무엇을 켜는지 정보가 없습니다. 화면에는 옆에 텍스트(’이메일 수신’, ‘약관 동의’ 등)가 보이지만 그 텍스트가 체크박스와 프로그래밍적으로 연결 돼 있지 않으면, 스크린 리더는 그 둘을 별개로 인식하죠. 그래서 스크린 리더 사용자는 체크박스에 초점이 가면 ’체크박스, 선택 안 됨’이라고만 듣고, 무엇을 켜는지 모릅니다.

이는 접근가능한 이름(accessible name) 의 문제입니다(WCAG 4.1.2 Name, Role, Value). 모든 폼 컨트롤은 — 프로그래밍적으로 결정되는 이름이 있어야, 보조기술이 그 컨트롤의 용도를 사용자에게 전달하죠.

4가지 레이블 제공 방법. CP-296은 다음 중 하나로 이름을 주라고 합니다:

① <label> (권장) — <label for="agree">약관에 동의합니다</label> + <input id="agree" type="checkbox">, 또는 <label>로 감싸기. 가장 표준적이죠. 장점: 레이블 텍스트를 클릭해도 체크박스가 토글됩니다(클릭 영역 확대, CP-291의 터치 영역). 시각·접근성 둘 다 충족하므로 체크박스엔 <label>이 최선입니다.

② aria-labelledby — 화면의 기존 텍스트 요소 id를 가리켜 이름으로 씀(aria-labelledby="agree-text"). 화면에 이미 보이는 레이블을 재사용할 때.

③ aria-label — 보이는 텍스트 없이 속성으로 직접 이름 부여(aria-label="약관 동의"). 화면에 레이블을 안 둘 때(드묾, 예: 목록 행 선택 체크박스).

④ title — title 속성. 폴백 수단(권장도 낮음, 마우스 호버 시만 보임).

우선순위는 — 체크박스엔 <label> 연결이 최선입니다(클릭 영역 + 접근성). 화면 텍스트 재사용은 aria-labelledby, 보이는 레이블이 없으면 aria-label을 씁니다.

용도가 분명해야. 원문이 ’체크박스의 용도를 확인’이라 한 것처럼 — 레이블은 그 체크박스를 켜면 무슨 일이 일어나는지(무엇에 동의·무엇을 받음)를 정확히 전해야 하죠(CP-291의 명확한 레이블). 특히 동의 체크박스는 — ’무엇에 동의하는지’가 레이블에 분명해야 합니다.

그룹 레이블은 별도(CP-297). CP-296은 개별 체크박스의 레이블입니다. 이와 별개로 — 체크박스 그룹 전체가 무엇을 묻는지(예: ‘받고 싶은 알림’)를 알려주는 그룹 레이블이 필요하죠. 그건 다음 편 CP-297(<fieldset>/ <legend> 또는 role="group"+aria-labelledby)에서 다룹니다. 즉 — 개별 체크박스 이름(296) + 그룹 질문(297)이 함께 있어야, 스크린 리더가 완전히 안내하죠.

이 규칙은 체크박스의 ’식별 가능성’을 담당합니다 — 키보드로 도달한(295) 각 체크박스에 이름을 줘(296), 스크린 리더 사용자가 무엇을 켜는지 알게 하죠. 표준 <input type="checkbox"> + <label> 조합이면 대부분 자동 충족됩니다.

정리하면 — 체크박스에 연결된 레이블이 없으면 스크린 리더가 용도를 못 알리므로, <label>(권장)·aria-labelledby· aria-label·title 중 하나로 각 체크박스에 접근가능한 이름을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

레이블 존재 — 각 체크박스에 4가지 중 하나로 접근가능한 이름이 있는가.

연결 정확 — <label for>/id 매칭, aria-labelledby가 올바른 id를 가리키는가.

레이블 클릭·용도 — <label> 연결로 텍스트 클릭 시 토글되고, 용도가 분명한가.

개선 방향

각 체크박스에 <label> 연결(권장, 클릭 영역+접근성). 화면 텍스트 재사용은 aria-labelledby.

접근성 검사 도구로 accessible name 누락 확인.

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

역할	책임
퍼블리셔/개발	label/aria 연결 구현
콘텐츠/UX	체크박스 레이블 텍스트 작성

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 체크박스에 4가지 중 하나로 접근가능한 이름이 있나요?

□ <label for>/id 매칭, aria-labelledby가 올바른 id를 가리키나요?

□ <label> 연결로 텍스트 클릭 시 토글되고, 용도가 분명한가요?

❓ FAQ

Q1. 옆에 텍스트가 보이는데 왜 연결이 필요한가요? 보여도 프로그래밍적으로 연결 안 되면 스크린 리더가 별개로 인식합니다. <label> 등으로 연결해야 하죠. Q2. 4가지 중 뭐가 제일 좋나요? 체크박스엔 <label> 연결이 최선입니다. 클릭 영역 확대 + 접근성 둘 다 됩니다. Q3. 목록 행 선택 체크박스처럼 보이는 텍스트가 없으면? aria-label로 직접 이름을 줍니다(예: aria-label=“3행 선택”).

6. 마무리

CP-296의 메시지:

각 체크박스에 이름을 — label/aria-label/aria-labelledby/title 중 하나로 레이블을 제공하라.

체크박스에 연결된 레이블이 없으면 스크린 리더가 용도를 못 알립니다. <label> 연결(권장)로 각 체크박스에 접근 가능한 이름을 주면 클릭 영역도 넓어지죠. 다음 편은 그룹 전체의 레이블입니다.

다음 편 예고 ▶ 「417. (CP-297) 스크린 리더에서 그룹 레이블과 체크박스 그룹의 관계를 확인할 수 있도록 하고 있다.」

ViewCheck는 각 체크박스에 접근가능한 레이블이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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