눌리는 태그엔 또렷한 초점선

KRDS CP-309 — 대화형 태그가 초점을 가진 상태일 때, 태그에 인접 배경과 3:1 이상의 명도 대비를 갖는 윤곽선을 명확하게 표시하고 있다.

0. 들어가며 — 키보드로 태그를 누를 때

이번 429편은 대화형 태그가 초점을 가졌을 때, 인접 배경과 3:1 이상 대비의 윤곽선을 명확히 표시하라는 규칙입니다.

CP-307에서 가른 ‘대화형 태그’(누르면 동작)는 — 키보드로도 조작할 수 있어야 하죠. 그런데 키보드로 태그에 초점이 가도, 그 초점 표시(윤곽선)가 안 보이면 — 키보드 사용자는 ‘지금 어느 태그에 있는지’ 모릅니다. CP-309는 대화형 태그의 초점 윤곽선을 명확한 대비로 표시하라고 규정합니다. 버튼 CP-274, 라디오 CP-286의 태그 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 초점 윤곽선 대비 3:1 이상

CP-309 (컴포넌트 > 태그) “대화형 태그가 초점을 가진 상태일 때, 태그에 인접 배경과 3:1 이상의 명도 대비를 갖는 윤곽선을 명확하게 표시하고 있다.”

대화형 태그에 키보드 초점이 갔을 때, 인접 배경과 3:1 이상 대비되는 윤곽선(focus indicator)을 또렷이 표시하라는 뜻입니다.

정리: 대화형 태그 초점 시, 3:1 이상 대비의 윤곽선을 명확히 표시하라. 이게 CP-309입니다.

2. 왜 초점 윤곽선인가

대화형 태그(필터·선택·삭제 태그)는 버튼·링크처럼 조작 가능한 컨트롤입니다(CP-307). 그래서 키보드로도 조작할 수 있어야 하죠(키보드 접근성, KWCAG 2.1.1). 키보드 사용자는 Tab으로 대화형 태그에 도달하고 Enter/ Space로 실행합니다. 이때 ’지금 어느 태그에 초점이 있는지’를 시각적으로 알아야, 길을 잃지 않죠.

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

위치 상실 — 키보드로 태그들 사이를 이동하는데 — 초점 표시가 없으면, 사용자는 ‘내가 지금 어느 태그에 있는지’ 모릅니다. 엉뚱한 태그를 실행하거나, 길을 잃죠.

연한 윤곽선의 문제 — 초점 윤곽선이 있어도 — 배경과 대비가 낮아 흐릿하면(연한 색), 안 보이는 것과 마찬가지 입니다. 저시력 사용자·밝은 환경에서 특히요.

그래서 CP-309는 — 대화형 태그의 초점 윤곽선을 명확한 대비로 표시하라고 합니다:

윤곽선 표시 — 대화형 태그에 초점이 가면 — 태그 둘레에 윤곽선(outline/focus ring)을 또렷이 표시합니다. outline: none으로 없애면 안 되죠(버튼 CP-274 반복).

3:1 이상 대비 — 그 윤곽선이 — 인접 배경과 명도 대비 3:1 이상이어야 합니다. 윤곽선이 배경과 충분히 구별돼 또렷이 보이게요. 이는 WCAG 2.4.11/2.4.13(Focus Appearance) 와 비텍스트 대비(1.4.11) 정신이죠.

명확한 표시 — 윤곽선이 — 충분한 두께·크기로 분명히 보이게. 너무 가늘거나 태그에 가려지면 안 됩니다.

비대화형 태그는 해당 없음. 이 규칙은 대화형 태그에만 적용됩니다. 비대화형 태그(정보 표시)는 조작 대상이 아니라 초점을 받지 않으니, 초점 윤곽선이 필요 없죠. CP-307에서 둘을 가른 덕분에 대화형에만 이 규칙을 적용합니다.

초점 vs 호버. 초점(키보드)과 호버(마우스)는 다릅니다 — 호버는 마우스 올렸을 때, 초점은 키보드로 도달했을 때죠. CP-309는 초점(키보드 접근성)을 다룹니다. 호버 스타일이 있어도 — 키보드 초점 윤곽선은 별도로 명확해야 합니다(마우스 없는 사용자를 위해).

이 규칙은 대화형 태그의 ’키보드 운용성’을 담당합니다 — 누를 수 있는 태그(307)에 키보드로 도달했을 때 어디 있는지 또렷이 보여(309), 키보드 사용자가 태그를 안전하게 조작하게 하죠. 접근가능한 이름·상태(CP-310)와 함께 대화형 태그의 접근성을 완성합니다.

정리하면 — 대화형 태그는 키보드로 조작되는데 초점 표시가 흐리면 사용자가 위치를 잃으므로, 초점 시 인접 배경과 3:1 이상 대비되는 윤곽선을 명확히 표시해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 윤곽선 — 대화형 태그에 초점 시 윤곽선이 표시되는가(outline 제거 안 됨).

3:1 대비 — 그 윤곽선이 인접 배경과 명도 대비 3:1 이상인가.

명확성 — 윤곽선이 충분한 두께로 또렷이 보이는가.

개선 방향

대화형 태그에 명확한 focus outline 부여(제거 금지). 배경과 3:1 이상 대비 색.

윤곽선 두께·크기 충분히. 키보드 단독 탐색으로 검증.

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

역할	책임
디자이너	초점 윤곽선 스타일·대비 정의
퍼블리셔/개발	focus 스타일 구현
QA	키보드 초점 가시성 테스트

기관 유형	CP-309 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (대화형 태그 사용 시)

필터·선택 등 대화형 태그를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 대화형 태그에 초점 시 윤곽선이 표시되나요(outline 제거 안 됨)?

□ 그 윤곽선이 인접 배경과 3:1 이상 대비인가요?

□ 윤곽선이 충분한 두께로 또렷이 보이나요?

❓ FAQ

Q1. 비대화형 태그도 초점 윤곽선이 필요한가요? 아닙니다. 정보 표시용 비대화형 태그는 초점을 받지 않아 필요 없습니다. 대화형 태그에만 적용되죠. Q2. 호버 스타일이 있으면 충분한가요? 아닙니다. 호버는 마우스용입니다. 키보드 초점 윤곽선이 별도로 명확해야 키보드 사용자가 위치를 알죠. Q3. 왜 3:1인가요? 초점 윤곽선은 비텍스트 시각 요소라 인접 배경과 3:1 이상 대비여야 또렷이 보입니다(WCAG focus appearance).

6. 마무리

CP-309의 메시지:

눌리는 태그엔 또렷한 초점선 — 대화형 태그 초점 시 3:1 이상 대비 윤곽선을.

대화형 태그는 키보드로 조작되는데 초점 표시가 흐리면 사용자가 위치를 잃습니다. 초점 시 인접 배경과 3:1 이상 대비되는 윤곽선을 명확히 표시하는 게 핵심이죠. 다음 편은 대화형 태그의 접근가능한 이름·상태입니다.

다음 편 예고 ▶ 「430. (CP-310) 태그를 실행하였을 때 어떤 동작이 발생하는지 예측할 수 있도록 용도에 적합한 접근 가능한 이름이나 상태 정보를 제공한다.」

ViewCheck는 대화형 태그의 초점 윤곽선 대비를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

WCAG 2.2 SC 2.4.13 Focus Appearance — https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

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

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