스위치에 이름과 설명을

KRDS CP-318 — 토글 스위치에 접근 가능한 이름을 제공하고 있으며, 스크린 리더에서 도움말을 인지할 수 있도록 하고 있다.

0. 들어가며 — ’스위치, 켜짐’만 들리면

이번 438편은 토글 스위치에 접근가능한 이름을 제공하고, 스크린 리더에서 도움말을 인지할 수 있게 하라는 규칙입니다. 이로써 토글 스위치 7개 규칙이 마무리됩니다.

토글 스위치에 — 접근가능한 이름이 없으면, 스크린 리더는 ‘스위치, 켜짐’이라고만 읽고 ’무엇에 대한 스위치인지’ 못 알리죠. 또 그 설정에 부가 설명(도움말)이 있으면 — 그것도 스크린 리더가 전해야 합니다. CP-318은 토글의 이름과 도움말 인지를 규정합니다. 라디오 CP-287·체크박스 CP-296의 토글 버전이되, ’도움말 인지’가 추가된 게 특징이죠. 이번 편을 풀어냅니다.

1. 원문 — 접근가능한 이름 + 도움말 인지

CP-318 (컴포넌트 > 토글 스위치) “토글 스위치에 접근 가능한 이름을 제공하고 있으며, 스크린 리더에서 도움말을 인지할 수 있도록 하고 있다.”

토글 스위치에 무엇을 켜고/끄는지 알리는 접근가능한 이름을 부여하고, 그 설정의 도움말(부가 설명)도 스크린 리더가 인지할 수 있게 하라는 뜻입니다.

정리: 토글에 접근가능한 이름을 주고, 도움말도 스크린 리더가 인지하게 하라. 이게 CP-318입니다.

2. 왜 이름과 도움말 인지인가

토글 스위치(role="switch" 또는 체크박스 기반)는 스크린 리더에서 ’스위치’로 인식되고, 상태(켜짐/꺼짐)는 aria-checked로 전달됩니다. 하지만 그 스위치가 무엇에 대한 것인지(알림? 다크 모드?)는 접근가능한 이름이 있어야 알리죠. 그리고 설정에 부가 설명(도움말) 이 있으면 그것도 스크린 리더 사용자가 알 수 있어야 합니다.

① 접근가능한 이름. 토글 스위치에 — 무엇을 켜고/끄는지 이름이 없으면, 스크린 리더는 ‘스위치, 켜짐’이라고만 읽습니다. 사용자는 ’무슨 스위치가 켜졌다는 건지’ 모르죠. 그래서 — 4가지 방식 중 하나로 이름을 줍니다(라디오 CP-287·체크박스 CP-296과 동일 패턴):

<label> (권장) — 토글의 레이블(‘알림’, CP-312)을 <label for>/id로 스위치와 연결. 또는 감싸기. 시각 레이블(CP-314 인접 배치)을 그대로 접근가능한 이름으로 쓰죠. 토글엔 이게 최선입니다.

aria-labelledby — 화면의 레이블 텍스트 id를 가리켜 이름으로.

aria-label — 보이는 레이블 없이 속성으로 직접(‘알림 설정’).

(title은 폴백)

이름 + 역할 + 상태가 합쳐져 — 스크린 리더가 ’알림, 스위치, 켜짐’처럼 완전히 안내하죠. 시각 레이블(312~314)을 프로그래밍적으로 연결하는 게 핵심입니다.

② 도움말 인지. 토글 설정에는 — 종종 부가 설명(도움말) 이 따릅니다. 예: ‘알림’ 토글 아래 ‘새 게시글이 등록되면 이메일로 알려드립니다’ 같은 보조 텍스트요. 시각 사용자는 이 설명을 보고 토글의 효과를 이해하죠. 그런데 — 이 도움말이 스위치와 연결 안 되면, 스크린 리더 사용자는 토글 이름(‘알림’)만 듣고 그 설명을 놓칩니다.

그래서 — 도움말을 스크린 리더가 인지하게 연결합니다:

aria-describedby 토글 스위치에 aria-describedby로 도움말 텍스트의 id를 가리킵니다. 그러면 스크린 리더가 토글에 초점이 갈 때 이름(‘알림’) 다음에 설명(‘새 게시글이…’)을 함께 읽죠. aria-labelledby(이름)와 aria-describedby(설명)는 역할이 다릅니다 이름은 ‘무엇인가’, 설명은 ‘부가 안내’.

결과 — 스크린 리더 사용자도 — 시각 사용자처럼 토글의 이름 + 도움말을 모두 얻어, 켜면 무슨 일이 일어나는지 (CP-312의 직관성을 보조 설명까지) 이해하죠.

이 ’도움말 인지’가 — 라디오·체크박스 규칙(이름만)에 없던 토글 고유 추가분입니다. 토글은 설정 항목이라 부가 설명이 흔하고, 그 설명이 효과 이해에 중요해서죠.

상태 전달 재확인. 이름·도움말에 더해 — 켜짐/꺼짐 상태가 aria-checked(또는 체크박스 checked)로 전달돼야 합니다(CP-313에서 본 ‘상태는 스위치/aria로’). 이름(318①) + 도움말(318②) + 상태(aria-checked) + 키보드 조작 (CP-317)이 모여 토글 접근성이 완성되죠.

이 규칙은 토글 스위치의 ’식별·이해 가능성’을 담당합니다 — 키보드로 도달한(317) 토글에 이름을 줘 무엇인지 알고 (318①), 도움말을 연결해 효과를 이해하게(318②) 해, 스크린 리더 사용자가 토글을 온전히 쓰게 하죠.

정리하면 — 토글에 접근가능한 이름이 없으면 무엇의 스위치인지 모르고 도움말이 연결 안 되면 효과를 놓치므로, <label> 등으로 이름을 주고 aria-describedby로 도움말을 연결해 스크린 리더가 이름·설명·상태를 모두 전하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

접근가능한 이름 — 토글에 4가지 중 하나로 무엇을 켜는지 이름이 있는가.

도움말 연결 — 부가 설명이 aria-describedby로 스위치에 연결됐는가.

상태 전달 — 켜짐/꺼짐이 aria-checked(또는 checked)로 전달되는가.

개선 방향

시각 레이블(CP-312~314)을 <label for>로 스위치에 연결(이름).

부가 설명을 aria-describedby로 연결. role="switch"+aria-checked로 역할·상태 전달.

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

역할	책임
퍼블리셔/개발	label·aria-describedby·aria-checked 구현
콘텐츠/UX	토글 이름·도움말 텍스트 작성
QA/접근성	스크린 리더 이름·설명·상태 검증

기관 유형	CP-318 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (토글 스위치 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 토글에 4가지 중 하나로 무엇을 켜는지 접근가능한 이름이 있나요?

□ 부가 설명이 aria-describedby로 스위치에 연결됐나요?

□ 켜짐/꺼짐이 aria-checked(또는 checked)로 전달되나요?

❓ FAQ

Q1. 이름과 도움말이 뭐가 다른가요? 이름(aria-labelledby/label)은 ‘무엇인가’(알림), 도움말(aria-describedby)은 ‘부가 설명’(새 글 등록 시 알림)입니다. 역할이 다르죠. Q2. 도움말 연결이 왜 토글에 강조되나요? 토글은 설정 항목이라 효과를 설명하는 부가 텍스트가 흔합니다. 그게 연결 안 되면 스크린 리더 사용자가 효과를 놓치죠. Q3. 상태는 어떻게 전하나요? role="switch" + aria-checked="true/false"(또는 체크박스 기반의 checked)로 켜짐/꺼짐을 전합니다.

6. 마무리

CP-318의 메시지:

스위치에 이름과 설명을 — 접근가능한 이름을 주고 도움말도 스크린 리더가 인지하게 하라.

토글에 이름이 없으면 무엇의 스위치인지 모르고, 도움말이 연결 안 되면 효과를 놓칩니다. <label>로 이름을, aria-describedby로 도움말을 연결해 스크린 리더가 이름·설명·상태를 모두 전하게 하는 게 핵심이죠. 이로써 토글 스위치 7개 규칙이 마무리됩니다. 다음 편부터는 단계 표시기(Step indicator)입니다.

다음 편 예고 ▶ 「439. (CP-319) 단계 표시기 — 여러 단계로 이루어진 절차의 진행 상황을 표시하는 데 사용하고 있다.」

ViewCheck는 토글 스위치의 접근가능한 이름과 도움말 연결을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 토글 스위치(Toggle switch) 가이드 — https://www.krds.go.kr/html/site/component/component_30.html

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

WAI-ARIA APG — Switch Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/switch/

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

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