포커스가 보여야 누른다

KRDS CP-052 — 건너뛰기 링크의 초점이 명확하게 구분되도록 표현하고 있다.

0. 들어가며 — 숨어 있다 나타나는 링크

이번 172편은 건너뛰기 링크의 초점(포커스)이 명확히 구분되게 표현하는 규칙입니다.

건너뛰기 링크는 평소 화면에 숨어 있다가, 키보드 포커스를 받으면 나타납니다(CP-029). 그런데 나타날 때 초점이 흐릿하면 — 사용자는 ’지금 건너뛰기 링크에 포커스가 있다’를 인지 못해 쓰지 못하죠. CP-052는 포커스를 명확히 표시하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 초점 명확 구분

CP-052 (컴포넌트 > 건너뛰기 링크) “건너뛰기 링크의 초점이 명확하게 구분되도록 표현하고 있다.”

건너뛰기 링크에 포커스가 갔을 때, 그 초점이 눈에 명확히 보이게 표현하라는 뜻입니다.

정리: 건너뛰기 링크의 초점이 명확하게 구분되도록 표현하라. 이게 CP-052입니다.

2. 왜 초점 표시가 중요한가

건너뛰기 링크는 키보드 사용자를 위한 장치입니다. 키보드 사용자는 마우스 없이 Tab으로 요소를 이동하므로, ’지금 어느 요소에 포커스가 있는지’를 시각적 초점 표시(focus indicator) 로 알 수 있어야 하죠. 초점 표시가 없거나 흐릿하면, 사용자는 자기가 어디 있는지 몰라 길을 잃습니다.

건너뛰기 링크는 특히 까다롭습니다 — 평소엔 화면에서 숨겨져 있다가(시각 사용자에겐 불필요), 키보드 포커스를 받는 순간 나타나는 구조니까요(CP-029). 이때 ’나타나는 것’만으로는 부족하고, 나타난 링크의 초점이 또렷이 보여야 합니다. 페이지를 열고 Tab을 처음 눌렀을 때, 건너뛰기 링크가 화면 최상단에 또렷하게(테두리·배경 강조 등) 나타나야 — 사용자가 “아, 본문 바로가기 링크에 포커스가 있구나, 누르면 본문으로 가겠구나”를 알고 Enter로 실행하죠.

초점 표시 방법은 일반적인 포커스 인디케이터와 같습니다 — 테두리(outline), 배경색 변화, 명확한 색 대비 등 입니다(DS 선명한 화면 모드 편의 focus 관련 규칙, WCAG 2.4.7 Focus Visible과 연결). 건너뛰기 링크가 나타날 때 충분한 대비와 명확한 경계로 ’여기 포커스가 있다’를 분명히 해야 합니다. 작거나 흐릿하거나 배경과 구분 안 되면 안 되죠.

이 규칙이 중요한 이유는 — 앞선 규칙들(첫 요소 배치, 목적지 설정 등)을 다 지켜도, 정작 포커스가 안 보이면 사용자가 건너뛰기 링크의 존재를 인지하지 못해 무용지물이 되기 때문입니다. ‘보여야 쓴다’는 기본이죠. KWCAG ’초점 이동과 표시’ 항목과 직결됩니다.

다음 편(CP-053)은 건너뛰기 링크를 실행했을 때의 동작(스크롤 + 포커스 이동)을 다룹니다. CP-052(초점이 보임)와 CP-053(실행 시 동작)이 함께 건너뛰기 링크의 ’인지-실행’을 완성하죠.

3. 점검 / 개선

무엇을 점검하나

포커스 노출 — Tab 시 건너뛰기 링크가 화면에 나타나는가.

초점 명확 — 나타난 링크의 초점이 또렷이 구분되는가(테두리·대비).

대비 충분 — 초점 표시가 배경과 충분히 대비되는가.

Before / After

/* ✅ 포커스 시 명확한 초점 표시 */ .skip-link:focus { left: 0; top: 0; background: #fff; color: #000; outline: 3px solid #1a73e8; /* 명확한 초점 */ padding: 12px; }

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

역할	책임
퍼블리셔/개발	건너뛰기 링크 포커스 스타일(명확한 초점) 구현
접근성 담당	키보드 포커스 가시성 검수

기관 유형	CP-052 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (건너뛰기 링크 제공 시)

건너뛰기 링크를 제공하는 사이트 = 해당. (KWCAG 초점 표시 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ Tab 시 건너뛰기 링크가 화면에 나타나나요?

□ 나타난 링크의 초점이 또렷이 구분되나요?

□ 초점 표시가 배경과 충분히 대비되나요?

❓ FAQ

Q1. 평소 숨기는데 초점은 어떻게 보이나요? 평소 숨기되, 포커스 시 화면 최상단에 또렷한 스타일(테두리·배경) 로 나타나게 합니다. Q2. outline을 없애면 안 되나요? 절대 안 됩니다. outline:none은 초점을 안 보이게 해 키보드 사용자가 길을 잃습니다. 명확한 초점이 필수입니다. Q3. KRDS를 채택하면 자동인가요? 표준 건너뛰기 링크는 명확한 포커스 스타일을 제공합니다.

6. 마무리

CP-052의 메시지:

포커스가 보여야 누른다 — 숨어 있다 나타나는 건너뛰기 링크의 초점을 또렷이.

건너뛰기 링크는 포커스 시 나타나는데, 그 초점이 또렷이 보여야 사용자가 인지하고 실행합니다. 테두리·대비로 명확한 초점을 표시해야 하죠. 앞선 규칙을 다 지켜도 초점이 안 보이면 무용지물입니다. ’보여야 쓴다’는 기본 입니다.

다음 편은 건너뛰기 링크 그룹의 마지막, 실행 시 동작을 다룹니다. CP-053 — “건너뛰기 링크 실행 시 스크롤과 함께 목적지로 포커스가 이동하게 구현한다.”

다음 편 예고 ▶ 「173. (CP-053) 건너뛰기 링크 실행 시 스크롤 동작과 함께 연결된 목적지 섹션으로 Focus 이벤트가 발생하도록 구현되어 있다.」 — 건너뛰기 링크 그룹 마지막

ViewCheck는 건너뛰기 링크의 초점이 명확히 구분되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 건너뛰기 링크(Skip link) 가이드 — https://www.krds.go.kr/html/site/component/component_05.html

WCAG 2.1 SC 2.4.7 Focus Visible / KWCAG 초점 이동과 표시

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

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