Nouveau Components

Liens d’évitement

Les liens d’évitement sont une fonctionnalité d’accessibilité web permettant aux utilisateurs — en particulier ceux naviguant au clavier ou utilisant un lecteur d’écran — de contourner rapidement des contenus répétitifs, comme les menus de navigation, et d’accéder directement au contenu principal d’une page. Ces liens sont généralement invisibles à l’écran, mais deviennent visibles lorsqu’ils reçoivent le focus via le clavier. Ils offrent ainsi un moyen efficace de naviguer et améliorent l’expérience des personnes en situation de handicap. Les liens d’évitement renforcent l’ergonomie d’un site en fournissant un raccourci vers le contenu essentiel, réduisant le besoin de parcourir tous les éléments de la page avec la touche Tab.

Quand l’utiliser

  • Accès direct au contenu principal : Mettre en place des liens d’évitement pour permettre aux utilisateurs d’accéder rapidement au contenu principal de la page, en contournant les liens de navigation répétitifs.
  • Accessibilité renforcée : Utiliser les liens d’évitement comme un outil d’amélioration de l’accessibilité du site, en particulier pour les utilisateurs au clavier et les utilisateurs de lecteurs d’écran.

Quand ne pas l’utiliser

  • Pages minimalistes : Éviter d’utiliser des liens d’évitement sur des pages très minimalistes ou sur des applications monopage (SPA) où il y a peu, voire pas du tout, de contenu ou de navigation répétitifs.

Modes d'action

  • Visibilité au clavier : Les liens d’évitement doivent devenir visibles lorsqu’ils reçoivent le focus via la navigation au clavier, en apparaissant généralement en haut de la page.
  • Interaction à la souris : Bien qu’ils soient principalement conçus pour les utilisateurs au clavier, les liens d’évitement doivent également être accessibles et fonctionnels à la souris.

Accessibilité pour les lecteurs d’écran

  • Libellé clair : Libeller les liens d’évitement de manière explicite, par exemple « Aller au contenu » ou « Aller à la navigation », afin que les utilisateurs de lecteurs d’écran comprennent immédiatement leur fonction.
  • Repères ARIA : Utiliser des repères ARIA pour définir la destination du lien d’évitement, garantissant ainsi qu’il mène bien à la section prévue de la page.

Contenu

  • Concis et explicite : Rédiger le texte des liens d’évitement de façon courte mais suffisamment descriptive pour expliquer clairement leur fonction.
  • Visibilité et accessibilité : Faire en sorte que les liens d’évitement soient facilement accessibles et visibles lorsqu’ils ont le focus, tout en restant discrets lorsqu’ils ne sont pas utilisés.
  • Positionnement et style : Placer les liens d’évitement en haut de la page et les styliser de manière à ce qu’ils soient bien visibles au focus, tout en s’intégrant au design du site lorsqu’ils ne sont pas actifs.

Sur cette page

Mots-clés

  • Liens d’évitement : raccourcis permettant aux utilisateurs de contourner des contenus répétitifs et d’accéder directement aux zones principales d’une page.

Détail des composants

  • Structure HTML : Les liens d’évitement sont généralement implémentés sous forme de liens <a> placés au tout début du contenu de la page. Ils pointent vers l’ID de la zone de contenu principal, permettant aux utilisateurs de contourner les éléments répétitifs comme les menus de navigation.
  • Visibilité : Par défaut, les liens d’évitement sont masqués hors de l’écran, mais deviennent visibles lorsqu’ils reçoivent le focus, généralement via la navigation au clavier. Cela les rend accessibles aux utilisateurs qui en ont besoin, tout en restant discrets pour les autres.
  • Style CSS : Le style des liens d’évitement est essentiel. Ils sont placés hors de l’écran grâce au CSS puis rendus visibles lorsqu’ils reçoivent le focus. Le style doit assurer un contraste élevé pour garantir une bonne visibilité lorsqu’ils apparaissent.
  • Gestion du focus : Les liens d’évitement doivent être les premiers éléments à recevoir le focus dans la page. Cela se fait en les plaçant au début du document HTML et, si nécessaire, en utilisant l’attribut tabindex.
  • Zone cible : La destination du lien d’évitement — généralement la zone de contenu principal — doit posséder un ID identique à la valeur du href du lien. Cette zone doit également être rendue focusable (souvent via tabindex="-1") afin que le focus se déplace correctement lorsqu’un lien d’évitement est activé.

Sur cette page

Accordion keyboard navigation function table
Touche Fonction
Tab
  • Appuyer sur la touche Tab en arrivant sur une page web place généralement le focus d’abord sur le premier lien d’évitement, avant tout autre élément navigable.
Entrée
  • Une fois que le lien d’évitement a le focus, appuyer sur la touche Entrée active le lien et déplace le focus vers le contenu principal ou la section de la page spécifiée.