Free scan

Fix "No way to bypass repeated blocks" in HTML

Why it's a problem

Without a shortcut, a keyboard user has to go through the logo, menu and every header link on each page before reaching the content. axe-core accepts an internal link, a heading or a <main> region as a bypass; RGAA expects a skip link to the main content.

How to fix it — HTML

Add a “Skip to content” link as the very first focusable element, pointing to <main>. It can appear only on focus. Also structure the page with <header>, <nav>, <main> and headings: screen readers use them to jump between regions.

Avoid
<body>
  <div class="top">…menu…</div>
  <div class="content">…</div>
</body>
Correct
<body>
  <a class="skip" href="#contenu">Aller au contenu</a>
  <header>
    <nav aria-label="Navigation principale">…</nav>
  </header>
  <main id="contenu">…</main>
</body>

<style>
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 1rem; top: 1rem; }
</style>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes