Top 5 des erreurs d'accessibilité les plus fréquentes (et comment les corriger)

Après avoir analysé plus de 10 000 audits d’accessibilité, nous avons identifié que 5 erreurs seulement représentent 70% des problèmes de conformité RGAA rencontrés sur les sites web français.

Ces erreurs sont présentes sur la quasi-totalité des sites non optimisés pour l’accessibilité, mais la bonne nouvelle ? Elles sont toutes simples à corriger une fois qu’on les connaît et qu’on applique les bonnes pratiques.

Voici le guide complet pour les identifier, les comprendre et les résoudre définitivement.

1. Images sans alternative textuelle

🔍 Fréquence : 95% des sites audités 📋 Critère RGAA : 1.1 - Chaque image porteuse d’information a-t-elle une alternative textuelle ? ⚡ Impact : Bloquant total pour les utilisateurs de lecteurs d’écran

Le problème détecté

<!-- ❌ ERREUR TRÈS FRÉQUENTE -->
<img src="graphique-ventes-2024.png">
<img src="logo-entreprise.svg" alt="">
<img src="bouton-télécharger.png" onclick="download()">
<img src="icone-telephone.svg"><span>01 23 45 67 89</span>

Pourquoi c’est problématique :

Les 12 millions de Français malvoyants ne peuvent pas accéder à l’information
Les images-liens deviennent inutilisables
Les graphiques et schémas sont totalement invisibles pour les lecteurs d’écran
Perte d’information critique sur les fonctionnalités du site

La solution complète

<!-- ✅ SOLUTION CORRECTE -->
<!-- Images informatives -->
<img src="graphique-ventes-2024.png"
     alt="Graphique montrant une augmentation des ventes de 25% en 2024">

<!-- Logos informatifs -->
<img src="logo-entreprise.svg"
     alt="Logo de l'entreprise ABC">

<!-- Images fonctionnelles -->
<img src="bouton-télécharger.png"
     alt="Télécharger le document PDF"
     onclick="download()">

<!-- Icônes avec texte -->
<img src="icone-telephone.svg"
     alt="Téléphone">
<span>01 23 45 67 89</span>

<!-- Images décoratives (important !) -->
<img src="decoration-florale.png"
     alt=""
     role="presentation">

Guide des bonnes pratiques

Pour les images informatives :

Décrivez le contenu visible et son sens
125 caractères maximum pour rester concis
Adaptez au contexte d’utilisation

Pour les images fonctionnelles :

Décrivez l’action déclenchée par l’image
Exemple : “Imprimer la page”, “Fermer la fenêtre”, “Ajouter au panier”

Pour les images décoratives :

Toujours alt="" (alt vide, pas d’attribut absent)
Ajoutez role="presentation" pour plus de clarté

Outil de vérification rapide

Test manuel simple :

Désactivez les images dans votre navigateur
Naviguez sur votre site
Toute information manquante révèle un problème d’alternative textuelle

2. Contrastes de couleurs insuffisants

🔍 Fréquence : 89% des sites audités 📋 Critère RGAA : 3.2 - Le contraste entre les couleurs du texte et de l’arrière-plan est-il suffisamment élevé ? ⚡ Impact : Difficulté de lecture pour 8% de la population (déficience visuelle)

Le problème très répandu

/* ❌ ERREURS TYPIQUES */
.texte-gris-clair {
    color: #999999;        /* Contraste 2.8:1 - INSUFFISANT */
    background: #ffffff;
}

.bouton-tendance {
    color: #e0e0e0;        /* Contraste 1.4:1 - TRÈS INSUFFISANT */
    background: #f5f5f5;
}

.lien-discret {
    color: #cccccc;        /* Contraste 1.6:1 - INSUFFISANT */
    background: #ffffff;
}

Les seuils de conformité RGAA

Type de contenu	Contraste minimum	Niveau
Texte normal	4.5:1	AA obligatoire
Texte agrandi (18pt+ ou 14pt+ gras)	3:1	AA obligatoire
Éléments d’interface (boutons, icônes)	3:1	AA obligatoire
Texte de qualité supérieure	7:1	AAA recommandé

La solution avec exemples concrets

/* ✅ SOLUTIONS CONFORMES */
.texte-accessible {
    color: #333333;        /* Contraste 12.6:1 ✓ */
    background: #ffffff;
}

.bouton-conforme {
    color: #ffffff;        /* Contraste 4.5:1 ✓ */
    background: #0066cc;
    border: 2px solid #004499;
}

