Lien d'évitement absent : pourquoi chaque page en a besoin

Imaginez un site dont l'en-tête comporte un logo, un menu de 12 entrées, un champ de recherche et un lien de connexion : une quinzaine d'arrêts de tabulation avant d'atteindre le contenu principal. L'œil d'une personne utilisant la souris passe directement au-delà de tout cela. Une personne naviguant au clavier ou avec un lecteur d'écran doit parcourir chacun de ces quinze arrêts, sur chaque page, à chaque nouvelle navigation.

Le critère de succès 2.4.1 des WCAG (Contourner des blocs), niveau A, impose un mécanisme permettant de passer outre le contenu répété - le plus souvent un lien « aller au contenu principal ». Les données du secteur situent ce problème autour de 55 % des plaintes d'accessibilité web fondées sur l'ADA.

Comment le corriger

Le modèle habituel est un lien placé en tout premier élément focusable de la page, masqué visuellement jusqu'à ce qu'il reçoive le focus clavier, et qui mène directement au contenu principal :

<body>
  <a href="#contenu-principal" class="skip-link">Aller au contenu principal</a>
  <header>...</header>
  <nav>...</nav>
  <main id="contenu-principal">
    <!-- le contenu réel de la page commence ici -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

Le lien n'a besoin d'être visible qu'au focus : le masquer le reste du temps est correct, et non un compromis, puisque les personnes voyantes utilisant la souris n'en ont pas besoin et qu'un lien d'évitement toujours visible n'est pour elles qu'un encombrement.

Les repères forment l'autre moitié de la correction

Un lien d'évitement règle le problème « faites-moi passer la navigation », mais de véritables régions de repère (<header>, <nav>, <main>, <footer>, ou leurs équivalents ARIA role="banner", role="navigation", role="main", role="contentinfo") offrent aux personnes utilisant un lecteur d'écran une seconde voie, souvent plus rapide : la plupart de ces outils proposent un raccourci pour passer directement d'un repère à l'autre, sans aucun lien visible. Une page dotée d'un véritable élément <main> satisfait déjà une partie de l'exigence avant même l'ajout d'un lien d'évitement - les deux techniques sont complémentaires, et non redondantes.

Pourquoi cela vaut la peine même sur un site « simple »

Il est facile de repousser cette correction : elle ne bloque jamais une personne voyante, et le comportement manquant reste invisible tant qu'on ne teste pas réellement au clavier. Mais pour les personnes concernées, elle transforme « brièvement agaçant » en « épuisant à utiliser ». Et comme il s'agit d'un critère de niveau A dont la correction est connue et prend cinq minutes, c'est aussi l'un des gains les plus rapides d'un premier audit.

Références officielles

• Deque University : bypass
• Technique W3C G1