Skip Navigation

HTML / CSS 🟢 Junior

Definition

Lien caché visuellement qui permet aux utilisateurs clavier de sauter directement au contenu principal. Il apparaît au premier Tab et évite de traverser tout le menu de navigation.

Analogie

Comme un ascenseur express qui mène directement au bon étage sans s'arrêter à chaque palier.

Exemple de code

<a href="#main" class="skip-link">Aller au contenu</a>
<nav><!-- ... menu --></nav>
<main id="main"><!-- contenu --></main>
<style>
.skip-link:not(:focus) { position: absolute; left: -9999px; }
</style>

Cas d'usage

Sur toute page ayant une navigation significative pour respecter le critère WCAG 2.4.1.

#accessibility#bestpractice