Tab으로 닿고 Space로 켜고

KRDS CP-317 — 키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되도록 하고 있다.

0. 들어가며 — 마우스 없이 토글 켜기

이번 437편은 토글 스위치를 키보드로 탐색·실행하고, 키보드 초점이 명확히 표시되게 하라는 규칙입니다.

마우스를 못 쓰는 사용자(키보드·스크린 리더 사용자)도 — 토글 스위치를 Tab으로 도달하고 Space/Enter로 켜고/끌 수 있어야 하죠. 또 지금 어느 토글에 초점이 있는지 또렷이 보여야 합니다. CP-317은 키보드 조작과 초점 표시를 함께 규정합니다. 체크박스 CP-295, 라디오 CP-286의 토글 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 키보드 탐색·실행 + 명확한 초점

CP-317 (컴포넌트 > 토글 스위치) “키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되도록 하고 있다.”

토글 스위치를 키보드만으로 도달·토글할 수 있고, 현재 초점 위치가 시각적으로 또렷이 표시되게 하라는 뜻입니다.

정리: 토글을 키보드로 켜고/끄고, 초점을 또렷이 보여라. 이게 CP-317입니다.

2. 왜 키보드 탐색·초점인가

웹 접근성의 가장 기본 원칙 — 모든 기능은 키보드로 사용 가능해야 한다(KWCAG 2.1.1, 키보드 접근성)입니다. 마우스를 못 쓰는 사용자(지체장애, 스크린 리더 사용)는 키보드로 모든 걸 조작하죠. 토글 스위치도 예외 없습니다.

① 키보드 탐색·실행. 토글 스위치는 — 표준 키보드 상호작용 패턴이 정해져 있습니다(WAI-ARIA switch 패턴):

Tab으로 도달 — Tab 키로 토글 스위치에 초점을 옮깁니다. 각 토글이 Tab 정지점이죠.

Space(또는 Enter)로 토글 — 초점이 있을 때 Space 키로 켜고/끕니다(체크박스와 유사). 누를 때마다 on/off가 번갈아 되죠.

표준 구현 권장 — 토글 스위치는 — 네이티브 단일 요소가 없어, 보통 <input type="checkbox"> + 스위치 스타일, 또는 <button role="switch"> + aria-checked로 만듭니다. 둘 다 키보드 동작(Tab·Space)을 갖게 하고, role="switch"와 aria-checked로 ’스위치’임과 상태를 전하죠(CP-318). 네이티브 체크박스 기반이면 키보드 토글이 자동입니다.

② 명확한 키보드 초점 표시. 키보드로 이동할 때 — 지금 어느 토글에 초점이 있는지 시각적으로 또렷이 보여야 합니다. 초점 표시(focus indicator)가 없거나 흐릿하면 — 키보드 사용자는 ‘내가 지금 어디 있는지’ 몰라 길을 잃죠(특히 토글이 여러 개 쌓인 설정 화면, CP-315).

focus ring 유지 — 토글에 초점이 가면 외곽선(focus ring)이 또렷이 보이게. outline:none으로 없애면 안 됩니다(체크박스 CP-295, 버튼 CP-274 반복).

초점 대비 — 초점 표시도 배경과 충분한 대비(WCAG 2.4.13 focus appearance)로 또렷이.

초점 vs 상태 구별 — 초점(지금 키보드 위치)과 상태(켜짐/꺼짐)는 다르죠. 초점은 외곽선, 상태는 핸들 위치 (CP-316)로 — 둘을 구별되게 표현합니다.

스크린 리더 연계. 키보드 초점이 토글에 가면 — 스크린 리더가 그 토글의 레이블·역할·상태(‘알림, 스위치, 켜짐’)를 읽어야 하죠. role="switch" + aria-checked + 연결된 레이블(CP-318)이면 이게 자동입니다. 즉 키보드 조작(317)·접근성 이름·상태(318)가 함께 완성되죠.

이 규칙은 토글 스위치의 ’키보드 운용성’을 담당합니다 — 마우스 없이도 Tab으로 닿고 Space로 켜고(317 탐색·실행), 어디 있는지 또렷이 보며(317 초점), 스크린 리더가 안내하게(318) 하죠. 모든 입력 수단 사용자를 포용합니다.

정리하면 — 토글 스위치는 Tab으로 도달·Space로 토글하는 표준 키보드 동작을 지원하고, 현재 초점을 또렷한 focus ring으로 표시해 키보드·스크린 리더 사용자가 마우스 없이 완전히 조작하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 탐색 — Tab으로 토글 도달, Space/Enter로 토글이 되는가.

초점 표시 — 현재 초점 토글이 또렷한 focus ring으로 보이는가(outline 제거 안 됨).

표준 구현 — 네이티브 체크박스 기반 또는 role="switch"+aria-checked인가.

개선 방향

네이티브 체크박스 + 스위치 스타일, 또는 button role="switch"로 키보드 동작 확보.

focus ring 유지·강화. 초점/상태 시각 구별(CP-316).

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

역할	책임
퍼블리셔/개발	키보드 동작·초점 표시 구현
디자이너	focus ring 스타일·대비 정의
QA	키보드 단독 조작 테스트

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ Tab으로 토글 도달, Space/Enter로 토글이 되나요?

□ 현재 초점 토글이 또렷한 focus ring으로 보이나요(outline 제거 안 됨)?

□ 네이티브 체크박스 기반 또는 role="switch"+aria-checked인가요?

❓ FAQ

Q1. 토글은 어떤 키로 켜나요? 보통 Space(체크박스 기반)로 토글합니다. 구현에 따라 Enter도 동작하게 하죠. Q2. outline을 없애도 되나요? 안 됩니다. 키보드 사용자가 위치를 잃습니다. 특히 토글이 여럿 쌓인 설정 화면에선 치명적이죠. focus ring을 유지해야 합니다. Q3. 토글을 어떻게 마크업하나요? 네이티브 <input type="checkbox"> + 스위치 스타일, 또는 <button role="switch"> + aria-checked입니다. 둘 다 키보드·스크린 리더에 ’switch’와 상태를 전하죠.

6. 마무리

CP-317의 메시지:

Tab으로 닿고 Space로 켜고 — 키보드로 탐색·실행하고 초점을 명확히 표시하라.

토글 스위치는 Tab 도달·Space 토글의 표준 키보드 동작을 지원하고, 현재 초점을 또렷한 focus ring으로 보여야 합니다. 네이티브 체크박스 기반 또는 role=“switch”가 안전하죠. 다음 편은 토글의 접근가능한 이름·도움말입니다.

다음 편 예고 ▶ 「438. (CP-318) 토글 스위치에 접근 가능한 이름을 제공하고 있으며, 스크린 리더에서 도움말을 인지할 수 있도록 하고 있다.」

ViewCheck는 토글 스위치의 키보드 탐색과 초점 표시를 진단합니다.

📚 참고 출처

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

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

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

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