2.4.1 블록 건너뛰기

요구 사항

여러 웹 페이지에서 반복되는 콘텐츠 블록(머리글, 전체 메뉴, 사이드바 등)을 건너뛰는 메커니즘을 제공합니다. 대표적인 방법은 ① 본문 바로가기(건너뛰기 링크), ② 제목 구조, ③ 랜드마크입니다. W3C 이해 문서는 제목과 랜드마크도 충분한 기법으로 인정하지만, 브라우저 자체에서 키보드만으로 제목·랜드마크를 이동할 수 없는 경우가 많아 건너뛰기 링크를 함께 제공하는 것이 좋습니다.

왜 필요한가요

키보드 사용자는 페이지마다 수십 개의 메뉴 링크를 Tab으로 지나야 본문에 도달합니다. 운동장애가 있는 사용자에게는 키 하나하나가 큰 부담입니다.

도움받는 사용자

• 키보드만 사용하는 사용자
• 시각장애인(화면낭독기 사용자)
• 운동장애가 있는 사용자(손 떨림, 근력 저하 등)
• 스위치·대체 입력 장치 사용자
• 저시력 사용자(화면 확대 사용자)

적용 방법

<body>
  <a class="skip-link" href="#main">본문 바로가기</a>
  <header>...</header>
  <nav aria-label="주 메뉴">...</nav>
  <main id="main" tabindex="-1">
    <h1>페이지 제목</h1>
  </main>
</body>

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; } /* 포커스를 받으면 보이게 합니다 */

랜드마크와 제목 구조는 랜드마크와 제목 구조 가이드와 랜드마크 패턴을 참고하세요.

자주 하는 실수

• 건너뛰기 링크의 대상(href="#main")이 존재하지 않습니다.
• 건너뛰기 링크가 display: none이라 포커스를 받지 못합니다.
• 건너뛰기 링크가 포커스를 받아도 화면에 보이지 않습니다.

검사 방법

• 페이지를 열고 Tab을 눌러 첫 포커스가 건너뛰기 링크인지 확인합니다.
• 링크를 실행해 포커스가 본문으로 이동하는지 확인합니다.
• 랜드마크와 제목 구조가 적절히 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.4.1 (새 창)