7 problèmes d'accessibilité les plus courants et comment les corriger

Chaque année, le rapport WebAIM Million analyse l'accessibilité du million de pages d'accueil les plus visitées. L'édition de février 2026 est sans appel : 95,9 % des pages présentent au moins une erreur détectable automatiquement, avec une moyenne de 56,1 erreurs par page, en hausse de 10,1 % sur un an. Plus révélateur encore : 96 % de ces erreurs appartiennent à seulement 6 catégories, les mêmes depuis sept ans.

Voici ces problèmes récurrents et comment les résoudre.

1. Contraste de texte insuffisant (83,9 % des pages)

Le problème

Le contraste insuffisant entre le texte et son arrière-plan est l'erreur d'accessibilité numéro un. Elle touche plus de huit pages d'accueil sur dix.

Les personnes avec une basse vision, daltonisme, ou simplement celles consultant leur écran en plein soleil, peinent à lire un texte trop peu contrasté.

Les exigences WCAG

• Texte normal : ratio minimum de 4.5:1 (niveau AA)
• Grand texte (18pt+ ou 14pt gras) : ratio minimum de 3:1
• Éléments graphiques (icônes, bordures de champs) : ratio minimum de 3:1

Comment corriger

1. Auditez vos couleurs : Utilisez notre vérificateur de contraste pour tester vos combinaisons
2. Ajustez les couleurs : assombrissez le texte ou éclaircissez le fond (ou inversement)
3. Vérifiez les états : les couleurs de survol, focus et désactivé doivent aussi être contrastées
4. Attention aux placeholders : les textes d'indication dans les champs sont souvent trop clairs

/* Avant : contraste 2.5:1 - insuffisant */
.texte-secondaire {
  color: #999999;
}

/* Après : contraste 4.6:1 - conforme */
.texte-secondaire {
  color: #767676;
}

2. Texte alternatif manquant (53,1 % des pages)

Le problème

Plus de la moitié des pages contiennent des images sans alternative textuelle. Sur les 66,6 images que compte une page d'accueil en moyenne, 10,8 en sont dépourvues, soit 16,2 % du total.

Pour les utilisateurs de lecteurs d'écran, ces images sont soit complètement ignorées, soit annoncées par leur nom de fichier ("IMG_20250315_143022.jpg"), ce qui n'apporte aucune information.

Les exigences RGAA

• Critère 1.1 : chaque image porteuse d'information a une alternative textuelle
• Critère 1.2 : les images décoratives ont un alt="" vide

Comment corriger

1. Inventoriez vos images sans alt text
2. Classifiez : informative ou décorative ?
3. Rédigez des descriptions contextuelles et concises

<!-- Image informative -->
<img src="graphique.png" alt="Croissance de 45% des ventes en 2025.">

<!-- Image décorative -->
<img src="decoration.svg" alt="">

<!-- Logo lien -->
<a href="/">
  <img src="logo.png" alt="RGAA Checker - Retour à l'accueil">
</a>

Notre générateur de texte alternatif peut vous aider à créer des descriptions pertinentes.

3. Labels de formulaires manquants (51 % des pages)

Le problème

Plus de la moitié des pages ont des champs de formulaire sans label correctement associé. Les utilisateurs de lecteurs d'écran n'ont alors aucune indication sur ce qu'ils doivent saisir.

Comment corriger

Chaque champ doit avoir un label explicitement associé via les attributs for et id :

<!-- Incorrect : pas d'association -->
<label>Email</label>
<input type="email" name="email">

<!-- Correct : association explicite -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">

4. Liens vides (46,3 % des pages)

Le problème

Les liens sans texte accessible sont courants, notamment pour les icônes cliquables ou les images dans des liens.

Un lecteur d'écran annonce "lien" sans pouvoir indiquer la destination ou l'action. Le sujet va au-delà du lien vide : nos stratégies de rédaction des intitulés de liens traitent aussi des "cliquez ici" et des intitulés ambigus.

Comment corriger

<!-- Problème : lien vide -->
<a href="/panier">
  <i class="icon-cart"></i>
</a>

<!-- Solution 1 : texte masqué visuellement -->
<a href="/panier">
  <i class="icon-cart" aria-hidden="true"></i>
  <span class="sr-only">Voir le panier</span>
</a>

<!-- Solution 2 : aria-label -->
<a href="/panier" aria-label="Voir le panier">
  <i class="icon-cart" aria-hidden="true"></i>
</a>