.lien-visible {
    color: #0066cc;        /* Contraste 4.5:1 ✓ */
    background: #ffffff;
}

/* États de survol avec contraste maintenu */
.bouton-conforme:hover {
    background: #004499;   /* Contraste 6.1:1 ✓ */
    color: #ffffff;
}

.bouton-conforme:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

Test rapide :

/* Ajoutez temporairement cette règle pour tester */
* {
    filter: grayscale(100%);
}
/* Votre contenu reste-t-il lisible en niveaux de gris ? */

3. Formulaires sans étiquettes associées

🔍 Fréquence : 84% des sites audités 📋 Critère RGAA : 11.1 - Chaque champ de formulaire a-t-il une étiquette ? ⚡ Impact : Formulaires inutilisables au lecteur d’écran

Le problème omniprésent

<!-- ❌ ERREUR CLASSIQUE -->
<form>
    <!-- Placeholder utilisé comme étiquette -->
    <input type="text" placeholder="Votre nom">
    <input type="email" placeholder="Email">

    <!-- Texte non associé -->
    <div>Téléphone</div>
    <input type="tel">

    <!-- Select sans label -->
    <select>
        <option>Choisir votre pays...</option>
        <option>France</option>
        <option>Belgique</option>
    </select>

    <!-- Bouton radio sans groupement -->
    <input type="radio" name="civilite" value="mme"> Madame
    <input type="radio" name="civilite" value="mr"> Monsieur
</form>

Pourquoi c’est problématique :

Les lecteurs d’écran ne peuvent pas identifier les champs
Navigation clavier impossible entre les champs
Clic sur l’étiquette non fonctionnel pour activer le champ
Formulaires inaccessibles = perte de conversions/leads

La solution complète et accessible

<!-- ✅ FORMULAIRE TOTALEMENT ACCESSIBLE -->
<form>
    <!-- Champs texte avec labels associés -->
    <label for="nom">Nom complet *</label>
    <input type="text"
           id="nom"
           name="nom"
           required
           aria-describedby="nom-aide">
    <div id="nom-aide" class="aide">Saisissez votre nom et prénom</div>

    <!-- Email avec validation -->
    <label for="email">Adresse email *</label>
    <input type="email"
           id="email"
           name="email"
           required
           aria-describedby="email-format">
    <div id="email-format" class="aide">Format : nom@domaine.com</div>

    <!-- Téléphone optionnel -->
    <label for="telephone">Téléphone (optionnel)</label>
    <input type="tel"
           id="telephone"
           name="telephone"
           aria-describedby="tel-format">
    <div id="tel-format" class="aide">Format : 01 23 45 67 89</div>

    <!-- Select avec label -->
    <label for="pays">Pays de résidence *</label>
    <select id="pays" name="pays" required>
        <option value="">Sélectionnez votre pays</option>
        <option value="fr">France</option>
        <option value="be">Belgique</option>
        <option value="ch">Suisse</option>
    </select>

    <!-- Groupe de boutons radio -->
    <fieldset>
        <legend>Civilité *</legend>
        <input type="radio" id="mme" name="civilite" value="mme" required>
        <label for="mme">Madame</label>

        <input type="radio" id="mr" name="civilite" value="mr" required>
        <label for="mr">Monsieur</label>
    </fieldset>

    <!-- Bouton de soumission -->
    <button type="submit">Envoyer le formulaire</button>
</form>

Techniques avancées d’étiquetage

<!-- Étiquetage par aria-label (cas particuliers) -->
<input type="search"
       aria-label="Rechercher dans le catalogue produits"
       placeholder="Rechercher...">

<!-- Étiquetage par aria-labelledby (titres existants) -->
<h2 id="adresse-titre">Adresse de livraison</h2>
<input type="text"
       aria-labelledby="adresse-titre"
       placeholder="Numéro et nom de rue">

<!-- Gestion des erreurs -->
<label for="email-signup">Email</label>
<input type="email"
       id="email-signup"
       aria-describedby="email-error"
       aria-invalid="true">
<div id="email-error" role="alert" class="error">
    Veuillez saisir une adresse email valide
</div>

4. Hiérarchie de titres incohérente

🔍 Fréquence : 78% des sites audités 📋 Critère RGAA : 9.1 - L’information est-elle structurée par l’utilisation appropriée de titres ? ⚡ Impact : Navigation impossible pour les utilisateurs de lecteurs d’écran

Le problème de structure

