Tab으로 옮기고 Space로 켜고

KRDS CP-295 — 체크박스를 키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되게 구현하고 있다.

0. 들어가며 — 마우스 없이 체크하기

이번 415편은 체크박스를 키보드로 탐색·실행하고, 키보드 초점이 명확히 표시되게 하라는 규칙입니다.

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

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

CP-295 (컴포넌트 > 체크박스) “체크박스를 키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되게 구현하고 있다.”

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

정리: 체크박스를 키보드로 켜고/끄고, 초점을 또렷이 보여라. 이게 CP-295입니다.

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

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

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

Tab으로 각 체크박스 이동 — Tab 키로 체크박스에 도달합니다. 라디오 그룹과 다른 점 — 라디오는 그룹 전체가 하나의 Tab 정지점이고 방향키로 옵션을 옮겼지만(CP-286), 체크박스는 각각이 독립된 Tab 정지점이죠. Tab을 누르면 다음 체크박스로 이동합니다. 각 체크박스가 독립 on/off라 그렇습니다.

Space로 토글 — 체크박스에 초점이 있을 때 Space 키로 켜고/끕니다. 누를 때마다 체크/해제가 번갈아 되죠. (라디오는 방향키 이동만으로 선택됐지만, 체크박스는 Space로 명시적 토글입니다.)

표준 컨트롤 권장 네이티브 <input type="checkbox"> 를 쓰면 이 키보드 동작(Tab 이동, Space 토글)이 브라우저에서 자동 제공됩니다. 커스텀(div 등)으로 만들면 role="checkbox"·aria-checked·tabindex="0"· Space 핸들러를 직접 구현해야 하죠. 그래서 표준 컨트롤이 가장 안전합니다.

② 명확한 키보드 초점 표시. 키보드로 이동할 때 — 지금 어느 체크박스에 초점이 있는지 시각적으로 또렷이 보여야 합니다. 초점 표시(focus indicator)가 없거나 흐릿하면 — 키보드 사용자는 ‘내가 지금 어디 있는지’ 몰라 길을 잃죠.

focus ring 유지 — 체크박스에 초점이 가면 외곽선(focus ring)이 또렷이 보이게. outline:none으로 없애면 안 됩니다(메인메뉴 CP-049, 라디오 CP-286 반복).

초점 vs 선택 구별 — 초점(지금 키보드가 있는 곳)과 선택(✓ 체크됨)은 다른 상태죠. 시각적으로 둘을 구별되게 표현합니다(CP-294의 형태 구분).

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

스크린 리더 연계. 키보드 초점이 체크박스에 가면 — 스크린 리더가 그 체크박스의 레이블·역할·상태(‘○○, 체크 박스, 선택됨/선택 안 됨’)를 읽어야 하죠. 표준 <input type="checkbox"> + 연결된 <label>(CP-296) + 그룹 레이블 (CP-297)이면 이게 자동입니다. 즉 키보드 조작(295)·레이블(296)·그룹 레이블(297)이 함께 완성되죠.

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

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

3. 점검 / 개선

무엇을 점검하나

키보드 탐색 — Tab으로 각 체크박스 이동, Space로 토글이 되는가.

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

표준 구현 — 네이티브 체크박스 또는 올바른 ARIA(checkbox/aria-checked/tabindex)인가.

개선 방향

네이티브 <input type="checkbox"> 사용(키보드 동작 자동). 커스텀이면 role+tabindex+Space 핸들러.

focus ring 유지·강화. 초점/선택 시각 구별(CP-294).

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ Tab으로 각 체크박스 이동, Space로 토글이 되나요?

□ 현재 초점 체크박스가 또렷한 focus ring으로 보이나요(outline 제거 안 됨)?

□ 네이티브 체크박스 또는 올바른 ARIA(checkbox/aria-checked)인가요?

❓ FAQ

Q1. 체크박스도 라디오처럼 방향키로 이동하나요? 아닙니다. 체크박스는 각각이 독립 Tab 정지점이라 Tab으로 이동하고, Space로 토글합니다(라디오는 그룹 단위 방향키). Q2. outline을 없애도 되나요? 안 됩니다. 키보드 사용자가 위치를 잃습니다. focus ring을 유지·강화해야 하죠. Q3. 커스텀 체크박스는 어떻게 하나요? role="checkbox"/aria-checked/tabindex="0"과 Space 핸들러를 직접 구현해야 합니다. 네이티브가 가장 안전하죠.

6. 마무리

CP-295의 메시지:

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

체크박스는 Tab 이동·Space 토글의 표준 키보드 동작을 지원하고, 현재 초점을 또렷한 focus ring으로 보여야 합니다. 네이티브 체크박스가 가장 안전하죠. 다음 편은 각 체크박스의 레이블 제공입니다.

다음 편 예고 ▶ 「416. (CP-296) , title, aria-label, aria-labelledby 중 1가지 방식으로 레이블을 제공하고 있다.」

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컴포넌트,웹표준