Lien d'évitement

Un lien d’évitement est un raccourci clavier placé en tout début de page qui permet aux utilisateurs de sauter la navigation répétée pour accéder directement au contenu principal. Il satisfait au critère WCAG 2.4.1 Bypass Blocks (niveau A) et constitue l’une des améliorations d’accessibilité les plus rapides à mettre en œuvre.

Pourquoi ce mécanisme existe

Prenons un site de contenu classique. L’en-tête comporte six liens de navigation de premier niveau, un sélecteur de langue et un bouton de thème. Le pied de page en contient douze autres. Chaque page reproduit ces structures. Un utilisateur naviguant au clavier ou avec un lecteur d’écran qui arrive sur un article et souhaite le lire doit appuyer sur Tab environ trente fois pour atteindre le corps de l’article. Répété sur chaque navigation de page, cela devient épuisant.

Un lien d’évitement est un simple <a href="#main-content">Skip to content</a> placé comme premier élément focusable dans le document. L’utilisateur appuie sur Tab une fois après le chargement de la page, voit « Skip to content », appuie sur Entrée, et le focus se déplace vers le corps de l’article.

Implémentation

Le motif est simple, mais comporte quelques pièges bien connus :

<a class="skip-link" href="#main-content">Skip to content</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Trois détails importants :

1. Le lien doit être visible au focus. Un lien d’évitement masqué en permanence par display: none est invisible pour les utilisateurs voyants qui naviguent au clavier, qui ne sauront pas qu’il existe. Masquez-le hors écran via le positionnement, pas via display: none ou visibility: hidden.

2. La cible doit pouvoir recevoir le focus. Un <main> brut ne reçoit pas le focus clavier par défaut. L’ajout de tabindex="-1" le rend focusable par programmation, de sorte que le navigateur déplace effectivement le focus quand le lien est suivi. Sans cela, le hash de l’URL change mais le focus ne bouge pas, et le prochain Tab repart du haut de la page — annulant totalement l’intérêt du lien d’évitement.

3. Il doit être le premier élément focusable. Pas « parmi les 100 premiers éléments » — le premier. Si quelque chose le précède (un lien vers le logo, une icône de recherche), l’utilisateur doit passer par ces éléments avant d’atteindre le lien d’évitement, ce qui en annule l’utilité.

Liens d’évitement multiples

Les pages longues comportant plusieurs régions répétées bénéficient parfois d’un petit menu « d’accès rapide » plutôt qu’un seul lien :

• Aller au contenu principal
• Aller à la navigation
• Aller au pied de page

Une courte liste de trois ou quatre destinations, visible au focus, est acceptable. Un long sommaire généré automatiquement en haut de chaque page ne l’est pas.

Ce que ce mécanisme ne remplace pas

Le lien d’évitement est le filet de sécurité pour le critère de contournement des blocs. Il ne remplace pas les landmarks sémantiques corrects (<nav>, <main>, <aside>, <footer>), une structure de titres cohérente (un seul <h1> par page, des <h2> hiérarchiques), ni les attributs aria-label sur les landmarks dupliqués. Les utilisateurs de lecteurs d’écran se déplacent entre régions et titres via des raccourcis clavier qui reposent sur ces structures ; le lien d’évitement s’adresse aux utilisateurs voyants qui naviguent uniquement au clavier.