반복 영역 건너뛰기

무엇을 요구하나요?

로고, 주 메뉴, 검색창처럼 모든 페이지에 반복되는 영역을 건너뛰고 본문으로 바로 이동할 수 있어야 합니다. 키보드 사용자는 건너뛰기 링크가 없으면 페이지를 옮길 때마다 메뉴 수십 개를 Tab으로 지나가야 합니다.

가장 흔한 방법은 페이지 맨 앞에 “본문 바로가기” 링크를 두는 것입니다.

고치는 법

기본 구조

<body>
  <a class="skip-link" href="#main">본문 바로가기</a>
  <header>… 로고, 메뉴 …</header>
  <main id="main" tabindex="-1">
    <h1>회원가입</h1>
    …
  </main>
</body>

• 링크는 Tab을 처음 눌렀을 때 가장 먼저 초점을 받는 위치(본문 맨 앞)에 둡니다.
• 도착지에 tabindex="-1"을 주면 일부 브라우저에서도 초점이 본문으로 확실히 옮겨집니다.

숨겼다가 초점을 받으면 보이게

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
}
.skip-link:focus {
  top: 1rem;
}

자주 틀리는 예

1. display:none으로 숨김

.skip-link { display: none; } /* Tab으로도 갈 수 없음 */

display: none, visibility: hidden은 키보드로도 갈 수 없게 만듭니다. 위의 “화면 밖으로 옮기기” 방식을 쓰세요.

2. 연결 대상이 없거나 틀림

href="#content"인데 id="content"가 없거나, 같은 id가 두 번 있으면 링크가 동작하지 않습니다. (8.1.1 마크업 오류 방지의 중복 id 참고)

3. 링크가 메뉴 뒤에 있음

건너뛰기 링크가 메뉴보다 뒤에 있으면 의미가 없습니다. Tab을 처음 눌렀을 때 바로 나와야 합니다.

확인하는 방법

1. 페이지를 새로 열고 Tab을 한 번 눌러 “본문 바로가기”가 보이는지 확인하세요.
2. Enter를 누른 뒤 다시 Tab을 눌렀을 때 본문의 첫 링크·입력 칸으로 이동하는지 확인하세요.
3. 북마클릿의 탭 순서 보기에서 1번이 건너뛰기 링크인지 확인할 수 있습니다.