화면도 가고 포커스도 가야

KRDS CP-053 — 건너뛰기 링크 실행 시 스크롤 동작과 함께 연결된 목적지 섹션으로 Focus 이벤트가 발생하도록 구현되어 있다.

0. 들어가며 — 건너뛰기 링크의 마무리

이번 173편은 건너뛰기 링크 그룹(CP-045~053)의 마지막, 실행 시 스크롤 + 포커스 이동을 모두 일으키는 규칙입니다.

건너뛰기 링크를 눌렀을 때, 화면만 스크롤되고 키보드 포커스는 그대로 머물면 — 시각 사용자에겐 본문이 보여도 키보드 사용자는 여전히 머리말에 갇혀 있게 됩니다. CP-053은 스크롤과 포커스 이동을 함께 일으키라고 규정하죠. 이것이 진짜 ’건너뛰기’를 완성합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 스크롤 + 포커스 이동

CP-053 (컴포넌트 > 건너뛰기 링크) “건너뛰기 링크 실행 시 스크롤 동작과 함께 연결된 목적지 섹션으로 Focus 이벤트가 발생하도록 구현되어 있다.”

건너뛰기 링크를 누르면 화면 스크롤뿐 아니라, 키보드 포커스도 목적지로 이동하게 구현하라는 뜻입니다.

정리: 건너뛰기 링크 실행 시 스크롤과 함께 목적지로 포커스가 이동하게 구현하라. 이게 CP-053, 건너뛰기 링크 그룹의 마지막입니다.

2. 왜 포커스 이동이 핵심인가

이건 건너뛰기 링크에서 가장 자주 잘못 구현되는 부분입니다. 그래서 그룹의 마지막에 핵심으로 다룹니다.

건너뛰기 링크(<a href="#main">)를 누르면, 브라우저는 기본적으로 해당 앵커(#main)로 화면을 스크롤 합니다. 시각 사용자에게는 본문이 화면에 나타나죠. 여기까지는 대부분 됩니다.

문제는 키보드 포커스입니다. 단순 앵커 점프만으로는, 화면은 스크롤돼도 키보드 포커스는 여전히 건너뛰기 링크(머리말)에 남아 있는 경우가 많습니다(특히 일부 브라우저). 그러면 키보드 사용자가 다음 Tab을 누르면 — 본문이 아니라 여전히 머리말의 다음 요소(메뉴 등)로 이동하죠. 화면은 본문인데 포커스는 머리말에 갇혀, ‘건너뛴’ 게 아니게 됩니다. 시각적으로만 건너뛰고, 키보드로는 안 건너뛴 반쪽짜리가 되는 것이죠.

CP-053은 이를 막습니다 — 건너뛰기 링크 실행 시 포커스(Focus 이벤트)도 목적지 섹션으로 명시적으로 이동 시켜야 합니다. 그래야 사용자가 본문에서 다음 Tab을 누르면 본문 안의 다음 요소로 이동하죠. 화면도 가고 포커스도 가야 진짜 건너뛰기입니다.

구현 방법은 — 목적지 요소(예: <main id="main">)에 tabindex="-1"을 부여하고, 건너뛰기 링크 클릭 시 JavaScript로 그 요소에 .focus()를 호출하는 것입니다. tabindex="-1"은 ‘평소엔 Tab 순서에 없지만 프로그램 으로 포커스는 받을 수 있게’ 하는 속성이죠. 이렇게 하면 스크롤(앵커 기본 동작) + 포커스 이동(.focus())이 함께 일어나, 키보드 포커스가 본문으로 확실히 넘어갑니다.

이 규칙이 건너뛰기 링크 그룹의 마지막을 장식하는 것은 적절합니다 — 앞선 8개 규칙(조건·위치·개수·목적지·초점)을 다 지켜도, 정작 실행 시 포커스가 안 옮겨지면 건너뛰기 링크가 작동하지 않으니까요. CP-053은 건너뛰기 링크의 ’실제 작동’을 완성하는 핵심 규칙입니다. WCAG 2.4.1·2.4.3(초점 순서)과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

스크롤 동작 — 실행 시 화면이 목적지로 스크롤되는가.

포커스 이동 — 실행 시 키보드 포커스가 목적지로 이동하는가.

다음 Tab — 실행 후 Tab을 누르면 본문 안 요소로 이동하는가(키보드 테스트).

Before / After

<!-- ✅ tabindex + focus 이동 --> <a href="#main" class="skip-link">본문 바로가기</a> <main id="main" tabindex="-1">본문</main> <script> // 앵커 점프 + 포커스 이동 (브라우저 기본 보강) document.querySelector('.skip-link').addEventListener('click', () => { document.getElementById('main').focus(); }); </script>

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

역할	책임
개발(프론트)	목적지 tabindex="-1" + 포커스 이동 구현
접근성 담당	실행 후 키보드 포커스 위치 검수

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

건너뛰기 링크를 제공하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 실행 시 화면이 목적지로 스크롤되나요?

□ 실행 시 키보드 포커스가 목적지로 이동하나요?

□ 실행 후 Tab을 누르면 본문 안 요소로 가나요?

❓ FAQ

Q1. 앵커 점프만으로 안 되나요? 브라우저에 따라 화면은 스크롤돼도 포커스가 머리말에 남습니다. tabindex + .focus()로 포커스를 명시적으로 옮겨야 합니다. Q2. tabindex=“-1”이 뭔가요? 평소엔 Tab 순서에 없지만 프로그램으로 포커스는 받을 수 있게 하는 속성입니다. 건너뛰기 목적지에 필요합니다. Q3. KRDS를 채택하면 자동인가요? 표준 건너뛰기 링크는 스크롤 + 포커스 이동을 함께 구현합니다.

6. 마무리 — 건너뛰기 링크 그룹을 마치며

CP-053의 메시지:

화면도 가고 포커스도 가야 — 스크롤만으론 반쪽, 포커스 이동까지 해야 진짜 건너뛰기다.

건너뛰기 링크 실행 시 화면 스크롤뿐 아니라 키보드 포커스도 목적지로 이동해야, 키보드 사용자가 본문에서 이어 탐색합니다. 포커스가 안 옮겨지면 시각적으로만 건너뛴 반쪽짜리죠. tabindex="-1" + .focus()로 완성하는, 건너뛰기 링크의 실제 작동을 보장하는 핵심 규칙입니다.

이로써 건너뛰기 링크(Skip link) 그룹 9개 규칙(CP-045~053)을 마쳤습니다. 조건(045)·보편성(046)·개수(047)· 순서(048)·목적지(049·050)·위치(051)·초점(052)·실행(053) — 작아 보이지만 키보드·스크린리더 사용자에게 결정적인 접근성 컴포넌트를 촘촘히 규정한 9개였습니다.

지금까지 공식배너(6)+식별자(8)+헤더(17)+푸터(13)+건너뛰기링크(9) = CP 53개를 마쳤습니다. 다음 편부터는 메인 메뉴(Main menu) 그룹 15개(CP-054~068)로 넘어갑니다. 사이트 내비게이션의 핵심입니다.

다음 편 예고 ▶ 「174. (CP-054) 메인 메뉴 그룹의 첫 규칙」 — 메인 메뉴(Main menu) 15개 규칙 시작

ViewCheck는 건너뛰기 링크 실행 시 스크롤과 포커스가 함께 이동하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.1 Bypass Blocks / 2.4.3 Focus Order

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

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