<!-- ❌ HIÉRARCHIE CHAOTIQUE -->
<h1>Accueil</h1>
<h3>Nos services</h3>        <!-- ❌ Saut de niveau h1→h3 -->
<h2>Design web</h2>          <!-- ❌ Retour en arrière illogique -->
<h4>Responsive design</h4>
<h2>Développement</h2>
<h4>Technologies React</h4>  <!-- ❌ Saut de niveau h2→h4 -->
<h1>Contact</h1>             <!-- ❌ Deuxième h1 sur la page -->

Impact utilisateur :

Impossible de naviguer de titre en titre avec un lecteur d’écran
Structure du contenu incompréhensible
SEO dégradé par manque de hiérarchie logique
Expérience utilisateur confuse pour tous

La solution : structure logique parfaite

<!-- ✅ HIÉRARCHIE LOGIQUE ET ACCESSIBLE -->
<h1>Accueil - Agence web spécialisée accessibilité</h1>

<h2>Nos services</h2>
    <h3>Design web accessible</h3>
        <h4>Responsive design</h4>
        <h4>Design inclusif</h4>
        <h4>Ergonomie UX</h4>

    <h3>Développement web</h3>
        <h4>Technologies React</h4>
        <h4>Applications Vue.js</h4>
        <h4>Sites WordPress</h4>

    <h3>Audit et conseil</h3>
        <h4>Audit RGAA complet</h4>
        <h4>Formation équipes</h4>

<h2>Notre expertise</h2>
    <h3>10 ans d'expérience</h3>
    <h3>Certifications RGAA</h3>

<h2>Nous contacter</h2>
    <h3>Demande de devis</h3>
    <h3>Coordonnées</h3>

Règles d’or de la hiérarchie

✅ Règles à respecter absolument :

Un seul h1 par page (titre principal)
Ordre séquentiel strict : h1 → h2 → h3 → h4 → h5 → h6
Pas de saut de niveau : après h2, directement h4 est interdit
Hiérarchie logique reflétant la structure réelle du contenu
Titres descriptifs du contenu qu’ils introduisent

🔧 Comment corriger :

<!-- Au lieu de styliser avec les titres -->
<h4 class="petit-titre">Sous-section</h4>

<!-- Utilisez la bonne hiérarchie + CSS -->
<h3 class="style-petit-titre">Sous-section</h3>

Test de validation simple

Méthode du plan de page :

Listez tous vos titres dans l’ordre
Votre plan doit être logique comme un sommaire de livre
Aucun saut de niveau ne doit apparaître

Extension recommandée : HeadingsMap (visualise votre hiérarchie)

5. Liens non explicites

🔍 Fréquence : 76% des sites audités 📋 Critère RGAA : 6.1 - Chaque lien est-il explicite ? ⚡ Impact : Navigation impossible et confusion totale pour les lecteurs d’écran

Le problème des liens génériques

<!-- ❌ LIENS NON EXPLICITES TRÈS COURANTS -->
<a href="rapport-annuel.pdf">Cliquez ici</a>
<a href="/services-web">En savoir plus</a>
<a href="/blog/article-seo">Lire la suite</a>
<a href="/contact">Plus d'infos</a>
<a href="tel:0123456789">Appelez-nous</a>

<!-- Navigation avec liens identiques -->
<article>
    <h3>Formation RGAA</h3>
    <p>Apprenez l'accessibilité web...</p>
    <a href="/formation-rgaa">Lire la suite</a>
</article>
<article>
    <h3>Audit accessibilité</h3>
    <p>Évaluez votre conformité...</p>
    <a href="/audit-accessibilite">Lire la suite</a>  <!-- ❌ Identique au précédent -->
</article>

Pourquoi c’est problématique :

Les utilisateurs de lecteurs d’écran naviguent de lien en lien
Liens identiques créent une confusion totale
“Cliquez ici” répété 20 fois = navigation impossible
Perte de contexte quand le lien est lu isolément

La solution : liens explicites et uniques

<!-- ✅ LIENS PARFAITEMENT EXPLICITES -->
<a href="rapport-annuel-2024.pdf">
    Télécharger le rapport annuel 2024 (PDF, 2,3 Mo)
</a>

<a href="/services-web">
    Découvrir nos services de développement web accessible
</a>

<a href="/blog/optimiser-seo-2025">
    Lire l'article complet : Comment optimiser son SEO en 2025
</a>

<a href="/contact-devis-gratuit">
    Nous contacter pour un devis gratuit personnalisé
</a>

