A11y Check

KWCAG 2.2 · 6.4.1

반복 영역 건너뛰기 검사 방법

KWCAG 2.2 「반복 영역 건너뛰기」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)
6.4.1 반복 영역 건너뛰기
운용의 용이성
국제 기준 (WCAG 2.2)
2.4.1 블록 건너뛰기 (A) ↗

어떻게 검사하나요

페이지 최상단에서 Tab을 눌렀을 때 '본문 바로가기' 링크가 나타나고, 실제로 본문으로 초점이 이동하는지 확인하세요. 링크 존재는 자동 검사되지만 실제 동작은 수동 확인이 필요합니다.

자동 검사로 잡히는 부분

이 항목은 13개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

  • 반복 영역을 건너뛸 수단이 없습니다 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> 등 랜드마크 영역 안에 배치하면 스크린 리더 사용자가 영역 단위로 빠르게 이동할 수 있습니다.

  • main 랜드마크가 없거나 여러 개입니다 landmark-one-main

    페이지의 핵심 콘텐츠를 감싸는 <main>을 정확히 하나 제공하세요.

  • 같은 종류의 랜드마크를 구별할 수 없습니다 landmark-unique

    <nav>가 여러 개면 aria-label로 구별하세요 (예: "주 메뉴", "페이지 내 목차").

  • banner 랜드마크가 여러 개입니다 landmark-no-duplicate-banner

    최상위 <header>(banner)는 페이지에 하나만 두세요.

  • contentinfo 랜드마크가 여러 개입니다 landmark-no-duplicate-contentinfo

    최상위 <footer>(contentinfo)는 페이지에 하나만 두세요.

  • main 랜드마크가 여러 개입니다 landmark-no-duplicate-main

    핵심 콘텐츠 영역인 <main>은 페이지에 하나만 두세요. 여러 개면 스크린 리더 사용자가 어디가 본문인지 판단할 수 없습니다.

  • main 랜드마크가 다른 랜드마크 안에 있습니다 landmark-main-is-top-level

    <main>은 <header>·<nav>·<aside> 같은 다른 랜드마크 안이 아니라 최상위에 두세요. 중첩되면 영역 단위 이동에서 본문을 건너뛰게 됩니다.

  • banner 랜드마크가 다른 랜드마크 안에 있습니다 landmark-banner-is-top-level

    사이트 머리말인 <header>(banner)는 최상위에 두세요. <main>이나 <article> 안의 <header>는 banner가 아니라 그 구역의 머리말입니다.

  • contentinfo 랜드마크가 다른 랜드마크 안에 있습니다 landmark-contentinfo-is-top-level

    사이트 꼬리말인 <footer>(contentinfo)는 최상위에 두세요. 다른 랜드마크 안에 있으면 꼬리말로 인식되지 않습니다.

  • banner 영역이 중복되었습니다 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항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.

무료로 검사하기

관련 검사항목