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.

html
<!-- 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.

css
/* 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.

html
<!-- 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.

html
<!-- 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.

html
<!-- 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>

6. Navigation au clavier impossible

Fréquence : 61% des sites

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

html
<!-- 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.

css
/* 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.

html
<!-- 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.

html
<!-- 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.

html
<!-- 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 :

  • [ ] Toutes les images ont un alt approprié
  • [ ] Le contraste texte/fond est ≥ 4.5:1
  • [ ] Tous les champs de formulaire ont un label
  • [ ] Les liens ont des intitulés explicites
  • [ ] La hiérarchie des titres est logique
  • [ ] Tout est navigable au clavier
  • [ ] Le focus est visible
  • [ ] lang est défini sur <html>
  • [ ] Les tableaux ont des en-têtes
  • [ ] Les vidéos ont des sous-titres

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.