지금 어느 칸에 있는지

KRDS CP-404 — 모든 입력 필드의 초점은 시각적으로 확인할 수 있도록 표현하고 있다.

0. 들어가며 — 커서가 어디 있는지

이번 524편은 모든 입력 필드의 초점을 시각적으로 확인할 수 있도록 표현하라는 규칙입니다.

키보드로 폼을 채울 때 — 지금 어느 입력 필드에 초점이 있는지 시각적으로 또렷이 보여야, 사용자가 길을 잃지 않죠. CP-404는 입력 필드의 초점 표시를 규정합니다. 버튼 CP-274, 라디오 CP-286 등 키보드 초점 규칙의 텍스트 입력 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 초점 시각적 확인 가능

CP-404 (컴포넌트 > 텍스트 입력 필드) “모든 입력 필드의 초점은 시각적으로 확인할 수 있도록 표현하고 있다.”

모든 텍스트 입력 필드에서 키보드 초점 위치를 시각적으로 또렷이 확인할 수 있게 표현하라는 뜻입니다.

정리: 입력 필드의 초점을 시각적으로 또렷이 표시하라. 이게 CP-404입니다.

2. 왜 초점 표시인가

폼을 채울 때 사용자(특히 키보드 사용자)는 여러 입력 필드 사이를 Tab으로 이동하며 값을 적습니다. 이때 ’지금 어느 필드에 초점(focus)이 있는지’를 시각적으로 알아야, 올바른 칸에 값을 적고 길을 잃지 않죠. CP-404는 이 초점 표시를 요구합니다.

초점 표시가 없거나 흐릴 때:

위치 상실 — 키보드로 Tab을 눌러 필드 간 이동하는데 — 초점 표시가 없으면, 사용자는 ‘내가 지금 어느 필드에 있는지’ 모릅니다. 엉뚱한 칸에 값을 적거나, 길을 잃죠. 폼이 길수록(여러 필드) 더 혼란스럽습니다.

연한 초점의 문제 — 초점 표시(보통 테두리 강조나 outline)가 있어도 — 너무 연하거나 약하면, 안 보이는 것과 마찬가지죠. 저시력 사용자·밝은 환경에서 특히요.

outline 제거 — 디자인을 깔끔하게 하려고 — outline: none으로 브라우저 기본 초점 표시를 없애고 대체 표시를 안 주면, 키보드 사용자가 초점을 전혀 못 봅니다. 가장 흔하고 치명적인 실수죠.

그래서 CP-404는 — 모든 입력 필드의 초점을 시각적으로 확인 가능하게 표현하라고 합니다:

또렷한 초점 표시 입력 필드에 초점이 가면 테두리 강조, focus ring(outline), 그림자 등으로 또렷이 표시 합니다. outline: none만 주고 끝내면 안 되죠. 없앴으면 더 나은 대체 표시를 줍니다.

충분한 대비 — 초점 표시가 — 인접 배경과 충분한 명도 대비(WCAG 2.4.11/2.4.13 focus appearance, 보통 3:1)로 또렷하게요. 연한 초점 표시 지양.

기본 상태와 구별 — 초점 상태가 — 기본 상태(CP-403의 경계)와 시각적으로 구별돼야, ’지금 여기 초점이 있다’를 알죠. 초점 시 테두리 색·두께 변화, focus ring 추가 등으로요.

모든 입력 필드. 원문이 ’모든 입력 필드’라 강조한 것처럼 — 일부 필드만이 아니라 폼의 모든 입력 요소(텍스트 입력·텍스트 영역·셀렉트·체크박스 등)에 초점 표시가 있어야 합니다. 한 필드라도 빠지면 — 거기서 키보드 사용자가 길을 잃죠.

키보드 접근성의 핵심. 초점 표시는 키보드 접근성(KWCAG 2.1.1, WCAG 2.4.7 Focus Visible)의 핵심입니다. 마우스 사용자는 클릭한 곳을 알지만 키보드 사용자는 초점 표시가 유일한 위치 단서죠. 그래서 초점 표시는 절대 없애면 안 되고, 또렷해야 합니다.

이 규칙은 텍스트 입력 필드의 ’초점 가시성’을 담당합니다 — 모든 입력 필드의 초점을 또렷이 표시해(404), 키보드 사용자가 자기 위치를 알고 올바른 칸에 입력하게 하죠. 입력 필드 경계 대비(CP-403)와 함께 — 입력칸이 보이고(403) 초점이 또렷한(404) 폼을 만듭니다.

정리하면 — 초점 표시가 없거나 흐리면 키보드 사용자가 어느 필드에 있는지 몰라 길을 잃으므로, 모든 입력 필드의 초점을 충분한 대비의 또렷한 표시로 시각적으로 확인 가능하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 표시 — 모든 입력 필드에 초점 시 또렷한 시각 표시가 있는가(outline 제거 안 됨).

충분한 대비 — 초점 표시가 인접 배경과 충분한 대비로 또렷한가.

기본과 구별 — 초점 상태가 기본 상태와 시각적으로 구별되는가.

개선 방향

모든 입력 필드에 또렷한 focus ring/테두리 강조(outline 제거 시 대체 표시).

초점 표시 충분한 대비(WCAG 2.4.13). 기본 상태와 구별되는 초점 스타일.

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

역할	책임
디자이너	초점 표시 스타일·대비 정의
퍼블리셔/개발	focus 스타일 구현
QA/접근성	키보드 초점 가시성 검증

기관 유형	CP-404 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 입력 사용 시)

웹접근성 의무 대상이며 텍스트 입력을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 입력 필드에 초점 시 또렷한 시각 표시가 있나요(outline 제거 안 됨)?

□ 초점 표시가 인접 배경과 충분한 대비로 또렷한가요?

□ 초점 상태가 기본 상태와 시각적으로 구별되나요?

❓ FAQ

Q1. outline을 없애면 안 되나요? 없애고 대체 표시를 안 주면 키보드 사용자가 초점을 전혀 못 봅니다. 가장 치명적 실수죠. 없앴으면 더 나은 대체 표시를 줍니다. Q2. 마우스 사용자에겐 초점 표시가 불필요하지 않나요? 키보드 사용자에겐 유일한 위치 단서입니다. :focus-visible 로 키보드 초점에만 표시하는 방법도 있죠. Q3. 왜 ‘모든’ 입력 필드인가요? 한 필드라도 초점 표시가 빠지면 거기서 키보드 사용자가 길을 잃습니다. 모든 입력 요소에 있어야 하죠.

6. 마무리

CP-404의 메시지:

지금 어느 칸에 있는지 — 모든 입력 필드의 초점을 시각적으로 또렷이 표시하라.

초점 표시가 없거나 흐리면 키보드 사용자가 어느 필드에 있는지 몰라 길을 잃습니다. 모든 입력 필드의 초점을 충분한 대비의 또렷한 표시로 보이게 하는 게 핵심이죠. 다음 편은 입력 필드의 스크린 리더 레이블입니다.

다음 편 예고 ▶ 「525. (CP-405) 스크린 리더 사용자가 텍스트 입력 필드의 용도를 확인할 수 있도록 , title, aria-label, aria-labelledby 중 1가지 방식으로 레이블을 제공하고 있다.」

ViewCheck는 모든 입력 필드의 초점이 시각적으로 확인 가능한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 입력 필드(Text input) 가이드 — https://www.krds.go.kr/html/site/component/component_40.html

WCAG 2.1 SC 2.4.7 Focus Visible — https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

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

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