Top 10 des erreurs d'accessibilité les plus fréquentes sur les sites web
Les 10 problèmes d'accessibilité web les plus courants, détectés sur des milliers de sites. Comment les identifier et les corriger rapidement.
Après l'analyse de milliers de pages web, les mêmes erreurs d'accessibilité reviennent systématiquement. Voici les 10 plus fréquentes, avec leur impact et la correction à appliquer.
1. Images sans texte alternatif
Fréquence : présent sur 65% des sites
Le problème : les images informatives sans attribut alt sont invisibles pour les lecteurs d'écran. L'utilisateur entend « image » sans savoir ce qu'elle représente.
La correction :
<!-- Mauvais -->
<img src="graphique-ventes.png">
<!-- Bon : image informative -->
<img src="graphique-ventes.png" alt="Évolution des ventes : +23% au T3 2026">
<!-- Bon : image décorative -->
<img src="decoration.png" alt="" role="presentation">
Critère RGAA : 1.1, 1.2
2. Contraste de couleurs insuffisant
Fréquence : présent sur 83% des sites
Le problème : le texte est difficile à lire pour les personnes malvoyantes, les daltoniens, ou simplement en plein soleil sur mobile.
Les ratios minimum :
- Texte normal : 4.5:1
- Texte agrandi (24px ou 18.5px gras) : 3:1
- Composants d'interface : 3:1
La correction : utiliser un vérificateur de contraste et ajuster les couleurs. Les gris clairs sur fond blanc sont les principaux coupables.
Critère RGAA : 3.2, 3.3
3. Formulaires sans étiquettes
Fréquence : présent sur 55% des sites
Le problème : un champ de formulaire sans label associé ne communique pas sa fonction aux lecteurs d'écran. L'utilisateur ne sait pas ce qu'on lui demande de saisir.
La correction :
<!-- Mauvais -->
<input type="email" placeholder="Votre email">
<!-- Bon -->
<label for="email">Adresse email</label>
<input type="email" id="email" placeholder="exemple@mail.com">
Le placeholder n'est pas un substitut au label : il disparaît à la saisie et a souvent un contraste insuffisant.
Critère RGAA : 11.1, 11.2
4. Liens sans intitulé explicite
Fréquence : présent sur 50% des sites
Le problème : les liens « Cliquez ici », « En savoir plus » ou « Lire la suite » ne communiquent pas leur destination hors contexte.
La correction :
<!-- Mauvais -->
<a href="/tarifs">Cliquez ici</a>
<!-- Bon -->
<a href="/tarifs">Voir nos tarifs</a>
<!-- Acceptable : avec aria-label -->
<a href="/tarifs" aria-label="Voir nos tarifs">En savoir plus</a>
Critère RGAA : 6.1, 6.2
5. Structure de titres incohérente
Fréquence : présent sur 58% des sites
Le problème : les titres h1 à h6 servent de plan de navigation pour les lecteurs d'écran. Sauter des niveaux (h1 → h3) ou avoir plusieurs h1 casse la hiérarchie.
La correction :
<!-- Mauvais -->
<h1>Accueil</h1>
<h3>Nos services</h3> <!-- h2 manquant -->
<h5>Détails</h5> <!-- h4 manquant -->
<!-- Bon -->
<h1>Accueil</h1>
<h2>Nos services</h2>
<h3>Détails</h3>
Critère RGAA : 9.1
6. Pas de lien d'évitement (skip-link)
Fréquence : absent sur 70% des sites
Le problème : les utilisateurs au clavier doivent tabuler à travers tout le menu de navigation pour atteindre le contenu principal. Sur un site avec 20 liens de navigation, c'est 20 appuis sur Tab à chaque page.
La correction :
<body>
<a href="#main-content" class="sr-only focus:not-sr-only">
Aller au contenu principal
</a>
<nav><!-- navigation --></nav>
<main id="main-content"><!-- contenu --></main>
</body>
Critère RGAA : 12.7
7. Langue de la page non déclarée
Fréquence : absent sur 25% des sites français
Le problème : sans l'attribut lang, les lecteurs d'écran ne savent pas dans quelle langue prononcer le contenu. Un texte français lu avec une voix anglaise est incompréhensible.
La correction :
<html lang="fr">
Pour les passages dans une autre langue :
<p>Le concept de <span lang="en">responsive design</span> est essentiel.</p>
Critère RGAA : 8.3, 8.4
8. Focus invisible au clavier
Fréquence : supprimé sur 40% des sites
Le problème : certains designers suppriment l'indicateur de focus (outline: none) pour des raisons esthétiques. Les utilisateurs au clavier ne savent plus où ils se trouvent sur la page.
La correction :
/* Mauvais */
*:focus { outline: none; }
/* Bon : focus visible personnalisé */
*:focus-visible {
outline: 2px solid #0066CC;
outline-offset: 2px;
}
La pseudo-classe focus-visible n'affiche le focus que pour la navigation au clavier, pas pour les clics souris.
Critère RGAA : 10.7
9. Attribut autocomplete manquant
Fréquence : absent sur 75% des formulaires
Le problème : les champs de données personnelles (nom, email, adresse, téléphone) sans autocomplete ne sont pas pré-remplis automatiquement. Les utilisateurs avec des handicaps moteurs doivent tout retaper.
La correction :
<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="address" autocomplete="street-address">
Critère RGAA : 11.13
10. Landmarks ARIA absents
Fréquence : incomplet sur 45% des sites
Le problème : les zones de la page (navigation, contenu principal, pied de page) ne sont pas identifiées. Les lecteurs d'écran ne peuvent pas proposer de navigation par zones.
La correction :
<header role="banner"><!-- en-tête --></header>
<nav role="navigation" aria-label="Menu principal"><!-- nav --></nav>
<main role="main"><!-- contenu --></main>
<aside role="complementary"><!-- sidebar --></aside>
<footer role="contentinfo"><!-- pied de page --></footer>
Avec les éléments HTML5 sémantiques (header, nav, main, footer), les rôles ARIA sont implicites mais il est recommandé de les expliciter pour la compatibilité.
Critère RGAA : 9.2, 12.6
Conclusion
Ces 10 erreurs représentent à elles seules 80% des non-conformités détectées lors d'un audit RGAA. La bonne nouvelle : elles sont toutes détectables automatiquement et corrigeables rapidement.
Un audit automatisé identifie ces problèmes en quelques minutes sur l'ensemble de votre site, page par page. Il suffit ensuite de prioriser les corrections par nombre de pages impactées.
◆ Fin de l'article
Chaabane LEMARED · 05 avril 2026
◆ Passez à l'action
La théorie c'est bien.
Le terrain, c'est mieux.
Lancez un audit RGAA 4.1 sur votre site en 2 minutes. Gratuit, sans carte bancaire.