맨 처음 키보드가 닿는 곳
이번 126편은 공식배너 그룹의 마지막, 건너뛰기 링크를 공식배너 이전에 두는 규칙입니다.
KRDS CP-006 — 건너뛰기 링크는 공식 배너 이전에 제공하고 있다.
0. 들어가며 — 순서가 만드는 접근성
이번 126편은 공식배너 그룹의 마지막, 건너뛰기 링크를 공식배너 이전에 두는 규칙입니다.
공식배너는 페이지 최상단에 옵니다(121편). 그런데 그보다도 앞에 와야 하는 것이 하나 있습니다 — ’건너뛰기 링크(Skip link)’입니다. 키보드·스크린리더 사용자가 반복되는 머리말을 건너뛰고 본문으로 바로 가게 하는 링크 인데, 이게 페이지의 가장 첫 요소여야 의미가 있죠. CP-006은 건너뛰기 링크를 공식배너보다 앞에 두라고 규정 합니다. 이번 편은 그 순서의 이유를 풀어냅니다.
1. 규칙 원문 — 공식배너 이전
CP-006 (컴포넌트 > 공식배너) “건너뛰기 링크는 공식 배너 이전에 제공하고 있다.”
건너뛰기 링크를 공식배너보다 먼저(앞에) 배치하라는 뜻입니다.
정리: 건너뛰기 링크는 공식배너 이전에 제공하라. 이게 CP-006입니다.
2. 건너뛰기 링크란, 왜 맨 앞인가
건너뛰기 링크(Skip link, ‘본문 바로가기’)는 키보드·스크린리더 사용자를 위한 접근성 장치입니다. 시각 사용자는 마우스로 본문을 바로 클릭하지만, 키보드 사용자는 Tab 키로 요소를 하나씩 거쳐야 합니다. 매 페이지마다 반복 되는 공식배너·헤더·메뉴를 다 거친 뒤에야 본문에 도달한다면, 페이지를 옮길 때마다 똑같은 머리말을 수십 번 Tab 해야 하죠. 매우 번거롭습니다.
건너뛰기 링크는 이 문제를 해결합니다 — 페이지를 열고 Tab을 처음 누르면 ‘본문 바로가기’ 링크가 나타나, 누르면 머리말을 모두 건너뛰고 본문으로 점프하죠. 그래서 이 링크는 페이지에서 키보드 포커스가 가장 먼저 닿는 요소여야 합니다. 본문 앞의 모든 것(공식배너 포함)을 건너뛰려면, 건너뛰기 링크 자신은 그 모든 것보다 앞에 있어야 하니까요.
CP-006이 ’공식배너 이전’을 콕 집은 이유가 여기 있습니다. 공식배너는 최상단(121편)이지만, 건너뛰기 링크는 공식배너보다도 앞 — 즉 페이지의 가장 첫 요소여야 합니다. 만약 건너뛰기 링크가 공식배너 뒤에 있으면, 사용자는 공식배너를 먼저 Tab 한 뒤에야 건너뛰기 링크를 만나게 돼, ’맨 처음부터 건너뛴다’는 목적이 약해지죠.
구조적으로는 <body>의 첫 자식이 건너뛰기 링크, 그다음이 공식배너입니다. 건너뛰기 링크는 평소엔 화면에 숨겨져 있다가(시각 사용자에겐 불필요) 키보드 포커스를 받으면 나타나는 방식이 표준입니다. ’DOM 순서 = 키보드 탐색 순서’라는 원리(레이아웃 편에서 다룬 읽기 순서)가 여기서도 작동합니다 — 가장 먼저 닿아야 할 것을 가장 앞에 두는 것이죠.
3. 점검 / 개선
무엇을 점검하나
첫 요소 여부 — 건너뛰기 링크가 페이지(<body>)의 첫 요소인가.
공식배너보다 앞 — 건너뛰기 링크가 공식배너 이전에 있는가.
포커스 노출 — 키보드 포커스 시 링크가 화면에 나타나는가.
Before / After
<!-- ✅ 건너뛰기 링크 → 공식배너 → 헤더 순서 --> <body> <a href="#main" class="skip-link">본문 바로가기</a> <div class="krds-masthead">대한민국 공식 전자정부 누리집입니다.</div> <header>...</header> <main id="main">...</main> </body>
4. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 퍼블리셔/개발 | 건너뛰기 링크를 body 첫 요소로 배치(공식배너 앞) |
| 접근성 담당 | 키보드 탐색 순서 검수 |
| 기관 유형 | CP-006 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 |
행정·공공기관 디지털 정부서비스 = 전부 해당. (건너뛰기 링크 자체는 별도 그룹 CP-024~032에서 더 자세히 다룸.)
5. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 건너뛰기 링크가 페이지의 첫 요소인가요?
□ 건너뛰기 링크가 공식배너보다 앞에 있나요?
□ 키보드 Tab 시 링크가 나타나나요?
❓ FAQ
Q1. 건너뛰기 링크가 뭔가요? 키보드·스크린리더 사용자가 반복 머리말을 건너뛰고 본문으로 바로 가는 ‘본문 바로가기’ 링크입니다. Q2. 공식배너가 최상단(121편)인데 그 앞이 가능한가요? 가능합니다. 공식배너는 ‘화면 시각상 최상단’, 건너뛰기 링크는 ’DOM·키보드 순서상 첫 요소’입니다. 건너뛰기 링크는 평소 숨겨져 화면엔 안 보이죠. Q3. KRDS를 채택하면 자동인가요? KRDS 표준 레이아웃은 건너뛰기 링크를 공식배너 앞에 배치합니다.
6. 마무리 — 공식배너 그룹을 마치며
CP-006의 메시지:
맨 처음 키보드가 닿는 곳 — 건너뛰기 링크는 공식배너보다도 앞, 페이지의 첫 요소다.
건너뛰기 링크는 머리말을 건너뛰는 장치라, 자신은 그 모든 것보다 앞에 있어야 합니다. 공식배너가 최상단이어도 건너뛰기 링크는 그보다 앞 — 페이지의 첫 요소죠. ’DOM 순서 = 키보드 순서’라는 원리의 적용입니다.
이로써 공식배너(Masthead) 그룹 6개 규칙(CP-001~006)을 마쳤습니다. 정부 사이트의 신원 증명이라는 한 컴포넌트에도 — 존재(121)·일관성(122)·절제(123)·불변성(124)·자격(125)·순서(126)라는 여섯 규칙이 촘촘히 얽혀 있었습니다.
다음 편부터는 운영기관 식별자(Identifier) 그룹 8개(CP-007~014)로 넘어갑니다. 공식배너가 ’정부 공식’을 알렸다면, 식별자는 ’어느 기관이 운영하는지’를 밝히는 컴포넌트입니다.
다음 편 예고 ▶ 「127. (CP-007) 식별자가 지나치게 주의를 끌지 않도록 표현하고 있다.」 — 운영기관 식별자 그룹 시작
ViewCheck는 건너뛰기 링크가 공식배너 이전(페이지 첫 요소)에 제공되는지를 진단합니다.
📚 참고 출처
KRDS 컴포넌트 — 공식배너(Masthead) / 건너뛰기 링크(Skip link) 가이드 — https://www.krds.go.kr/html/site/component/component_01.html
WCAG 2.1 SC 2.4.1 Bypass Blocks
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.