6.4.1 반복 영역 건너뛰기

요구 사항

여러 페이지에 공통으로 들어가는 메뉴·링크 목록 같은 반복 영역을 건너뛰고 핵심 영역으로 바로 이동할 수 있는 수단을 제공합니다.

• 건너뛰기 수단 제공: 핵심 영역으로 직접 이동하는 건너뛰기 링크를 웹 페이지의 가장 앞에 제공합니다.
• 여러 개의 건너뛰기 링크: 여러 개를 제공한다면 핵심 영역(본문)으로 가는 링크를 가장 먼저 둡니다.
• 시각적인 구현: 건너뛰기 링크는 지체장애인의 키 조작도 줄여 주므로 화면에 보이도록 구현해야 합니다(초점을 받으면 나타나는 방식이 일반적입니다).

왜 필요한가요

키보드 사용자는 페이지마다 수십 개의 메뉴 링크를 Tab으로 지나야 본문에 도달하고, 화면낭독기 사용자는 페이지가 바뀔 때마다 같은 메뉴를 다시 듣습니다. 건너뛰기 링크는 이 반복을 한 번의 조작으로 줄여 줍니다.

도움받는 사용자

• 키보드·스위치 사용자
• 시각장애인(화면낭독기 사용자)
• 지체장애인

적용 방법

<body> 바로 다음에 본문으로 가는 링크를 두고, 이동 대상에 id를 지정합니다. 대상이 초점을 받을 수 없는 요소라면 tabindex="-1"을 줍니다. 랜드마크(<main>, <nav>)와 제목 구조도 함께 제공하면 화면낭독기 사용자가 더 빠르게 이동합니다(랜드마크 패턴).

<body>
  <a class="skip-link" href="#content">본문 바로가기</a>
  <header>…</header>
  <nav aria-label="주 메뉴">…</nav>
  <main id="content" tabindex="-1">
    <h1>공지사항</h1>
    …
  </main>
</body>

.skip-link { position: absolute; left: 8px; top: -100px; padding: 8px 12px; background: #000; color: #fff; }
.skip-link:focus { top: 8px; }   /* 초점을 받으면 화면에 보임 */

사례

<a href="#content">본문 바로가기</a>
…
<main id="content" tabindex="-1">…</main>

<a href="#main">본문 바로가기</a>
…
<div class="contents">…</div>

자주 하는 실수

• 건너뛰기 링크가 없거나 페이지 맨 앞이 아닌 곳에 있습니다.
• 건너뛰기 링크의 이동 대상 id가 없거나 틀립니다.
• display:none으로 숨겨 키보드 초점을 받아도 보이지 않습니다.
• 이동 후 초점이 본문으로 가지 않아 다음 Tab에서 메뉴로 돌아갑니다.

검사 방법

• 페이지를 열고 첫 번째 Tab에 건너뛰기 링크가 나타나는지 확인합니다.
• 링크를 실행한 뒤 초점(또는 읽기 위치)이 본문 시작으로 이동했는지, 다음 Tab이 본문 안의 요소로 가는지 확인합니다.
• 건너뛰기 링크가 여러 개라면 본문으로 가는 링크가 첫 번째인지 확인합니다.

관련 ARIA

다른 지침의 대응 항목