건너뛰기 링크 검사기

건너뛰기 링크 검사기 사용 가이드

키보드 사용자는 페이지를 열 때마다 상단 메뉴의 링크 수십 개를 Tab으로 지나야 본문에 닿습니다. 이를 줄이는 '본문 바로가기(건너뛰기)' 링크는 WCAG 2.4.1의 대표적인 해결 방법입니다. 이 검사기는 붙여 넣은 HTML에서 바로가기 링크를 찾아 제대로 동작할지 확인합니다.

'본문, 콘텐츠, 바로가기, 건너뛰기, skip, main' 같은 글자가 든 # 링크와 첫 번째로 포커스되는 링크를 후보로 봅니다. 각 링크의 이동 대상 id가 문서에 있는지, 대상이 main·section이 아니고 포커스도 받지 않는 요소라면 tabindex="-1"이 있는지 확인합니다.

바로가기 링크를 display:none이나 hidden으로 숨기면 키보드로도 갈 수 없게 되므로 ✕로 표시하고, 첫 번째 포커스 요소가 바로가기 링크가 아니면 알려 줍니다. 바로가기 링크가 하나도 없으면 넣는 방법을 안내합니다.

사용 방법

1. 1'검사할 HTML' 칸에 페이지 앞부분(헤더~본문 시작)을 붙여 넣습니다.
2. 2'실행'을 누르면 바로가기 후보 링크와 이동 대상, 첫 포커스 요소가 나옵니다.
3. 3✕ 항목(대상 없음, 숨김)을 고치고 링크를 페이지 맨 앞으로 옮깁니다.
4. 4실제 화면에서 Tab을 눌러 링크가 보이고 본문으로 이동하는지 확인합니다.

<a class="skip" href="#main">본문 바로가기</a><nav>…</nav>
<main id="main" tabindex="-1"><h1>페이지 제목</h1></main>

바로가기 후보 링크 1개 · 첫 포커스: a "본문 바로가기" · main 영역: main#main

✓ 이 검사 항목에서는 문제를 찾지 못했습니다.

위치	링크 글자	대상	대상 요소	상태
첫 포커스	"본문 바로가기"	#main	main#main	✓ 대상 있음

이럴 때 쓰면 좋아요

• 메뉴가 긴 사이트에 바로가기 링크가 있는지 확인할 때
• 디자인 변경 뒤 바로가기 링크가 숨겨져 망가지지 않았는지 볼 때
• 본문 id를 바꾼 뒤 링크 대상이 맞는지 점검할 때
• 웹 접근성 반복 영역 건너뛰기 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• 바로가기 링크는 HTML에서 가장 먼저 나오게 두면 첫 Tab에 바로 나타납니다.
• 메뉴가 여러 개면 '주 메뉴 바로가기'처럼 여러 개를 두어도 됩니다.
• 전체 Tab 순서는 키보드 포커스 순서 분석기로 확인하세요.

자주 묻는 질문