Accessibilité web : les erreurs que l'on retrouve sur presque tous les sites
Contrastes trop faibles, images sans alternative, boutons muets… Les défauts les plus répandus sont aussi les plus simples à corriger. Tour d'horizon.
L'équipe Codanalyst
3 min de lecture
Sommaire
Chaque année, l'organisation WebAIM analyse la page d'accueil du million de sites les plus visités. Et chaque année, le constat se répète : l'immense majorité présente des erreurs d'accessibilité détectables automatiquement. Plus intéressant encore, ce sont presque toujours les mêmes.
C'est une bonne nouvelle. Les défauts les plus répandus sont aussi parmi les plus simples à corriger, souvent en quelques minutes. Depuis le 28 juin 2025, l'Acte européen sur l'accessibilité impose en plus ces exigences à de nombreux services en ligne, notamment dans le commerce électronique. Raison de plus pour s'y mettre.
Un contraste de texte insuffisant
C'est l'erreur numéro un depuis des années. Un gris clair sur fond blanc paraît élégant sur un grand écran bien réglé, mais devient illisible au soleil, sur un écran bas de gamme ou pour une personne malvoyante.
La règle des WCAG, niveau AA : un rapport de contraste d'au moins 4,5:1 pour le texte courant, et 3:1 pour le texte de grande taille. Les outils de développement des navigateurs affichent ce rapport quand vous inspectez un texte.
Des images sans texte alternatif
Un lecteur d'écran lit l'attribut alt à la place de l'image. Sans lui, il annonce au mieux « image », au pire le nom du fichier.
<!-- À éviter -->
<img src="IMG_4032.jpg">
<!-- Mieux -->
<img src="IMG_4032.jpg" alt="Tarte aux pommes caramélisées sur une planche en bois">
Des liens et des boutons muets
Une icône de loupe, une flèche, un logo de réseau social : visuellement, tout le monde comprend. Pour un lecteur d'écran, ces liens n'ont pas de nom, et il annonce simplement « lien » ou « bouton ».
<button aria-label="Rechercher">
<svg aria-hidden="true">…</svg>
</button>
Même problème avec les liens « Cliquez ici » ou « En savoir plus » répétés dix fois sur une page : hors contexte, ils ne disent rien de leur destination.
Des champs de formulaire sans libellé
Un texte d'exemple dans le champ (le placeholder) ne remplace pas un libellé : il disparaît dès qu'on commence à taper, et beaucoup de technologies d'assistance ne le lisent pas. Chaque champ a besoin d'un label relié :
<label for="email">Adresse e-mail</label>
<input id="email" type="email" autocomplete="email">
La langue de la page non déclarée
Sans l'attribut lang, un lecteur d'écran lit votre texte français avec la prononciation de la langue configurée sur l'appareil. Le résultat est vite incompréhensible. La correction tient en quelques caractères :
<html lang="fr">
Une navigation impossible au clavier
Débranchez votre souris et parcourez votre site avec la touche Tab. Voyez-vous toujours où se trouve le focus ? Pouvez-vous ouvrir le menu, fermer une fenêtre modale, valider le formulaire de contact ? Beaucoup de sites suppriment le contour de focus pour des raisons esthétiques, et rendent ainsi la navigation au clavier impossible.
Ce que l'automatique ne voit pas
Les outils automatiques, Codanalyst compris, détectent de façon fiable les erreurs ci-dessus. Ils ne peuvent pas juger si un texte alternatif est pertinent ou si un parcours est logique. Un audit automatique est le bon point de départ, pas le point d'arrivée : il vous débarrasse des erreurs mécaniques pour que vos tests manuels portent sur l'essentiel.
Analysez votre site pour obtenir la liste de ses erreurs d'accessibilité, page par page.