건너뛴 곳에 또 반복이 있으면

KRDS CP-049 — 건너뛰기 링크의 목적지에 반복되는 콘텐츠 영역이 포함되지 않게 사용하고 있다.

0. 들어가며 — 건너뛰었더니 또 메뉴?

이번 169편은 건너뛰기 링크의 목적지에 반복 콘텐츠가 포함되지 않게 하는 규칙입니다.

건너뛰기 링크를 눌렀더니, 도착한 곳에 또 반복되는 메뉴·머리말이 있다면? 건너뛴 의미가 없죠. CP-049는 건너뛰기 링크가 도착하는 지점(목적지)에 반복 콘텐츠가 없어야 한다고 규정합니다. 제대로 ‘건너뛴’ 곳으로 가야 한다는 것이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 반복 콘텐츠 미포함

CP-049 (컴포넌트 > 건너뛰기 링크) “건너뛰기 링크의 목적지에 반복되는 콘텐츠 영역이 포함되지 않게 사용하고 있다.”

건너뛰기 링크가 도착하는 지점에 반복되는 머리말·메뉴 영역이 없게 하라는 뜻입니다.

정리: 건너뛰기 링크 목적지에 반복 콘텐츠가 포함되지 않게 하라. 이게 CP-049입니다.

2. 왜 목적지가 순수해야 하나

건너뛰기 링크의 목적은 ’반복되는 콘텐츠(메뉴·머리말)를 건너뛰고, 그 페이지의 고유한 본문으로 가는 것’입니다. 사용자가 “본문 바로가기”를 누르면, 반복 영역을 모두 지나 진짜 본문에 도착해야 하죠.

그런데 건너뛰기 링크의 목적지(도착 지점)가 잘못 설정되면 — 건너뛰었는데도 도착한 곳에 또 반복 콘텐츠가 있는 황당한 상황이 생깁니다. 예를 들어, “본문 바로가기”를 눌렀는데 도착한 곳이 본문 시작이 아니라 ’본문 위쪽에 있는 또 다른 메뉴·배너·사이드 영역’이면 — 사용자는 그 반복 영역을 또 Tab으로 거쳐야 본문에 도달하죠. 건너뛴 보람이 없습니다.

CP-049는 이를 막습니다 — 건너뛰기 링크의 목적지(href="#main"의 #main 위치)는 반복 영역을 모두 지난, 진짜 고유 콘텐츠가 시작되는 지점이어야 합니다. 목적지 안에 반복되는 메뉴·머리말이 포함되면 안 되죠.

실무에서 이 실수가 생기는 이유는 — 목적지 앵커(id)를 본문 컨테이너의 위쪽(반복 요소가 포함된 영역)에 잘못 다는 것입니다. 예를 들어 본문 래퍼에 사이드 메뉴·페이지 유틸리티가 함께 들어 있는데 그 래퍼 시작에 앵커를 달면, 건너뛰기 후에도 사이드 메뉴 등을 거쳐야 하죠. 정확히는 고유 본문 콘텐츠가 시작되는 정확한 지점에 앵커를 달아야 합니다(<main>의 시작 또는 <h1> 등).

다음 편(CP-050)은 이를 더 구체화합니다 — ‘본문 바로가기’의 목적지에 사이드 메뉴·브레드크럼·페이지 유틸리티가 포함되지 않아야 한다고요. CP-049(반복 콘텐츠 일반)와 CP-050(구체적 반복 요소)이 함께 ’건너뛰기 목적지의 순수성’을 보장합니다. 건너뛰기 링크가 ’진짜 건너뛰게’ 만드는 핵심이죠.

3. 점검 / 개선

무엇을 점검하나

목적지 순수 — 건너뛰기 후 도착 지점에 반복 메뉴·머리말이 없는가.

앵커 위치 — 앵커가 고유 본문 시작 지점에 정확히 있는가.

실제 테스트 — 건너뛰기 후 바로 본문이 나오는가(키보드 테스트).

Before / After

<!-- ❌ 목적지에 반복 영역 포함 --> <a href="#wrap">본문 바로가기</a> <div id="wrap"><nav>사이드메뉴</nav><main>본문</main></div> <!-- ✅ 목적지가 고유 본문 시작 --> <a href="#main">본문 바로가기</a> <main id="main" tabindex="-1">본문</main>

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

역할	책임
퍼블리셔/개발	건너뛰기 목적지 앵커를 고유 본문 시작에 정확히 설정
접근성 담당	건너뛰기 후 도착 지점 검수

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 건너뛰기 후 도착 지점에 반복 메뉴·머리말이 없나요?

□ 앵커가 고유 본문 시작 지점에 있나요?

□ 건너뛰기 후 바로 본문이 나오나요?

❓ FAQ

Q1. 목적지를 어디에 두나요? 반복 영역을 모두 지난, 고유 본문이 시작되는 지점(<main> 시작 등)에 둡니다. Q2. 왜 이런 실수가 생기나요? 본문 래퍼에 사이드 메뉴 등이 함께 들어 있는데 그 래퍼에 앵커를 달면 반복 영역이 포함됩니다. 정확한 본문 시작에 달아야 합니다. Q3. KRDS를 채택하면 자동인가요? 표준은 목적지를 본문 시작에 정확히 설정합니다.

6. 마무리

CP-049의 메시지:

건너뛴 곳에 또 반복이 있으면 — 목적지는 반복 영역을 모두 지난 고유 본문 시작이어야 한다.

건너뛰기 링크의 목적지에 반복 메뉴·머리말이 포함되면 건너뛴 의미가 없습니다. 앵커를 고유 본문이 시작되는 정확한 지점에 달아, 건너뛰기 후 바로 본문이 나오게 해야 하죠. CP-050과 함께 목적지의 순수성을 보장합니다.

다음 편은 본문 바로가기 목적지의 구체적 조건을 다룹니다. CP-050 — “본문 바로가기 목적지에 사이드 메뉴·브레드 크럼·유틸리티가 포함되지 않게 한다.”

다음 편 예고 ▶ 「170. (CP-050) 본문 바로가기 링크 목적지 섹션에 사이드 메뉴, 브레드크럼, 페이지 유틸리티 버튼/링크가 포함되어 있지 않다.」

ViewCheck는 건너뛰기 링크 목적지에 반복 콘텐츠가 포함되지 않는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.1 Bypass Blocks

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

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