Corriger les erreurs d'accessibilité courantes : alt, labels et focus clavier

Corriger les erreurs d'accessibilité courantes d'un site, c'est d'abord traiter quatre points : le texte alternatif des images, les labels des champs de formulaire, la visibilité du focus au clavier et le lien d'évitement. Ils concernent les personnes qui utilisent un lecteur d'écran ou naviguent sans souris, et ils sont rapides à corriger. Notre audit les contrôle, en complément des règles WCAG d'axe-core.

Un audit automatisé ne détecte qu'une partie des problèmes d'accessibilité : il ne remplace pas une évaluation complète, par exemple selon le RGAA. Voir la page audit accessibilité RGAA pour son périmètre exact.

1. Renseigner le texte alternatif des images

Un lecteur d'écran lit l'attribut alt à la place de l'image. L'audit signale les images sans cet attribut, et celles dont le texte est suspect : un nom de fichier (« IMG_2384.jpg ») ou un mot vague (« photo »).

<!-- Image porteuse de sens : décrivez ce qu'elle montre -->
<img src="equipe.webp" alt="L'équipe de l'agence devant nos locaux" width="800" height="500">

<!-- Image purement décorative : alt vide, pour qu'elle soit ignorée -->
<img src="separateur.svg" alt="" width="200" height="8">

Une image qui figure dans un lien doit décrire la destination du lien. Sous WordPress, le champ « Texte alternatif » se trouve dans la médiathèque, en cliquant sur l'image.

2. Associer un label à chaque champ de formulaire

Sans label, un lecteur d'écran annonce « champ de saisie » sans dire ce qu'il faut y écrire. Un texte d'exemple (placeholder) ne remplace pas un label : il disparaît à la saisie.

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" autocomplete="email">

Avec un plugin de formulaire (Contact Form 7, WPForms), vérifiez que chaque champ a un libellé renseigné dans sa configuration.

3. Rendre le focus clavier visible

Quand on navigue à la touche Tab, le champ ou le lien actif doit se voir. L'audit détecte les éléments dont l'indicateur de focus est invisible, le plus souvent à cause d'une règle outline: none qui n'est pas remplacée.

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

Un élément interactif ne doit pas non plus être retiré de l'ordre de tabulation avec un tabindex négatif alors qu'il reste visible et utilisable : l'audit le signale.

4. Ajouter un lien d'évitement

Un lien « Aller au contenu » placé tout en haut de la page permet à un visiteur au clavier de ne pas retraverser tout le menu à chaque page. Il peut rester masqué jusqu'à ce qu'il reçoive le focus.

<a class="skip-link" href="#contenu">Aller au contenu</a>
...
<main id="contenu"> ... </main>

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; }

Les règles WCAG d'axe-core

En plus de ces points, l'audit remonte les violations détectées par axe-core, avec leur nombre d'occurrences, ainsi que les points qu'il ne peut pas trancher seul et qu'il vous demande de vérifier à la main, le contraste de couleurs sur un fond en dégradé par exemple. Traitez d'abord les violations les plus nombreuses.

Vérifier

Parcourez la page uniquement au clavier avec la touche Tab : chaque élément actif doit être visible et le lien d'évitement doit apparaître en premier. Relancez ensuite l'audit : la catégorie Accessibilité doit s'améliorer.