Scan gratuit

Corriger « Aucun lien d'évitement » en HTML

Pourquoi c'est un problème

Sans lien d'évitement, une personne qui navigue au clavier ou au lecteur d'écran doit parcourir tout l'en-tête et le menu à chaque page avant d'atteindre le contenu. Sur un menu de trente liens, c'est trente tabulations répétées à chaque navigation. C'est de loin le manquement le plus répandu que nous mesurons.

Comment corriger — HTML

Placez en tout premier élément du <body> un lien vers l'ancre du contenu principal. Il peut être masqué visuellement, mais il doit redevenir visible à la prise de focus : un lien qu'on ne voit pas quand on l'atteint au clavier ne sert à rien.

À éviter
<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>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections