Lien d'évitement : à quoi il sert, où le placer et comment le coder

À quoi sert un lien d'évitement (critère WCAG 2.4.1) ?

Le critère 2.4.1 vise à offrir aux personnes qui parcourent le contenu de manière séquentielle un accès plus direct au contenu principal de la page. Les sites web répètent souvent les mêmes blocs d'une page à l'autre : le W3C cite les liens de navigation, le contenu d'en-tête et les cadres publicitaires. À l'inverse, de petites portions répétées, comme des mots isolés, des expressions ou des liens uniques, ne sont pas considérées comme des blocs au sens du critère.

Une personne voyante peut ignorer ces blocs en regardant directement le centre de l'écran, et un utilisateur de souris atteint le lien voulu en un seul clic. Une personne qui navigue de façon séquentielle, elle, doit en général traverser tous les liens et champs de formulaire qui précèdent l'élément recherché, sur chaque page. Le W3C donne l'exemple de la page d'accueil d'un site d'information : si l'utilisateur ne se sert pas du lien placé en haut de page, un utilisateur clavier doit tabuler à travers environ 40 liens pour atteindre l'article principal, et un utilisateur de lecteur d'écran doit écouter 200 mots.

• Utilisateurs de lecteurs d'écran : ils évitent d'entendre tout l'en-tête et des dizaines de liens de navigation sur chaque page avant le contenu principal.
• Personnes qui utilisent uniquement le clavier ou une interface clavier : elles atteignent le contenu avec moins de frappes. Sans cela, des dizaines de frappes peuvent être nécessaires, ce qui prend du temps et peut provoquer de fortes douleurs physiques chez certaines personnes.
• Utilisateurs de loupes d'écran : ils n'ont pas à chercher, à chaque nouvelle page, où commence le contenu principal.
• Personnes ayant des limitations cognitives et utilisateurs de lecteurs d'écran : ils peuvent bénéficier du regroupement des liens en listes.

Où placer le lien d'évitement ?

Les techniques suffisantes publiées par le W3C donnent trois emplacements possibles pour des liens d'évitement. Le choix dépend de la structure de vos gabarits et de l'endroit où se trouvent les blocs répétés.

La technique G1 consiste à placer un lien en haut de chaque page qui mène directement à la zone de contenu principal ; en pratique, on le place donc avant l'en-tête et le menu. Mais le W3C cite aussi l'exemple d'un site e-commerce qui affiche une longue liste de filtres avant les résultats de recherche : un lien placé au-dessus de cette liste permet de sauter les filtres et d'atteindre rapidement les produits. Ce cas correspond à l'esprit de la technique G123, qui consiste à placer un lien au début d'un bloc répété menant à la fin de ce bloc.

Inversement, l'emplacement des blocs répétés compte. Le W3C précise que le critère n'a pas pour but d'imposer des méthodes redondantes avec les fonctions du navigateur : la plupart des navigateurs proposent des raccourcis clavier pour ramener le focus en haut de la page. Si un ensemble de liens de navigation est placé en bas de page, un lien « sauter » peut donc être inutile.

• G1 : un lien en haut de chaque page qui mène directement à la zone de contenu principal.
• G123 : un lien au début d'un bloc de contenu répété qui mène à la fin de ce bloc.
• G124 : des liens en haut de la page vers chacune des zones du contenu.

Coder un lien d'évitement « Aller au contenu »

La technique G1 consiste à ajouter un lien en haut de chaque page qui mène directement à la zone de contenu principal. En pratique, on utilise souvent un lien d'ancre vers un attribut id placé sur cette zone, comme dans l'exemple ci-dessous. Celui-ci ajoute un élément nav pour la navigation (technique consultative H97, qui regroupe les liens apparentés), un élément main et un titre en début de contenu, qui illustre le principe de la technique H69.

Une fois le code en place, vérifiez le comportement réel au clavier, sans souris : en tabulant depuis le haut de la page, le lien doit être atteint avant l'en-tête et le menu, et son activation doit vous amener au début du contenu principal. Testez chaque gabarit de votre site, puisque le critère porte sur les blocs répétés sur plusieurs pages.

<body>
  <a href="#contenu" class="lien-evitement">Aller au contenu</a>

  <header>…</header>

  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/offres">Offres</a></li>
    </ul>
  </nav>

  <main id="contenu">
    <h1>Titre de la page</h1>
    …
  </main>
</body>

Cacher le lien d'évitement sans le rendre inaccessible

Beaucoup d'équipes souhaitent masquer visuellement le lien d'évitement pour ne pas modifier le design. Le texte du W3C ne prescrit aucune technique de masquage, mais il pose une règle importante : selon la définition de « mécanisme », celui-ci doit lui-même satisfaire à tous les critères de succès du niveau de conformité visé. Le masquage ne doit donc pas faire perdre au lien son utilité pour les personnes qui naviguent au clavier, à qui il est destiné.

Bonne pratique : si vous choisissez de le masquer, faites en sorte qu'il reste atteignable au clavier et qu'il s'affiche lorsqu'il reçoit le focus. L'exemple CSS ci-dessous sort le lien de l'écran tant qu'il n'a pas le focus, puis l'affiche en haut de la page. Validez-le systématiquement au clavier, sans souris, sur vos différents gabarits.

.lien-evitement {
  position: absolute;
  left: -10000px;
  top: auto;
}

.lien-evitement:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
}

Landmarks ARIA et titres : les autres mécanismes de contournement

Le critère 2.4.1 ne se limite pas aux liens d'évitement. Le W3C reconnaît une seconde famille de techniques suffisantes : regrouper les blocs de contenu répétés d'une façon qui permette de les contourner. Pour rappel, le W3C décrit les technologies d'assistance comme des outils qui fournissent notamment des mécanismes de navigation ou d'orientation supplémentaires.

Une seule de ces techniques suffit, mais rien n'empêche de les combiner avec un lien d'évitement. Le W3C rappelle d'ailleurs, dans une note du critère, qu'il encourage fortement le balisage structurel de chaque page, conformément au critère 1.3.1, même si le critère 2.4.1 porte sur les blocs répétés sur plusieurs pages. Enfin, même pour une page isolée, il peut être utile, sans être obligatoire, de proposer un moyen de sauter des blocs de texte répétés au sein de la page.

• ARIA11 : utiliser les landmarks ARIA pour identifier les régions de la page.
• H69 : placer un élément de titre au début de chaque section de contenu.
• PDF9 : baliser les titres avec des balises de titre dans les documents PDF.
• H64 : utiliser l'attribut title de l'élément iframe.
• SCR28 : utiliser un menu dépliable et repliable pour contourner un bloc de contenu.
• Techniques consultatives : positionner le contenu en fonction du balisage structurel (C6) et regrouper les liens apparentés avec l'élément nav (H97).

Questions fréquentes

À lire aussi sur Conformly

• Corriger le lien d'évitement en HTML
• Ajouter un mécanisme de contournement des blocs
• Fiche du critère RGAA 12.7

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Comprendre 2.4.1