각 옵션에 이름을

KRDS CP-287 — label, title, aria-label, aria-labelledby 중 하나로 레이블을 제공하고 있다.

0. 들어가며 — 이름 없는 동그라미

이번 407편은 각 라디오 버튼에 label, title, aria-label, aria-labelledby 중 하나로 레이블을 제공하라는 규칙입니다.

라디오 버튼(동그라미)에 — 프로그래밍적으로 연결된 레이블이 없으면, 스크린 리더는 ‘라디오 버튼’이라고만 읽고 ’무엇을 선택하는 건지’ 못 알려주죠. 화면에 텍스트가 옆에 보여도 — 연결이 안 돼 있으면 스크린 리더엔 의미가 없습니다. CP-287은 4가지 방법 중 하나로 각 옵션에 접근가능한 이름을 주라고 규정합니다. 이미지 alt CP-189, 캐러셀 CP-198, 탭 CP-238에서 반복된 ’이름 제공’의 라디오 버전이죠. 이번 편을 풀어냅니다.

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

CP-287 (컴포넌트 > 라디오 버튼) “label, title, aria-label, aria-labelledby 중 하나로 레이블을 제공하고 있다.”

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

정리: 각 라디오 버튼에 4가지 중 하나로 레이블을 제공하라. 이게 CP-287입니다.

2. 왜 레이블을 제공하나

라디오 버튼(<input type="radio">)은 그 자체로는 ‘선택 가능한 동그라미’일 뿐, 무엇을 선택하는지 정보가 없습니다. 화면에는 옆에 텍스트(’남성’, ‘여성’ 등)가 보이지만 그 텍스트가 라디오 버튼과 프로그래밍적으로 연결돼 있지 않으면, 스크린 리더는 그 둘을 별개로 인식하죠. 그래서 스크린 리더 사용자는 라디오 버튼에 초점이 가면 ’라디오 버튼, 선택 안 됨’이라고만 듣고, 무엇을 고르는지 모릅니다.

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

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

① <label> (권장) — <label for="opt1">남성</label> + <input id="opt1" type="radio">, 또는 <label>로 감싸기. 이게 가장 표준적이죠. 장점: 레이블 텍스트를 클릭해도 라디오가 선택됩니다(클릭 영역 확대, CP-283의 터치 영역). 시각·접근성 둘 다 충족하므로 라디오 버튼엔 <label>이 최선입니다.

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

③ aria-label — 보이는 텍스트 없이 속성으로 직접 이름 부여(aria-label="남성"). 화면에 레이블을 안 둘 때(드묾).

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

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

레이블 = 옵션 의미. 각 옵션의 레이블은 — 그 옵션이 무엇인지 정확히 전해야 하죠(CP-283의 명확한 레이블). ’옵션 1’이 아니라 ’신용카드’처럼 의미 있는 이름이어야 스크린 리더 사용자가 이해합니다.

그룹 레이블은 별도(CP-288). CP-287은 개별 옵션의 레이블입니다. 이와 별개로 라디오 그룹 전체가 무엇을 묻는지(예: ‘성별’)를 알려주는 그룹 레이블이 필요하죠. 그건 다음 편 CP-288(<fieldset>/<legend> 또는 role="radiogroup"+aria-labelledby)에서 다룹니다. 즉 개별 옵션 이름(287) + 그룹 질문(288)이 함께 있어야, 스크린 리더가 ’성별 남성, 라디오 버튼, 2개 중 1번째’처럼 완전히 안내하죠.

이 규칙은 라디오 버튼의 ’식별 가능성’을 담당합니다 — 키보드로 도달한(286) 각 옵션에 이름을 줘(287), 스크린 리더 사용자가 무엇을 고르는지 알게 하죠. 표준 <input type="radio"> + <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-287 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 라디오 버튼에 4가지 중 하나로 접근가능한 이름이 있나요?

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

□ <label> 연결로 텍스트 클릭 시 라디오가 선택되나요?

❓ FAQ

Q1. 옆에 텍스트가 보이는데 왜 연결이 필요한가요? 보여도 프로그래밍적으로 연결 안 되면 스크린 리더가 별개로 인식합니다. <label> 등으로 연결해야 하죠. Q2. 4가지 중 뭐가 제일 좋나요? 라디오 버튼엔 <label> 연결이 최선입니다. 클릭 영역 확대 + 접근성 둘 다 됩니다. Q3. 그룹 질문(‘성별’)도 이걸로 하나요? 아닙니다. 개별 옵션은 CP-287, 그룹 전체 질문은 CP-288(fieldset/ legend)에서 다룹니다.

6. 마무리

CP-287의 메시지:

각 옵션에 이름을 — label/aria-label/aria-labelledby/title 중 하나로 레이블을 제공하라.

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

다음 편 예고 ▶ 「408. (CP-288) 그룹 레이블과 라디오 그룹 간 관계를 스크린리더가 확인할 수 있게 제공하고 있다.」

ViewCheck는 각 라디오 버튼에 접근가능한 레이블이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.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컴포넌트,웹표준