불러오는 중…
KWCAG 2.2 · 6.4.1
KWCAG 2.2 「반복 영역 건너뛰기」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.
페이지 최상단에서 Tab을 눌렀을 때 '본문 바로가기' 링크가 나타나고, 실제로 본문으로 초점이 이동하는지 확인하세요. 링크 존재는 자동 검사되지만 실제 동작은 수동 확인이 필요합니다.
이 항목은 9개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.
bypass키보드·스크린 리더 사용자가 모든 페이지에서 GNB 메뉴를 다 지나야 본문에 도달하지 않도록, 첫 번째 초점으로 '본문 바로가기' 링크를 제공하세요.
<body>
<a href="#main" class="skip-link">본문 바로가기</a>
…
<main id="main" tabindex="-1">…</main>
</body>.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; }skip-link건너뛰기 링크의 href가 가리키는 id가 실제로 존재하고 초점을 받을 수 있어야 합니다. 대상 요소에 tabindex="-1"을 추가하면 안전합니다.
region모든 콘텐츠를 <header>, <nav>, <main>, <footer> 등 랜드마크 영역 안에 배치하면 스크린 리더 사용자가 영역 단위로 빠르게 이동할 수 있습니다.
landmark-one-main페이지의 핵심 콘텐츠를 감싸는 <main>을 정확히 하나 제공하세요.
landmark-unique<nav>가 여러 개면 aria-label로 구별하세요 (예: "주 메뉴", "페이지 내 목차").
landmark-no-duplicate-banner최상위 <header>(banner)는 페이지에 하나만 두세요.
landmark-no-duplicate-contentinfo최상위 <footer>(contentinfo)는 페이지에 하나만 두세요.
duplicate-banner최상위 header는 하나만 유지하세요.
a11ychk:skip-link메뉴 등 여러 페이지에서 반복되는 영역을 건너뛰고 본문으로 바로 이동하는 링크가 필요합니다. 키보드·스크린 리더 사용자가 매 페이지에서 메뉴를 모두 지나치지 않도록 합니다. 페이지 최상단에 본문(main)으로 가는 링크를 두세요.
<body>
<a href="#main" class="skip-link">본문 바로가기</a>
<nav>…</nav>
<main id="main">…</main>/* 평소 숨겼다가 초점 시 표시 */
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:8px; top:8px; }건너뛰기 링크가 있는데 감지되지 않았을 수 있으니 직접 확인하세요.
주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.
무료로 검사하기