맨 앞에, 단 예외는 있다
이번 171편은 건너뛰기 링크 목록을 웹 문서의 첫 요소로 두되, 쿠키 배너·모달은 예외로 하는 규칙입니다.
KRDS CP-051 — 쿠키 배너, 화면의 맥락을 가린 모달이 제공되는 경우를 제외하고 건너뛰기 링크 목록은 웹 문서의 가장 첫 요소로 제공하고 있다.
0. 들어가며 — 원칙과 예외
이번 171편은 건너뛰기 링크 목록을 웹 문서의 첫 요소로 두되, 쿠키 배너·모달은 예외로 하는 규칙입니다.
건너뛰기 링크는 첫 요소여야 한다고 여러 번 강조했죠(CP-006·029). CP-051은 이를 재확인하면서, 합리적 예외 를 명시합니다 — 쿠키 동의 배너나 화면을 가린 모달이 있을 땐 그것이 먼저일 수 있다고요. 원칙과 예외를 함께 다룹니다. 이번 편을 풀어냅니다.
1. 규칙 원문 — 첫 요소(예외 명시)
CP-051 (컴포넌트 > 건너뛰기 링크) “쿠키 배너, 화면의 맥락을 가린 모달이 제공되는 경우를 제외하고 건너뛰기 링크 목록은 웹 문서의 가장 첫 요소로 제공하고 있다.”
건너뛰기 링크를 문서의 첫 요소로 두되, 쿠키 배너·모달이 있을 때는 예외로 한다는 뜻입니다.
정리: 건너뛰기 링크는 웹 문서의 첫 요소로 제공하라(단, 쿠키 배너·모달 제외). 이게 CP-051입니다.
2. 원칙: 첫 요소, 예외: 쿠키 배너·모달
원칙 — 첫 요소
건너뛰기 링크는 키보드 포커스가 가장 먼저 닿아야 제 역할을 합니다(CP-029). 그래서 웹 문서(<body>)의 가장 첫 요소로 두는 것이 기본이죠. Tab을 처음 누르면 건너뛰기 링크가 잡혀, 사용자가 즉시 반복 영역을 건너뛸 수 있습니다.
예외 — 쿠키 배너, 맥락을 가린 모달
그런데 두 가지 예외가 있습니다.
① 쿠키 배너 — “이 사이트는 쿠키를 사용합니다 [동의]” 같은 배너입니다. 법적·정책적으로 사용자가 사이트를 이용하기 전에 먼저 처리해야 하는 경우가 있죠. 이런 쿠키 동의 배너는 사용자의 즉각적 결정을 요구하므로, 건너뛰기 링크보다 먼저 포커스가 갈 수 있습니다.
② 화면의 맥락을 가린 모달 — 페이지 위에 떠서 화면 전체를 가리는 모달(중요 공지, 필수 입력 등)입니다. 이런 모달은 ’지금 이걸 처리해야 다음으로 갈 수 있다’는 성격이라(포커스 트랩), 모달이 떠 있는 동안은 모달 안의 요소에 포커스가 갇히는 게 맞죠(모달 접근성). 그래서 모달이 있을 땐 건너뛰기 링크보다 모달이 우선입니다.
이 예외의 논리는 — ’사용자가 페이지를 이용하기 전에 반드시 처리해야 하는 것’은 건너뛰기 링크보다 우선 이라는 것입니다. 쿠키 동의·필수 모달은 그 자체가 ’먼저 해결할 관문’이라, 건너뛰기 링크보다 앞서는 게 합리적 이죠. 모달을 닫거나 쿠키를 처리한 뒤에는, 건너뛰기 링크가 다시 첫 요소로서 작동합니다.
CP-051은 접근성 규칙이 ’맹목적 원칙’이 아니라 ’맥락을 고려한 합리적 규칙’임을 보여줍니다 — 건너뛰기 링크는 첫 요소가 원칙이지만, 더 우선할 것(필수 관문)이 있을 땐 예외를 인정하는 것이죠. 단, 예외는 ’쿠키 배너·맥락을 가린 모달’로 한정됩니다. 그 외에는 건너뛰기 링크가 무조건 첫 요소여야 합니다.
3. 점검 / 개선
무엇을 점검하나
첫 요소 원칙 — 일반 상황에서 건너뛰기 링크가 문서 첫 요소인가.
예외 적정 — 쿠키 배너·모달이 있을 때만 그것이 우선인가.
모달 처리 후 — 모달·쿠키 처리 후 건너뛰기 링크가 작동하는가.
4. 누가 담당하나 / 우리 사이트에 해당될까?
| 역할 | 책임 |
|---|---|
| 퍼블리셔/개발 | 건너뛰기 링크 첫 요소 배치 + 쿠키/모달 예외 처리 |
| 접근성 담당 | 포커스 순서·예외 검수 |
| 기관 유형 | CP-051 적용 |
|---|---|
| 중앙행정기관(대표·운영) / 공공기관 / 지자체 | ✅ 필수 (건너뛰기 링크 제공 시) |
건너뛰기 링크를 제공하는 사이트 = 해당.
5. 30초 자가진단 + FAQ
✅ 30초 자가진단
□ 일반 상황에서 건너뛰기 링크가 문서 첫 요소인가요?
□ 쿠키 배너·모달이 있을 때만 그것이 우선인가요?
□ 모달·쿠키 처리 후 건너뛰기 링크가 작동하나요?
❓ FAQ
Q1. 왜 쿠키 배너가 예외인가요? 쿠키 동의는 사용자가 사이트 이용 전 먼저 처리해야 하는 관문이라, 건너뛰기 링크보다 우선할 수 있습니다. Q2. 모든 모달이 예외인가요? ‘화면의 맥락을 가린’(전체를 가린 필수) 모달입니다. 일반 모달은 포커스 트랩 원리를 따릅니다. Q3. KRDS를 채택하면 자동인가요? 표준은 건너뛰기 링크 첫 요소 + 합리적 예외 처리를 안내합니다.
6. 마무리
CP-051의 메시지:
맨 앞에, 단 예외는 있다 — 건너뛰기 링크는 첫 요소가 원칙, 쿠키 배너·필수 모달은 먼저 처리할 관문.
건너뛰기 링크는 문서 첫 요소가 원칙이지만, 쿠키 동의 배너·맥락을 가린 모달처럼 ’먼저 처리할 관문’이 있을 땐 예외입니다. 접근성 규칙이 맥락을 고려한 합리적 규칙임을 보여주죠. 처리 후엔 건너뛰기 링크가 다시 작동합니다.
다음 편은 건너뛰기 링크의 초점 표시를 다룹니다. CP-052 — “건너뛰기 링크의 초점이 명확하게 구분되도록 표현한다.”
다음 편 예고 ▶ 「172. (CP-052) 건너뛰기 링크의 초점이 명확하게 구분되도록 표현하고 있다.」
ViewCheck는 건너뛰기 링크가 첫 요소로 제공되는지(예외 포함)를 진단합니다.
📚 참고 출처
KRDS 컴포넌트 — 건너뛰기 링크(Skip link) 가이드 — https://www.krds.go.kr/html/site/component/component_05.html
KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준
KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준
관련 글
다음 호는 언제?
이번 846편은 간행물 자료의 발행 주기 정보를 본문의 부제목이나 별도 안내 영역에 제공하라는 규칙입니다. 그리고 이 편이 — 846 규칙 완전 분해 시리즈의 마지막 한 편입니다.
방대한 자료를 효율적으로
이번 845편은 목록에 필터링, 정렬 방식, 상세 검색(기간, 자료 유형 등) 기능을 제공하여 정보를 효과적으로 조회하라는 규칙입니다. [정책 자료 탐색] 서브섹션의 시작이죠.
적힌 대로 가야 한다
이번 844편은 모든 링크는 실행하였을 때, 링크 레이블에 명시된 적절한 화면으로 이동하라는 규칙입니다.