방향키로 고르고, 초점은 또렷이

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

0. 들어가며 — 마우스 없이 라디오 고르기

이번 406편은 라디오 버튼을 키보드로 탐색·실행하고, 키보드 초점이 명확히 표시되게 하라는 규칙입니다.

마우스를 못 쓰는 사용자(키보드·스크린 리더 사용자)도 — 라디오 버튼을 Tab으로 도달하고 방향키로 옵션을 골라야 하죠. 또 지금 어느 옵션에 초점이 있는지 또렷이 보여야 합니다. CP-286은 키보드 조작과 초점 표시를 함께 규정 합니다. 메인메뉴 CP-049, 탭 CP-235, 버튼 CP-274에서 반복된 키보드 접근성의 라디오 버전이죠. 이번 편을 풀어 냅니다.

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

CP-286 (컴포넌트 > 라디오 버튼) “키보드로 탐색하고 실행할 수 있으며, 키보드 초점이 명확하게 표시되게 구현하고 있다.”

라디오 버튼을 키보드만으로 도달·선택할 수 있고, 현재 초점 위치가 시각적으로 또렷이 표시되게 구현하라는 뜻입니다.

정리: 라디오 버튼을 키보드로 고르고, 초점을 또렷이 보여라. 이게 CP-286입니다.

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

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

① 키보드 탐색·실행. 라디오 버튼은 — 표준 키보드 상호작용 패턴이 정해져 있습니다(WAI-ARIA 라디오 그룹 패턴):

Tab으로 그룹 진입 — Tab 키로 라디오 그룹에 도달합니다. 이때 그룹 전체가 하나의 Tab 정지점이죠(개별 옵션마다 Tab을 누르지 않음). 선택된 옵션(없으면 첫 옵션)에 초점이 갑니다.

방향키로 옵션 이동·선택 — 그룹 안에서는 화살표 키(↑↓ 또는 ←→) 로 옵션 간 이동하고, 이동하면서 바로 선택됩니다. 이것이 라디오 그룹의 표준 동작이죠(roving tabindex). Tab은 그룹을 떠나 다음 컨트롤로 가고요.

표준 컨트롤 권장 네이티브 <input type="radio"> 를 쓰면 이 키보드 동작이 브라우저에서 자동 제공 됩니다. 커스텀(div 등)으로 만들면 이 방향키 동작·roving tabindex를 직접 구현하고 role="radiogroup"· role="radio"·aria-checked를 줘야 하죠. 그래서 표준 컨트롤이 가장 안전합니다.

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

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

초점 vs 선택 구별 — 초점(지금 키보드가 있는 곳)과 선택(채워진 옵션)은 다른 상태죠. 방향키로 이동하면 초점+선택이 함께 가지만, 시각적으로 둘을 구별되게 표현합니다(CP-285의 형태 구분, 탭 CP-236 정신).

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

스크린 리더 연계. 키보드 초점이 라디오 버튼에 가면 — 스크린 리더가 그 옵션의 레이블·역할·상태(‘○○, 라디오 버튼, 선택됨/3개 중 1번째’)를 읽어야 하죠. 표준 <input type="radio"> + 연결된 <label>(CP-287) + <fieldset>/ <legend> 그룹 레이블(CP-288)이면 이게 자동입니다. 즉 키보드 조작(286)·레이블(287)·그룹 레이블(288)이 함께 완성되죠.

이 규칙은 라디오 버튼의 ’키보드 운용성’을 담당합니다 — 마우스 없이도 방향키로 고르고(286 탐색), 어디 있는지 또렷이 보며(286 초점), 스크린 리더가 안내하게(287·288) 하죠. 모든 입력 수단 사용자를 포용합니다.

정리하면 — 라디오 버튼은 Tab으로 진입·방향키로 선택하는 표준 키보드 동작을 지원하고, 현재 초점을 또렷한 focus ring으로 표시해 키보드·스크린 리더 사용자가 마우스 없이 완전히 조작하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 탐색 — Tab으로 그룹 진입, 방향키로 옵션 이동·선택이 되는가.

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

표준 구현 — 네이티브 라디오 또는 올바른 ARIA(radiogroup/radio/aria-checked)인가.

개선 방향

네이티브 <input type="radio"> 사용(키보드 동작 자동). 커스텀이면 roving tabindex+ARIA 구현.

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

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

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

기관 유형	CP-286 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (라디오 버튼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ Tab으로 그룹 진입, 방향키로 옵션 이동·선택이 되나요?

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

□ 네이티브 라디오 또는 올바른 ARIA(radiogroup/radio)인가요?

❓ FAQ

Q1. 라디오 그룹은 Tab으로 옵션마다 이동하나요? 아닙니다. 그룹 전체가 하나의 Tab 정지점이고, 그룹 안은 방향키로 이동합니다(roving tabindex). Q2. outline을 없애도 되나요? 안 됩니다. 키보드 사용자가 위치를 잃습니다. focus ring을 유지·강화해야 하죠. Q3. 커스텀 라디오는 어떻게 하나요? roving tabindex와 role="radiogroup"/role="radio"/aria-checked, 방향키 핸들러를 직접 구현해야 합니다. 네이티브가 가장 안전하죠.

6. 마무리

CP-286의 메시지:

방향키로 고르고, 초점은 또렷이 — 키보드로 탐색·실행하고 초점을 명확히 표시하라.

라디오 버튼은 Tab 진입·방향키 선택의 표준 키보드 동작을 지원하고, 현재 초점을 또렷한 focus ring으로 보여야 합니다. 네이티브 라디오가 가장 안전하죠. 다음 편은 각 옵션의 레이블 제공입니다.

다음 편 예고 ▶ 「407. (CP-287) label, title, aria-label, aria-labelledby 중 하나로 레이블을 제공하고 있다.」

ViewCheck는 라디오 버튼의 키보드 탐색과 초점 표시를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 라디오 버튼(Radio button) 가이드 — https://www.krds.go.kr/html/site/component/component_26.html

WAI-ARIA APG — Radio Group Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/radio/

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

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