Les 5 violations WCAG les plus courantes et comment les corriger

Chaque année, WebAIM analyse le million de sites web les plus visités en matière d'accessibilité. Les résultats sont constants : 94,8 % des pages d'accueil présentent des erreurs WCAG détectables. Mais les mêmes cinq problèmes apparaissent sur la grande majorité des sites défaillants.

1. Contraste de texte insuffisant

Présent sur 79,1 % des pages d'accueil. La violation WCAG la plus courante.

WCAG 2.1 exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour le texte large.

Comment corriger

/* Avant — échoue (2,5:1) */
.subtitle { color: #999999; background: #ffffff; }

/* Après — réussit (7:1) */
.subtitle { color: #595959; background: #ffffff; }

2. Texte alternatif d'image manquant

Présent sur 55,5 % des pages d'accueil.

<img src="team-photo.jpg" alt="L'équipe WCAGAlert dans leurs bureaux de Stockholm">

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

3. Étiquettes de formulaire manquantes

Présent sur 48 % des pages d'accueil.

<label for="email">Adresse e-mail</label>
<input type="email" id="email">

4. Liens vides

Présent sur 48,6 % des pages d'accueil.

<a href="/twitter" aria-label="Suivez-nous sur Twitter">
  <svg aria-hidden="true">...</svg>
</a>

5. Langue du document manquante

Présent sur 17,1 % des pages d'accueil.

<html lang="fr">

Vue d'ensemble

Ces cinq problèmes représentent la majorité des violations WCAG détectées automatiquement. Mettez en place une surveillance automatisée pour détecter ces problèmes dès qu'ils apparaissent.