Contournement des blocs

Ce que le critère exige

Si le même bloc de contenu apparaît sur plusieurs pages — en-tête, navigation principale, méga-menu, barre de fil d’Ariane, liens utilitaires — les utilisateurs de souris voyants le contournent instantanément. Les utilisateurs du clavier doivent le parcourir entièrement à chaque fois. Les utilisateurs de lecteurs d’écran doivent l’écouter. Le critère exige qu’au moins un mécanisme permette d’accéder directement au contenu principal.

WCAG accepte plusieurs mécanismes : un lien « Aller au contenu principal », des régions de repères appropriées (<header>, <nav>, <main>, <footer>), ou une vraie hiérarchie de titres que les utilisateurs de lecteurs d’écran peuvent parcourir avec la touche H. En pratique, un lien d’évitement combiné aux repères constitue la base sûre.

Comment s’y conformer

• Ajouter un lien « Aller au contenu principal » comme premier élément recevant le focus dans la page. Le rendre visible au focus, pas caché en permanence.
• Faire pointer l’attribut href du lien d’évitement vers l’id de l’élément <main>, et ajouter tabindex="-1" à <main> pour que le focus s’y positionne dans Safari.
• Utiliser de vrais éléments de repère : un <header>, un <nav> (ou plusieurs avec aria-label), un <main>, un <footer> par page.
• Utiliser une structure de titres claire pour que les utilisateurs de JAWS et NVDA puissent appuyer sur H, 1, 2, 3 pour naviguer.
• Si plusieurs blocs répétés posent problème (nav utilitaire + nav principale + fil d’Ariane), envisager un second lien d’évitement pour le plus pénible.

Échecs courants

• Lien d’évitement masqué avec display: none au lieu d’être placé hors écran et révélé au focus — les technologies d’assistance ne peuvent pas le trouver.
• La cible du lien d’évitement manque de tabindex="-1", si bien que Safari/WebKit ignore le saut et maintient le focus sur le lien d’évitement.
• <main> imbriqué dans <nav> ou dupliqué plusieurs fois sur la page.
• Hiérarchie de titres qui saute des niveaux (h1 → h4) ou utilise les titres uniquement pour leur taille visuelle, brisant la stratégie de navigation par la touche H.
• En-têtes fixes qui recouvrent l’élément ayant le focus après l’activation du lien d’évitement — voir le critère 2.4.11.

Pourquoi c’est important

Le contournement des blocs est l’amélioration d’accessibilité la moins coûteuse de la liste — un lien d’évitement représente environ dix lignes de HTML et CSS — mais le taux d’échec sur les sites en production reste autour de 60 % dans le scan annuel Million de WebAIM. Pour un utilisateur navigant uniquement au clavier sur un site avec un méga-menu de 40 éléments, devoir le parcourir entièrement à chaque changement de page est épuisant et, lors de longues sessions de navigation, invalidant.