Top 10 des erreurs d'accessibilité web (et comment les corriger)

Après avoir audité des centaines de sites, nous avons identifié les erreurs d’accessibilité les plus fréquentes. Voici le top 10 avec des exemples de code avant/après pour chaque correction.

1. Images sans alternative textuelle

Fréquence : 94% des sites

L’absence d’attribut alt sur les images est l’erreur la plus répandue. Les utilisateurs de lecteurs d’écran ne peuvent pas accéder à l’information.

<!-- Avant : erreur -->
<img src="promo-soldes.jpg">

<!-- Après : corrigé -->
<img src="promo-soldes.jpg" alt="Soldes d'été : -50% sur toute la collection">

Règle : Image informative = alt descriptif. Image décorative = alt="".

2. Contraste insuffisant

Fréquence : 86% des sites

Un texte gris clair sur fond blanc est illisible pour de nombreux utilisateurs. Le ratio minimum est 4.5:1.

/* Avant : ratio 2.5:1 */
.text {
  color: #aaa;
  background: #fff;
}

/* Après : ratio 7:1 */
.text {
  color: #595959;
  background: #fff;
}

Outil : Utilisez un vérificateur de contraste comme WebAIM Contrast Checker.

3. Formulaires sans labels

Fréquence : 78% des sites

Un placeholder ne remplace pas un label. Les lecteurs d’écran ont besoin d’une association explicite.

<!-- Avant : erreur -->
<input type="email" placeholder="Votre email">

<!-- Après : corrigé -->
<label for="email">Adresse email</label>
<input type="email" id="email" placeholder="exemple@domaine.fr">

4. Liens non explicites

Fréquence : 72% des sites

“Cliquez ici” ou “En savoir plus” ne permettent pas de comprendre la destination du lien.

<!-- Avant : erreur -->
<p>Pour découvrir nos offres, <a href="/tarifs">cliquez ici</a>.</p>

<!-- Après : corrigé -->
<p><a href="/tarifs">Découvrir nos tarifs et offres</a></p>

5. Structure de titres incohérente

Fréquence : 68% des sites

Sauter des niveaux de titres (h1 > h3) ou utiliser plusieurs h1 casse la structure logique.

<!-- Avant : erreur -->
<h1>Accueil</h1>
<h3>Nos services</h3>  <!-- Saut de niveau -->
<h1>Contact</h1>       <!-- Doublon h1 -->

<!-- Après : corrigé -->
<h1>Accueil</h1>
<h2>Nos services</h2>
<h2>Contact</h2>

Fréquence : 61% des sites

Des éléments interactifs inaccessibles au clavier bloquent les utilisateurs qui ne peuvent pas utiliser une souris.

<!-- Avant : erreur -->
<div onclick="openMenu()">Menu</div>

<!-- Après : corrigé -->
<button type="button" onclick="openMenu()">Menu</button>

Règle : Tout élément cliquable doit être un <button> ou <a>.

7. Absence de focus visible

Fréquence : 57% des sites

Supprimer le focus outline empêche les utilisateurs au clavier de savoir où ils sont.

/* Avant : erreur */
*:focus {
  outline: none;
}

/* Après : corrigé */
*:focus-visible {
  outline: 2px solid #0F4C75;
  outline-offset: 2px;
}

8. Langue de page non déclarée

Fréquence : 45% des sites

Sans attribut lang, les lecteurs d’écran ne prononcent pas correctement le contenu.

<!-- Avant : erreur -->
<html>

<!-- Après : corrigé -->
<html lang="fr">

9. Tableaux sans en-têtes

Fréquence : 42% des sites

Les tableaux de données sans balises <th> sont incompréhensibles pour les technologies d’assistance.

<!-- Avant : erreur -->
<table>
  <tr>
    <td>Produit</td>
    <td>Prix</td>
  </tr>
</table>

<!-- Après : corrigé -->
<table>
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
</table>

10. Vidéos sans sous-titres

Fréquence : 38% des sites

Les contenus vidéo sans sous-titres excluent les utilisateurs sourds ou malentendants.

<!-- Après : corrigé -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-fr.vtt" srclang="fr" label="Français">
</video>

Checklist rapide

Avant de publier, vérifiez :

Automatiser la détection

Ces 10 erreurs représentent 80% des non-conformités. La bonne nouvelle : elles sont toutes détectables automatiquement.

Gagnez du temps avec Accorma. Découvrez notre plateforme et identifiez ces erreurs en quelques minutes.