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

Chaque année, le rapport WebAIM Million analyse l'accessibilité des un million de pages d'accueil les plus visitées. En 2025, les résultats sont clairs : 96,3% des pages présentent au moins une erreur d'accessibilité détectable automatiquement, avec une moyenne de 51 erreurs par page. Plus révélateur encore : 96% de ces erreurs appartiennent à seulement 6 catégories, les mêmes depuis 5 ans.

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

1. Contraste de texte insuffisant (79,1% 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 trois quarts des sites web.

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;
}

[!TIP] Notre outil d'audit RGAA détecte automatiquement les problèmes de contraste et suggère des corrections.

2. Texte alternatif manquant (55,5% des pages)

Le problème

Plus de la moitié des pages contiennent des images sans alternative textuelle. En moyenne, 11 images par page sont concernées.

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 (48,2% des pages)

Le problème

Près de la moitié des pages ont des champs de formulaire sans labels correctement associés. 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">

[!NOTE] Le placeholder n'est PAS un substitut au label. Il disparaît dès que l'utilisateur commence à taper, le laissant sans indication.

4. Liens vides (45,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.

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 (26,9% des pages)

Le problème

Similaire aux liens vides, les boutons sans texte accessible laissent les utilisateurs sans indication de leur fonction.

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 (17,1% 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 en nette amélioration : il touchait un tiers des pages en 2019, contre moins de 20% aujourd'hui.

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) ont en moyenne 34,2% d'erreurs en plus que celles sans ARIA. L'utilisation d'ARIA a quadruplé depuis 2019, mais souvent de manière incorrecte.

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."

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

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.