가장 먼저, 가장 위에
이번 149편은 건너뛰기 링크를 최상단에 배치하는 규칙입니다.
KRDS CP-029 — 건너뛰기 링크를 최상단에 배치하고 있다.
0. 들어가며 — 다시 강조되는 건너뛰기 링크
이번 149편은 건너뛰기 링크를 최상단에 배치하는 규칙입니다.
건너뛰기 링크는 앞서 여러 번 등장했습니다 — CP-006(공식배너 이전), CP-018(헤더에서 가장 먼저). CP-029는 이를 다시 한번 못 박습니다 — 건너뛰기 링크는 최상단에 와야 한다고요. 그만큼 중요하고, 위반이 잦은 접근성 핵심 규칙이기 때문이죠. 이번 편을 풀어냅니다.
1. 규칙 원문 — 최상단 배치
CP-029 (컴포넌트 > 헤더) “건너뛰기 링크를 최상단에 배치하고 있다.”
건너뛰기 링크(본문 바로가기)를 페이지·헤더의 가장 위(첫 요소)에 두라는 뜻입니다.
정리: 건너뛰기 링크를 최상단에 배치하라. 이게 CP-029입니다.
2. 왜 다시, 최상단을 강조하나
건너뛰기 링크(Skip link, ‘본문 바로가기’)는 키보드·스크린리더 사용자가 반복되는 머리말(공식배너·헤더·메뉴)을 건너뛰고 본문으로 바로 가게 하는 접근성 장치입니다(CP-006). 이 링크가 제 역할을 하려면 페이지에서 키보드 포커스가 가장 먼저 닿는 요소여야 하죠.
CP-029가 이를 ’최상단’으로 재강조하는 이유는 — 이 규칙이 실무에서 가장 자주 누락·위반되는 접근성 항목 중 하나이기 때문입니다. 많은 사이트가 건너뛰기 링크를 아예 안 넣거나, 넣더라도 헤더 중간·끝에 두어 효과를 잃습니다. 건너뛰기 링크가 공식배너·로고 뒤에 있으면, 사용자는 그것들을 먼저 Tab 한 뒤에야 건너뛰기 링크를 만나, ’맨 처음부터 건너뛴다’는 목적이 약해지죠.
그래서 KRDS는 건너뛰기 링크의 위치를 여러 규칙에서 반복 강조합니다 — CP-006(공식배너 이전), CP-018(헤더에서 가장 먼저), CP-029(최상단). 이들은 같은 메시지를 각도를 달리해 못 박는 것입니다 — 건너뛰기 링크는 무조건 페이지의 첫 요소(최상단)여야 한다. DOM 구조상 <body>의 첫 자식이고, 키보드 Tab을 처음 누르면 가장 먼저 잡혀야 합니다.
또 ‘배치’에는 시각적 노출도 포함됩니다. 건너뛰기 링크는 평소 화면에 숨겨져 있다가(시각 사용자에겐 불필요), 키보드 포커스를 받으면 화면 최상단에 나타나야 합니다. 숨긴 채 포커스 시에도 안 보이면 — 키보드 사용자가 ’지금 건너뛰기 링크에 포커스가 있다’를 알 수 없어 무용지물이죠. 그래서 최상단에 ’구조적으로도, 포커스 시 시각적으로도’ 위치해야 합니다. 이 규칙은 KWCAG ‘반복 영역 건너뛰기’ 항목과 직결됩니다.
3. 점검 / 개선
무엇을 점검하나
최상단 구조 — 건너뛰기 링크가 페이지 첫 요소인가.
포커스 노출 — 키보드 포커스 시 화면 최상단에 나타나는가.
존재 여부 — 건너뛰기 링크 자체가 누락되지 않았는가.
Before / After
/* ✅ 평소 숨김, 포커스 시 최상단 노출 */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0; top: 0; z-index: 9999; }
4. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 퍼블리셔/개발 | 건너뛰기 링크를 최상단에 배치 + 포커스 노출 구현 |
| 접근성 담당 | 키보드 탐색 검수 |
| 기관 유형 | CP-029 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 |
행정·공공기관 디지털 정부서비스 = 전부 해당. (KWCAG ‘건너뛰기 링크’ 직결.)
5. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 건너뛰기 링크가 페이지 첫 요소인가요?
□ 키보드 포커스 시 화면 최상단에 나타나나요?
□ 건너뛰기 링크가 누락되지 않았나요?
❓ FAQ
Q1. CP-006·018과 중복 아닌가요? 같은 메시지를 강조하는 것입니다. 그만큼 자주 누락돼, 여러 규칙에서 반복 못 박습니다. Q2. 화면에 안 보이는데 괜찮나요? 평소엔 숨기되, 키보드 포커스 시 반드시 나타나야 합니다. 포커스 시에도 안 보이면 무용지물입니다. Q3. KRDS를 채택하면 자동인가요? 표준 레이아웃은 건너뛰기 링크를 최상단에 배치합니다.
6. 마무리
CP-029의 메시지:
가장 먼저, 가장 위에 — 건너뛰기 링크는 페이지의 첫 요소이자 자주 누락되는 접근성 핵심이다.
건너뛰기 링크는 머리말을 건너뛰는 장치라 페이지 첫 요소(최상단)여야 합니다. 실무에서 자주 누락돼 CP-006·018· 029로 반복 강조되죠. 구조적으로 첫 요소이고, 포커스 시 시각적으로도 최상단에 나타나야 합니다.
다음 편은 헤더 이미지 로고의 대체 텍스트를 다룹니다. CP-030 — “이미지 로고를 사용하는 경우 스크린리더를 위한 대체 텍스트를 제공한다.”
다음 편 예고 ▶ 「150. (CP-030) 이미지 로고를 사용하는 경우 스크린 리더를 위한 대체 텍스트를 제공하고 있다.」
ViewCheck는 건너뛰기 링크가 최상단에 배치되고 포커스 시 노출되는지를 진단합니다.
📚 참고 출처
KRDS 컴포넌트 — 헤더(Header) / 건너뛰기 링크(Skip link) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html
WCAG 2.1 SC 2.4.1 Bypass Blocks / KWCAG 반복 영역 건너뛰기
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.