Guides pratiques
Checklist accessibilité web : les 12 défauts les plus fréquents et comment les corriger
Publié le 24 janvier 2026
L'accessibilité numérique n'est pas un sujet abstrait réservé aux experts. La majorité des non-conformités que l'on retrouve sur les sites français se résument à une douzaine de défauts récurrents, souvent simples à corriger une fois qu'on les a identifiés. Cette liste n'est pas exhaustive (le RGAA compte 106 critères) mais couvre les violations qui apparaissent dans plus de 70 % des audits.
1. Images sans texte alternatif
Le défaut : une balise <img> sans attribut alt, ou avec un alt vide alors que l'image porte de l'information.
La correction : ajoutez alt="Description concise de l'image". Pour les images purement décoratives, utilisez alt="" (vide, pas absent).
2. Contraste de texte insuffisant
Le défaut : le rapport de contraste entre la couleur du texte et celle de son arrière-plan est inférieur à 4,5:1 pour le texte courant (3:1 pour les grands textes ≥ 18 pt ou 14 pt en gras).
La correction : utilisez un outil de vérification (Colour Contrast Analyser, WebAIM Contrast Checker) pour ajuster vos couleurs. Notre guide sur l'amélioration des contrastes de couleurs détaille la méthode complète.
3. Champs de formulaire sans étiquette
Le défaut : un <input> n'est pas associé à un <label>. Le placeholder seul ne suffit pas : il disparaît dès la saisie et n'est pas toujours restitué par les lecteurs d'écran.
La correction : reliez chaque champ à son libellé avec l'attribut for sur le label et l'id correspondant sur l'input. Si le libellé est visuellement masqué, utilisez la classe sr-only (visible uniquement par les lecteurs d'écran).
4. Liens sans texte accessible
Le défaut : un lien dont le texte est vide, contient uniquement une icône, ou reprend un générique comme « cliquez ici » ou « en savoir plus » sans contexte.
La correction : rédigez des textes de liens descriptifs, ou ajoutez un aria-label explicite sur les liens icônes. Exemple : aria-label="Voir les tarifs de l'abonnement Pro".
5. Page sans titre <title> unique
Le défaut : toutes les pages du site affichent le même titre dans l'onglet du navigateur, ou le titre est absent.
La correction : chaque page doit avoir un <title> unique et descriptif, idéalement de la forme « Nom de la page | Nom du site ».
6. Hiérarchie de titres incorrecte
Le défaut : les balises <h1> à <h6> sont utilisées pour leur apparence visuelle plutôt que pour leur sémantique (sauts de niveaux, plusieurs <h1> par page, absence de <h1>).
La correction : structurez vos titres comme un plan de document. Un seul <h1> par page, des <h2> pour les sections principales, des <h3> pour les sous-sections, sans saut de niveau.
7. Navigation impossible au clavier
Le défaut : certains éléments interactifs (menus déroulants, carrousels, modales, onglets) ne sont pas accessibles via la touche Tab, ou le focus visuel est supprimé avec outline: none.
La correction : testez votre site en navigant uniquement au clavier. Tout élément interactif doit être atteignable et utilisable sans souris. Ne supprimez jamais le focus CSS sans proposer un équivalent visible.
8. Langue de la page non déclarée
Le défaut : l'attribut lang est absent de la balise <html>, ou incorrectement renseigné.
La correction : ajoutez <html lang="fr"> sur les pages en français. Les lecteurs d'écran utilisent cet attribut pour choisir la voix de synthèse adaptée.
9. Zoom bloqué
Le défaut : la balise meta viewport contient user-scalable=no ou maximum-scale=1, empêchant l'agrandissement du contenu.
La correction : supprimez ces paramètres. La balise viewport recommandée est simplement : <meta name="viewport" content="width=device-width, initial-scale=1">.
10. Tableaux de données sans en-têtes
Le défaut : un tableau de données n'utilise pas les balises <th> pour ses en-têtes de colonnes ou de lignes.
La correction : remplacez les <td> d'en-tête par des <th scope="col"> (colonne) ou <th scope="row"> (ligne).
11. Vidéos sans sous-titres
Le défaut : une vidéo intégrée au site ne dispose pas de sous-titres synchronisés (fichier VTT ou SRT).
La correction : ajoutez une piste de sous-titres via la balise <track kind="captions">, ou utilisez la fonctionnalité de sous-titres de votre hébergeur vidéo (YouTube, Vimeo).
12. Identifiants HTML dupliqués
Le défaut : plusieurs éléments de la page partagent le même attribut id. Les attributs ARIA (aria-labelledby, aria-describedby) et les ancres de page ne fonctionnent alors pas correctement.
La correction : chaque id doit être unique par page. Un outil d'audit automatique comme Plainpied détecte cette erreur en quelques secondes sur l'ensemble du site.
Par où commencer ?
Ces douze défauts sont détectables automatiquement et constituent une bonne base de départ. Pour aller plus loin, consultez notre article sur les obligations légales en matière d'accessibilité et comprenez ce que la réglementation exige précisément de votre organisation. Un audit express Plainpied vous permet d'identifier immédiatement lesquels de ces défauts sont présents sur votre site.
Identifiez vos défauts en 10 minutes
L'audit express Plainpied vérifie ces critères sur toutes vos pages. Gratuit, sans compte requis.
Lancer l'audit gratuit