/* Classe pour masquer visuellement mais garder accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

5. Boutons vides (30,6 % des pages)

Le problème

Similaire aux liens vides, les boutons sans texte accessible laissent les utilisateurs sans indication de leur fonction. La confusion en amont est souvent structurelle : notre guide bouton ou lien, lequel choisir explique quand chaque élément s'impose.

Comment corriger

<!-- Problème : bouton vide -->
<button onclick="search()">
  <svg>...</svg>
</button>

<!-- Solution -->
<button onclick="search()" aria-label="Lancer la recherche">
  <svg aria-hidden="true">...</svg>
</button>

Pour les boutons de fermeture de modale, un schéma courant :

<button type="button" aria-label="Fermer la fenêtre">
  <span aria-hidden="true">&times;</span>
</button>

6. Langue du document non spécifiée (13,5 % des pages)

Le problème

L'attribut lang sur la balise <html> indique la langue principale du document. Sans lui, les lecteurs d'écran utilisent leur langue par défaut, ce qui peut rendre le contenu incompréhensible.

Ce problème est le seul des six à s'améliorer nettement : il touchait un tiers des pages en 2019, contre 13,5 % en 2026.

Comment corriger

<!-- Pour un site en français -->
<!DOCTYPE html>
<html lang="fr">

Pour les passages dans une autre langue, utilisez l'attribut lang sur l'élément contenant :

<p>Le concept de <span lang="en">responsive design</span> est essentiel.</p>

7. Mauvaise utilisation d'ARIA (problème transversal)

Le problème

Paradoxalement, les pages utilisant ARIA (Accessible Rich Internet Applications) comptent en moyenne 59,1 erreurs, contre 42 pour celles qui n'en utilisent pas. L'attribut aria-hidden="true" illustre l'emballement : 23,3 occurrences par page en moyenne en 2026, contre 18 un an plus tôt et plus de 250 % de hausse depuis 2020. La corrélation ne prouve pas que ARIA dégrade l'accessibilité (les pages qui l'emploient sont aussi les plus complexes), mais elle contredit l'idée qu'en ajouter améliore mécaniquement les choses.

La première règle d'ARIA

"Si vous pouvez utiliser un élément HTML natif avec la sémantique et le comportement requis déjà intégrés, faites-le plutôt que de réutiliser un élément avec un rôle ARIA."

Cette règle et ses exceptions sont détaillées dans notre article sur la première règle d'ARIA. Pour nommer correctement un élément quand ARIA s'impose, voir le guide aria-label et aria-labelledby.

Erreurs fréquentes

<!-- Erreur : ARIA inutile -->
<button role="button">Valider</button>
<!-- Correct : l'élément natif suffit -->
<button>Valider</button>

<!-- Erreur : rôle sans comportement -->
<div role="button" onclick="submit()">Valider</div>
<!-- Correct : utiliser un vrai bouton -->
<button type="submit">Valider</button>

<!-- Erreur : aria-label redondant -->
<a href="/contact" aria-label="Contact">Contact</a>
<!-- Correct : le texte du lien suffit -->
<a href="/contact">Contact</a>

Quand ARIA est nécessaire

ARIA est légitime pour :

• Les composants complexes sans équivalent HTML (tabs, accordéons, arbres)
• Les annonces dynamiques (aria-live)
• Les relations entre éléments (aria-describedby, aria-labelledby)

Plan d'action prioritaire

Cette semaine

1. Contrastes : auditez et corrigez les couleurs de texte principales
2. Lang : vérifiez l'attribut lang sur toutes vos pages

Ce mois-ci

3. Images : auditez et ajoutez les alt text manquants
4. Formulaires : associez tous les labels aux champs

Ce trimestre

5. Liens et boutons : ajoutez du texte accessible aux éléments vides
6. ARIA : auditez et supprimez les usages incorrects

Pour une vue plus large que ces sept points, notre checklist d'accessibilité en 50 points balaie l'ensemble des thématiques, et notre sélection d'exemples de sites accessibles montre ce que donnent ces principes appliqués.

Les composants qui concentrent ces erreurs

Ces sept problèmes se retrouvent massivement dans quelques composants d'interface, chacun avec ses pièges propres :

• Carrousels : contrôle du mouvement, focus, annonces de changement de vue
• Infobulles : contenu inaccessible au clavier et au tactile
• Accordéons et onglets : état d'ouverture et relation entre déclencheur et panneau
• Visualisations de données : information portée par la seule couleur

Outils de vérification

• Audit RGAA automatisé - détection des 7 problèmes
• Vérificateur de contraste - test des combinaisons de couleurs
• Générateur alt text - aide à la rédaction
• Extension WAVE - analyse visuelle dans le navigateur

Conclusion

Ces 7 problèmes représentent la grande majorité des erreurs d'accessibilité sur le web. Leur correction ne requiert pas de compétences avancées ni de refonte majeure. En les adressant systématiquement, vous pouvez améliorer drastiquement l'accessibilité de votre site et l'expérience de millions d'utilisateurs.

Commencez par un audit pour identifier vos priorités, puis intégrez ces vérifications dans vos processus de développement pour éviter les regressions.