지금 어디에 초점이 있는지 보여라

KRDS CP-149 — 제공되는 모든 기능에 키보드 초점이 명확하게 표시되도록 하고 있다.

0. 들어가며 — 닿는데 어디 있는지 안 보이면

이번 269편은 구조화 목록의 모든 기능에 키보드 초점이 명확하게 표시되게 하라는 규칙입니다.

앞 편(CP-148)에서 모든 기능을 키보드로 실행 가능하게 했습니다. 그런데 키보드로 초점을 옮겨도, 지금 어느 요소에 초점이 있는지 시각적으로 안 보이면 사용자는 길을 잃죠. Tab을 눌렀는데 아무 변화가 안 보이면 ‘내가 지금 뭘 누르려는 거지?’ 헷갈립니다. CP-149는 초점 위치를 또렷이 표시(focus indicator)하라고 규정합니다. 키보드 접근성 3종 중 두 번째죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 키보드 초점 명확 표시

CP-149 (컴포넌트 > 구조화 목록) “제공되는 모든 기능에 키보드 초점이 명확하게 표시되도록 하고 있다.”

목록의 모든 기능 요소에 키보드 초점이 갔을 때, 그 초점 위치가 시각적으로 또렷이 보이게(테두리·외곽선 등) 표시하라는 뜻입니다.

정리: 키보드 초점이 어디 있는지 명확히 보이게 하라. 이게 CP-149입니다.

2. 왜 초점이 명확히 보여야 하나

키보드 사용자는 마우스 포인터 대신 초점(focus) 을 이동하며 조작합니다. Tab으로 요소 사이를 옮기고, 현재 초점이 있는 요소를 Enter/Space로 실행하죠. 그런데 이 조작이 가능하려면 — ‘지금 초점이 어디 있는지’ 시각적 으로 보여야 합니다. 초점 표시는 키보드 사용자의 ’마우스 커서’에 해당하죠. 커서가 안 보이는 마우스를 상상해 보면, 초점 표시 없는 키보드 조작이 얼마나 막막한지 알 수 있습니다.

초점 표시가 없거나 흐릿하면:

① 위치 상실. Tab을 눌러도 화면에 변화가 안 보이면, 사용자는 ’내 초점이 지금 어디 있지?’를 모릅니다. 몇 번 눌렀는지 세거나 추측해야 하죠. 특히 구조화 목록처럼 인터랙티브 요소가 많은 화면(도구 막대 + 항목마다 여러 버튼 + 페이지네이션)에서는, 초점이 안 보이면 수십 개 요소 사이에서 완전히 길을 잃습니다.

② 잘못된 실행. 초점 위치를 모른 채 Enter를 누르면, 의도와 다른 기능이 실행됩니다 — ’미리보기’를 누르려 했는데 ’삭제’가 실행되는 식이죠. 초점이 보여야 ’내가 지금 이 버튼에 있다’를 확인하고 안전하게 실행합니다.

그래서 CP-149는 초점을 명확하게 표시하라고 합니다. 표준 방식은 브라우저 기본 포커스 링(focus ring) — 초점 받은 요소 둘레의 외곽선(outline)입니다. 흔한 실수는 디자인상 ’지저분해 보인다’는 이유로 outline: none 으로 이걸 제거하고 대체 스타일을 안 주는 것이죠. 그러면 키보드 사용자에게 초점이 완전히 보이지 않게 됩니다 — 접근성을 심각하게 해치는 흔한 안티패턴입니다.

올바른 처리:

기본 포커스 링 유지 또는 명확한 대체 스타일 제공 — outline을 제거하더라도, 더 또렷한 테두리·배경· 그림자 등 대체 초점 표시를 줘야 합니다.

:focus-visible 활용 — 키보드로 초점 받을 때만 초점 링을 보이고 마우스 클릭 시엔 안 보이게 해, 디자인과 접근성을 양립시킬 수 있습니다.

충분한 대비·크기 — 초점 표시(테두리 등)가 배경과 충분한 명도 대비(비텍스트 3:1, WCAG SC 1.4.11)를 갖고, 충분히 두꺼워 또렷이 보여야 하죠. WCAG 2.2의 ‘Focus Appearance’(SC 2.4.13)는 초점 표시의 최소 크기· 대비까지 권장합니다.

가려짐 방지 — 초점 받은 요소가 고정 헤더·푸터 등에 가려지지 않아야 합니다(WCAG 2.2 SC 2.4.11 Focus Not Obscured).

이 규칙은 CP-148(키보드 실행)·CP-150(예측 작동)과 묶입니다 — 키보드로 닿고(148), 어디 있는지 보이고(149), 예측대로 작동(150)해야 키보드 사용자가 목록을 온전히 씁니다. 특히 구조화 목록은 요소가 많아 초점 가시성이 더욱 중요하죠.

3. 점검 / 개선

무엇을 점검하나

초점 표시 존재 — 모든 기능 요소에 초점 시 시각 표시가 보이는가.

outline 미제거 — outline: none만 하고 대체 스타일이 없는 곳이 없는가.

대비·가시성 — 초점 표시가 충분한 대비·두께로 또렷한가, 가려지지 않는가.

개선 방향

기본 포커스 링 유지 또는 :focus-visible로 명확한 대체 스타일 제공.

초점 표시 대비(3:1)·두께 확보. 고정 요소에 가려지지 않게.

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

역할	책임
디자이너	초점 표시 스타일(대비·두께) 정의
퍼블리셔/개발	포커스 링 유지·:focus-visible 구현

기관 유형	CP-149 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (구조화 목록 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 기능 요소에 초점 시 시각 표시가 보이나요?

□ outline: none만 하고 대체 스타일이 없는 곳이 없나요?

□ 초점 표시가 충분한 대비·두께로 또렷하고 가려지지 않나요?

❓ FAQ

Q1. 포커스 링이 디자인을 해치는데 지워도 되나요? 그냥 지우면 키보드 사용자가 위치를 못 봅니다. 대체 스타일을 주거나 :focus-visible로 키보드 때만 표시하세요. Q2. :focus-visible이 뭔가요? 키보드로 초점 받을 때만 초점 링을 보이고 마우스 클릭 땐 숨기는 CSS입니다. 디자인과 접근성을 양립시킵니다. Q3. 초점 표시도 대비 기준이 있나요? 네. 비텍스트 대비 3:1을 충족하고, WCAG 2.2는 최소 크기·가려짐 방지 까지 권장합니다.

6. 마무리

CP-149의 메시지:

지금 어디에 초점이 있는지 보여라 — 키보드 초점을 명확히 표시하라.

초점 표시는 키보드 사용자의 ’마우스 커서’입니다. 안 보이면 위치를 잃고 잘못된 기능을 실행하죠. 포커스 링을 유지하거나 :focus-visible로 명확한 대체 표시를 주고, 충분한 대비·두께로 또렷하게 해야 합니다. 요소가 많은 구조화 목록에서 특히 중요하죠. 다음 편은 기능의 예측 가능한 작동입니다.

다음 편 예고 ▶ 「270. (CP-150) 제공되는 모든 기능은 사용자가 예측 가능한 방식으로 작동되게 구현하고 있다.」

ViewCheck는 구조화 목록의 키보드 초점이 명확하게 표시되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 구조화 목록(Structured list) 가이드 — https://www.krds.go.kr/html/site/component/component_12.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컴포넌트,웹표준