<a href="tel:+33123456789">
    Appeler le 01 23 45 67 89 (prix d'un appel local)
</a>

<!-- Navigation avec contexte unique -->
<article>
    <h3>Formation RGAA</h3>
    <p>Apprenez l'accessibilité web en 2 jours...</p>
    <a href="/formation-rgaa">
        En savoir plus sur la formation RGAA (2 jours)
    </a>
</article>
<article>
    <h3>Audit accessibilité</h3>
    <p>Évaluez la conformité de votre site...</p>
    <a href="/audit-accessibilite">
        Découvrir notre service d'audit RGAA complet
    </a>
</article>

Techniques avancées pour les cas complexes

<!-- Ajout de contexte invisible (screen reader only) -->
<a href="/article-complet">
    Lire la suite
    <span class="sr-only"> de l'article : Les nouveautés RGAA 4.1</span>
</a>

<!-- Avec aria-label pour surcharger -->
<a href="/document.pdf"
   aria-label="Télécharger le guide accessibilité 2025 (PDF, 1,5 Mo)">
    Télécharger le guide
</a>

<!-- Pour les icônes-liens -->
<a href="https://twitter.com/conformi"
   aria-label="Suivre Conformi sur Twitter (ouvre dans un nouvel onglet)"
   target="_blank">
    <svg aria-hidden="true"><!-- icône Twitter --></svg>
</a>

CSS pour le texte masqué visuellement

/* Classe utilitaire pour texte accessible mais invisible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alternative avec clip-path moderne */
.visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

Comment détecter ces erreurs sur votre site

Outils de détection automatique

Audit gratuit en 2 minutes :

Conformi : scan automatique complet
aXe DevTools : extension navigateur gratuite
WAVE : analyseur en ligne WebAIM
Lighthouse : audit intégré à Chrome

Tests manuels rapides (15 minutes)

Test 1 - Images : Désactivez les images dans votre navigateur Test 2 - Contrastes : Convertissez votre page en niveaux de gris Test 3 - Formulaires : Naviguez uniquement au clavier (Tab/Shift+Tab) Test 4 - Titres : Installez HeadingsMap et vérifiez la hiérarchie Test 5 - Liens : Listez tous vos liens, sont-ils explicites isolément ?

Checklist de validation

☐ Toutes les images ont un attribut alt approprié
☐ Tous les contrastes respectent le ratio 4.5:1 minimum
☐ Tous les champs de formulaire ont un label associé
☐ La hiérarchie de titres est logique (h1→h2→h3...)
☐ Tous les liens sont explicites et uniques
☐ Le site est entièrement navigable au clavier
☐ Les messages d'erreur sont associés aux champs
☐ Le focus est visible sur tous les éléments interactifs

Impact business de ces corrections

ROI immédiat des corrections

Marché élargi :

+15% d’audience accessible (12 millions de Français handicapés)
+20% de trafic SEO (sites mieux structurés)
+25% de conversions sur les formulaires optimisés

Coûts évités :

Amendes RGAA : jusqu’à 25 000€/an
Refonte d’urgence : 50 000€+ vs corrections préventives
Perte de marché : exclusion des appels d’offres publics

Temps d’implémentation

Erreur	Site 20 pages	Site 100 pages	Site 500+ pages
Images sans alt	2-4 heures	1-2 jours	3-5 jours
Contrastes couleurs	1-2 heures	4-6 heures	1-2 jours
Labels formulaires	2-3 heures	1 jour	2-3 jours
Hiérarchie titres	1-2 heures	4-6 heures	1-2 jours
Liens explicites	2-3 heures	1 jour	2-3 jours
TOTAL	1-2 jours	4-6 jours	2-3 semaines

Conclusion : 70% des problèmes résolus facilement

Ces 5 erreurs représentent 70% des problèmes d’accessibilité rencontrés. En les corrigeant, vous :

✅ Respectez la loi et évitez les sanctions ✅ Élargissez votre audience de 15% ✅ Améliorez votre SEO naturellement ✅ Réduisez les coûts de développement futurs ✅ Prenez une longueur d’avance sur vos concurrents

La correction de ces erreurs n’est pas une contrainte, c’est un investissement rentable qui améliore l’expérience de tous vos utilisateurs.

Ne laissez plus ces erreurs simples pénaliser votre site. Chaque jour de retard vous fait perdre des utilisateurs et vous expose aux sanctions réglementaires.

Prêt à identifier et corriger ces erreurs sur votre site ? Réalisez un audit gratuit en 2 minutes avec notre scanner automatique et obtenez un rapport détaillé de vos points d’amélioration prioritaires.