Free scan

Fix "No skip link" in HTML

Why it's a problem

Without a skip link, keyboard and screen-reader users must traverse the whole header and menu on every page before reaching the content. With a thirty-link menu, that is thirty repeated tab presses per navigation. It is by far the most widespread failure we measure.

How to fix it — HTML

Make the very first element of <body> a link to the main content anchor. It may be visually hidden, but it must become visible on focus: a link you cannot see when you reach it by keyboard is useless.

Avoid
<body>
  <header>…trente liens de menu…</header>
  <main>…</main>
</body>
Correct
<body>
  <a href="#contenu" class="skip-link">Aller au contenu</a>
  <header>…</header>
  <main id="contenu">…</main>
</body>

<style>
/* Masqué, mais RÉAFFICHÉ à la prise de focus. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; top: 0; padding: 0.75rem 1rem; background: #fff; }
</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