Les erreurs d'accessibilité les plus répandues
Chaque année, l'étude WebAIM Million passe au crible l'accessibilité de 1 million de sites web. Et chaque année, le constat est le même : les mêmes erreurs se répètent partout. En 2025, 96,3 % des pages d'accueil présentent des erreurs WCAG détectables automatiquement. Presque la totalité. La bonne nouvelle, c'est que ces erreurs sont souvent simples à corriger. Voici les 10 plus fréquentes.
1. Texte à faible contraste (86 % des sites)
Le problème : le fameux gris clair sur fond blanc. Placeholders quasi invisibles. Liens qui se fondent dans le texte. Ça a l'air « clean » mais ça exclut des millions de personnes.
La solution : ratio 4.5:1 pour le texte normal, 3:1 pour le grand texte (18px+ ou 14px+ gras). Installez Colour Contrast Analyser et vérifiez — vous allez probablement avoir des surprises.
2. Images sans alt (58 % des sites)
Le problème : images sans attribut alt du tout, alt absurdes genre "image.jpg" ou "photo", icônes SVG sans la moindre description.
La solution : alt descriptif pour les images informatives, alt="" pour les décoratives (vide, pas absent !), aria-label pour les icônes SVG. C'est l'une des corrections les plus rapides à faire.
3. Liens vides ou non explicites (50 % des sites)
Le problème : « Cliquez ici ». « En savoir plus ». Des liens images sans alt. Des icônes-liens sans le moindre texte. Imaginez un lecteur d'écran qui annonce « lien : cliquez ici, lien : cliquez ici, lien : en savoir plus » — impossible de savoir où ça mène.
La solution : du texte descriptif (« Lire notre guide RGAA »), un aria-label si le design l'impose, et toujours un alt sur les images qui servent de liens.
4. Labels de formulaires manquants (46 % des sites)
Le problème : champs sans label, placeholder utilisé comme seule indication, label visuellement éloigné du champ.
La solution : un <label for="id"> associé à chaque champ, des labels visibles à l'écran, fieldset/legend pour les groupes de champs. On en a parlé plus haut, le placeholder n'est PAS un label.
5. Boutons vides (28 % des sites)
Le problème : un bouton avec juste une icône hamburger, pas de texte. Un « X » de fermeture sans label. Le lecteur d'écran annonce « bouton » et c'est tout. Bouton quoi ? Mystère.
La solution : du texte visible ou au minimum un aria-label sur chaque bouton (« Fermer la modale », « Ouvrir le menu »).
6. Langue de la page non définie (18 % des sites)
Le problème : l'attribut lang manque sur <html>. Résultat : le lecteur d'écran ne sait pas dans quelle langue lire et peut prononcer du français avec un accent anglais. Pas idéal.
La solution : <html lang="fr">. Une ligne. C'est littéralement la correction la plus rapide de cette liste. Pour les passages dans une autre langue : <span lang="en">feedback</span>.
7. Structure de titres incorrecte
Le problème : pas de h1, sauts de niveaux (h1 directement suivi d'un h3), titres utilisés juste pour avoir du texte gros.
La solution : un seul h1 par page, hiérarchie logique sans sauts, et les styles visuels gérés par CSS, pas par les balises de titre.
8. Focus invisible ou supprimé
Le problème : le fameux outline: none dans le CSS global. Le focus existe mais personne ne le voit. Sur un fond sombre, c'est encore pire.
La solution : :focus-visible avec un outline bien contrasté (3px solid, contraste 3:1 minimum). La règle d'or : ne jamais supprimer l'outline sans le remplacer par quelque chose de visible.
9. Tableaux sans en-têtes
Le problème : des tableaux de données sans <th>, ou des tableaux utilisés pour la mise en page sans role="presentation".
La solution : <th scope="col"> pour les en-têtes de colonnes, <th scope="row"> pour les lignes, et un <caption> descriptif. Un lecteur d'écran peut alors naviguer intelligemment dans le tableau.
10. Contenu inaccessible au clavier
Le problème : des <div> cliquables sans rôle ni gestion clavier. Des événements uniquement sur onMouseOver. Des composants custom impossibles à utiliser sans souris.
La solution : utilisez les éléments natifs <button> et <a>, ajoutez onKeyDown en complément de onClick, et testez sans souris. Si vous ne pouvez pas cliquer dessus avec Entrée ou Espace, c'est cassé.
Comment prioriser les corrections
Tout corriger d'un coup n'est pas réaliste. Voici comment prioriser intelligemment :
| Erreur | Impact | Effort | Priorité |
|---|---|---|---|
| Langue de la page | Élevé | Très faible | Immédiat |
| Alt images | Élevé | Faible | Immédiat |
| Labels formulaires | Critique | Faible | Immédiat |
| Contrastes | Élevé | Moyen | Court terme |
| Focus visible | Élevé | Faible | Court terme |
| Structure titres | Moyen | Moyen | Moyen terme |
Corriger ces 10 erreurs résout la majorité des problèmes d'accessibilité. Commencez par les actions à faible effort et fort impact — la langue de la page, les alt, les labels. En une journée de travail, vous pouvez déjà transformer la situation.