10 erreurs d’accessibilité web fréquentes : comment les identifier et les corriger ?

Un site internet peut être moderne, rapide et agréable à regarder tout en restant difficile à utiliser pour une partie de ses visiteurs.

Un bouton impossible à atteindre au clavier, un texte peu lisible ou un formulaire qui n’explique pas ses erreurs peuvent empêcher une personne d’accéder à une information ou de terminer une démarche en ligne.

Ces problèmes sont parfois invisibles pour les équipes qui conçoivent le site, car elles le testent souvent avec une souris, un écran standard et sans technologie d’assistance.

Pourtant, l’accessibilité web repose sur des détails qui peuvent faire une grande différence dans l’expérience des utilisateurs.

Dans cet article, découvrez les 10 erreurs d’accessibilité numérique les plus fréquentes, leurs conséquences et les solutions à envisager pour rendre votre site plus accessible.

1. Oublier les alternatives textuelles des images

Les images jouent un rôle important sur un site internet. Elles illustrent les contenus, présentent des produits ou transmettent des informations essentielles.

Mais lorsqu’une image porteuse d’information ne dispose pas d’une alternative textuelle adaptée, les personnes utilisant un lecteur d’écran risquent de ne pas accéder à cette information.

Exemple d’erreur

Une boutique en ligne présente un produit avec une image, sans description permettant d’en comprendre les caractéristiques importantes.

Comment corriger ce problème ?

Ajoutez un texte alternatif pertinent aux images informatives. Cette description doit transmettre l’information utile dans le contexte de la page, plutôt que simplement énumérer les détails visuels.

Par exemple :

Peu utile : « Image 01 ». Plus pertinent : « Sac à dos noir avec deux compartiments et des bretelles réglables ».

Une image purement décorative doit, au contraire, être ignorée par les technologies d’assistance lorsqu’elle ne transmet aucune information utile.

Le bon réflexe : vérifiez les images de votre site et demandez-vous si leur information reste accessible lorsque l’image ne peut pas être perçue.

2. Utiliser des couleurs avec un contraste insuffisant

Le contraste correspond à la différence de luminosité entre un texte et son arrière-plan.

Lorsque cette différence est trop faible, la lecture peut devenir difficile, notamment pour certaines personnes malvoyantes ou dans des conditions d’éclairage défavorables.

Exemple d’erreur

Un texte gris clair sur un fond blanc, ou un bouton violet dont le libellé se distingue difficilement du fond.

Comment corriger ce problème ?

Choisissez des couleurs offrant un contraste suffisant et vérifiez les différentes zones de votre site : textes, liens, boutons, champs de formulaire et éléments graphiques informatifs.

Pour les WCAG 2.2 au niveau AA, le rapport de contraste minimal est généralement de :

• 4,5:1 pour le texte courant ;
• 3:1 pour le grand texte.

Des exceptions existent selon la nature du contenu.

Vous pouvez utiliser un outil de mesure du contraste pour effectuer une première vérification. Attention toutefois : un résultat satisfaisant sur une couleur ne garantit pas que tous les états d’un bouton ou toutes les zones d’une page soient accessibles.

Le bon réflexe : vérifiez les contrastes avant de valider votre charte graphique, puis contrôlez leur application réelle sur le site.

3. Rendre le site inutilisable au clavier

Certaines personnes ne peuvent pas utiliser une souris et naviguent exclusivement au clavier ou avec un dispositif adapté.

Si les menus, boutons ou fenêtres interactives ne fonctionnent pas correctement au clavier, des fonctionnalités importantes peuvent devenir inaccessibles.

Exemple d’erreur

Un menu s’ouvre uniquement lorsque le pointeur de la souris passe dessus. Un visiteur qui navigue au clavier ne peut donc pas accéder aux sous-menus.

Comment corriger ce problème ?

Testez votre site sans utiliser la souris :

1. Appuyez sur Tabulation pour parcourir les éléments interactifs.
2. Vérifiez que le focus reste visible.
3. Utilisez les touches appropriées pour activer les boutons et parcourir les composants.
4. Vérifiez qu’aucune fenêtre ne bloque définitivement la navigation.
5. Assurez-vous que les éléments sont parcourus dans un ordre logique.

La navigation au clavier est un contrôle simple, mais essentiel pour repérer certains obstacles.

Le bon réflexe : testez régulièrement les parcours importants, notamment les menus, les formulaires et les processus d’achat.

4. Créer des liens dont le texte manque de précision

Les liens permettent de naviguer entre les pages et d’accéder à des ressources. Leur intitulé doit aider les utilisateurs à comprendre leur destination ou leur fonction.

Des formulations vagues peuvent rendre la navigation moins claire, en particulier lorsque plusieurs liens similaires apparaissent sur une même page.

Exemple d’erreur

Une page contient cinq liens intitulés « En savoir plus », sans contexte suffisamment clair.

Comment corriger ce problème ?

Privilégiez des intitulés précis et utiles :

• Au lieu de « Cliquez ici », utilisez « Consulter nos services d’accessibilité numérique ».
• Au lieu de « En savoir plus », utilisez « Comprendre les principes POUR ».
• Au lieu de « Lire la suite », utilisez « Découvrir les erreurs d’accessibilité les plus fréquentes ».

Le contexte peut parfois rendre un lien compréhensible, mais un intitulé explicite reste une bonne pratique.

Le bon réflexe : relisez les liens de vos pages et vérifiez que leur fonction peut être comprise sans devoir deviner leur destination.

5. Négliger la structure des titres

Les titres organisent le contenu et permettent de repérer rapidement les différentes parties d’une page.

Une structure mal définie peut compliquer la navigation, notamment pour les personnes utilisant un lecteur d’écran.

Exemple d’erreur

Tous les titres sont créés avec du texte en gras et une grande taille de police, sans véritable hiérarchie dans le code HTML.

Visuellement, la page peut sembler bien organisée, mais sa structure n’est pas nécessairement correctement restituée aux technologies d’assistance.

Comment corriger ce problème ?

Utilisez des titres HTML adaptés à la hiérarchie du contenu :

• H1 pour le titre principal de la page ;
• H2 pour les grandes sections ;
• H3 pour les sous-sections des H2, lorsque cela est pertinent.

Ne choisissez pas un niveau de titre uniquement pour obtenir une taille de texte particulière. L’apparence doit être gérée séparément de la structure sémantique.

Le bon réflexe : vérifiez que les titres décrivent réellement le contenu des sections et que leur organisation reste cohérente.

6. Concevoir des formulaires difficiles à comprendre

Les formulaires sont essentiels pour contacter une entreprise, demander un devis, créer un compte ou effectuer un achat.

Lorsqu’ils sont mal conçus, ils peuvent empêcher certains visiteurs de terminer leur démarche.

Exemple d’erreur

Un formulaire affiche plusieurs champs sans étiquette claire. Lorsqu’une erreur se produit, un simple message « Formulaire invalide » apparaît sans indiquer ce qui doit être corrigé.

Comment corriger ce problème ?

Pour rendre un formulaire plus accessible :

• associez chaque champ à une étiquette explicite ;
• indiquez clairement les informations attendues ;
• identifiez les champs obligatoires ;
• expliquez les erreurs en termes simples ;
• indiquez comment corriger chaque erreur ;
• conservez autant que possible les informations déjà saisies lorsque le formulaire est rejeté.

Par exemple, remplacez « Erreur » par « Veuillez saisir une adresse e-mail valide dans le champ Adresse e-mail ».

Les champs liés entre eux, comme ceux d’une adresse postale, peuvent aussi nécessiter un regroupement et une légende appropriés.

Le bon réflexe : testez un formulaire du début à la fin, y compris en provoquant volontairement des erreurs.

7. Utiliser uniquement la couleur pour transmettre une information

La couleur est souvent utilisée pour signaler un état : erreur, succès, sélection ou obligation.

Cependant, tous les utilisateurs ne perçoivent pas les couleurs de la même manière. Une information transmise uniquement par la couleur risque donc d’être perdue.

Exemple d’erreur

Dans un formulaire, les champs obligatoires sont signalés uniquement par une bordure rouge, sans indication textuelle ou autre repère pertinent.

Comment corriger ce problème ?

Associez la couleur à un autre moyen de transmettre l’information :

• une mention « Obligatoire » ;
• un symbole accompagné d’une explication ;
• un message textuel pour les erreurs ;
• un indicateur de sélection identifiable autrement que par sa couleur seule.

Cette approche améliore la compréhension des interfaces et permet de mieux distinguer les différents états.

Le bon réflexe : demandez-vous si l’information reste compréhensible lorsque les couleurs ne peuvent pas être distinguées.

8. Oublier les sous-titres et les alternatives multimédias

Les vidéos et les contenus audio peuvent transmettre des informations importantes, mais ils ne sont pas accessibles de la même manière à tous les utilisateurs.

Une vidéo sans sous-titres peut notamment exclure des personnes sourdes ou malentendantes.

Exemple d’erreur

Une entreprise présente ses services dans une vidéo où toutes les informations sont communiquées oralement, sans sous-titres ni alternative adaptée.

Comment corriger ce problème ?

Selon le contenu et les exigences applicables, prévoyez :

• des sous-titres synchronisés pour les paroles et les sons utiles ;
• une transcription pour les contenus audio concernés ;
• une audiodescription lorsque les informations visuelles essentielles ne sont pas autrement disponibles ;
• des commandes de lecture accessibles au clavier.

Les sous-titres automatiques peuvent constituer un point de départ, mais ils doivent être vérifiés pour éviter les erreurs de transcription.

Le bon réflexe : examinez chaque contenu multimédia et identifiez les informations qui ne sont accessibles que par le son ou par l’image.

9. Oublier les utilisateurs mobiles et le zoom

Un site peut sembler parfaitement lisible sur un grand écran tout en devenant difficile à utiliser sur un smartphone ou lorsque le texte est agrandi.

L’accessibilité implique de tenir compte de différentes tailles d’écran et de différents modes d’affichage.

Exemple d’erreur

Lorsqu’un utilisateur agrandit le texte, des boutons disparaissent derrière d’autres éléments ou des informations essentielles sont coupées.

Comment corriger ce problème ?

Vérifiez que :

• le contenu s’adapte aux différentes largeurs d’écran ;
• le texte peut être agrandi sans perte d’information ou de fonctionnalité ;
• les éléments interactifs restent accessibles ;
• les contenus ne nécessitent pas un défilement horizontal injustifié dans les situations couvertes par les critères applicables ;
• les menus et les formulaires restent utilisables sur mobile.

Un site responsive est une bonne base, mais le responsive design ne garantit pas à lui seul l’accessibilité.

**Le bon réflexe **: testez vos pages sur plusieurs tailles d’écran et avec un zoom important, puis vérifiez les parcours essentiels.

10. Se fier uniquement aux outils automatiques

Les outils automatiques sont utiles pour détecter certaines erreurs d’accessibilité. Ils peuvent notamment repérer des alternatives textuelles absentes, certains problèmes de contraste ou des anomalies de structure.

Cependant, ils ne peuvent pas juger correctement tous les aspects d’une interface.

Exemple d’erreur

Un outil ne signale aucune anomalie majeure, mais un utilisateur ne peut toujours pas comprendre le fonctionnement d’un formulaire ou utiliser un menu au clavier.

Comment corriger ce problème ?

Combinez plusieurs méthodes :

• une analyse automatisée ;
• des tests manuels au clavier ;
• une vérification de la structure HTML ;
• des contrôles des contenus et des formulaires ;
• des tests avec des technologies d’assistance lorsque cela est pertinent ;
• une évaluation des critères du référentiel applicable.

Un outil peut indiquer qu’une image possède un texte alternatif sans pouvoir garantir que ce texte est pertinent. De même, un score automatique ne constitue pas une preuve de conformité au RGAA.

Le bon réflexe : utilisez les outils pour gagner du temps, puis complétez leurs résultats par une analyse humaine structurée.

Comment prioriser les corrections d’accessibilité ?

Toutes les erreurs ne présentent pas le même niveau de gravité pour les utilisateurs. Certaines gênent la lecture, tandis que d’autres empêchent complètement de réaliser une action.

Pour organiser les corrections, commencez par identifier les obstacles qui bloquent l’accès à une information importante ou à une fonctionnalité essentielle.

Vous pouvez utiliser une méthode simple :

Priorité 1: les blocages fonctionnels. Par exemple, un formulaire impossible à envoyer au clavier ou un bouton essentiel inutilisable.

Priorité 2 **: **les obstacles importants. Par exemple, des erreurs de formulaire incompréhensibles, une navigation confuse ou des informations importantes difficiles à percevoir.

Priorité 3 : les améliorations complémentaires. Par exemple, des intitulés qui pourraient être plus explicites ou des contenus qui gagneraient à être mieux structurés.

Cette hiérarchie est une méthode pratique de gestion des corrections, pas une classification officielle du RGAA. La priorité réelle dépend du contexte, des critères applicables et de l’impact sur les utilisateurs.

Comment savoir si votre site respecte les critères du RGAA ?

Les dix erreurs présentées dans cet article constituent un premier niveau de sensibilisation. Elles ne couvrent pas l’ensemble des critères d’accessibilité.

Le RGAA organise les contrôles autour de plusieurs thématiques, notamment les images, les couleurs, les médias, les liens, les scripts, la structuration de l’information, les formulaires, la navigation et la consultation.

Pour évaluer la conformité d’un site, il faut examiner les critères applicables selon la méthode prévue par le référentiel, sur un échantillon de pages adapté au service concerné.

Il est donc important de distinguer trois démarches :

• Une vérification rapide, qui permet de repérer des problèmes évidents.
• Un audit d’accessibilité, qui analyse les critères pertinents et documente les non-conformités.
• Une démarche de correction et de suivi, qui permet de mettre en œuvre les recommandations puis de vérifier les résultats.

Une évaluation sérieuse ne se limite pas à une capture d’écran ou à un score fourni par un outil.

Pourquoi faire appel à un spécialiste de l’accessibilité numérique ?

Lorsqu’un site comporte de nombreuses pages ou des fonctionnalités complexes, identifier toutes les difficultés peut demander une expertise technique et méthodologique.

Un accompagnement spécialisé peut permettre de :

• repérer les obstacles qui affectent les utilisateurs ;
• comprendre les causes techniques des problèmes ;
• établir une liste de corrections concrètes ;
• prioriser les interventions ;
• accompagner les développeurs et les équipes éditoriales ;
• intégrer de bonnes pratiques dans les futurs développements.

L’objectif n’est pas simplement de produire une liste d’erreurs, mais de faciliter leur résolution et de faire progresser durablement l’accessibilité du site.

Conclusion : corriger les erreurs pour construire un web plus accessible

Les erreurs d’accessibilité web peuvent sembler mineures lorsqu’on les observe isolément. Pourtant, elles peuvent empêcher certains utilisateurs de lire un contenu, de naviguer ou de terminer une démarche en ligne.

Les alternatives textuelles, les contrastes, la navigation au clavier, les titres, les liens et les formulaires sont autant de points à examiner pour améliorer l’expérience des visiteurs.

La meilleure approche consiste à identifier les obstacles, à prioriser les corrections selon leur impact et à intégrer l’accessibilité dans la conception et la maintenance du site.

Votre site présente-t-il des problèmes d’accessibilité ?

InclusiWeb accompagne les organisations à Lyon et en Auvergne-Rhône-Alpes dans leurs démarches d’accessibilité numérique : audit, recommandations priorisées, amélioration du code et des contenus.

Vous souhaitez identifier les points à améliorer sur votre site ? Contactez InclusiWeb pour échanger sur votre projet et définir les prochaines étapes.

Sources et ressources utiles

• Critères et tests du RGAA — site officiel
• Première évaluation de l’accessibilité web — W3C WAI
• Accessibilité des formulaires — Système de Design de l’État
• Recommandations WCAG — W3C

Cet article est destiné à la sensibilisation et ne constitue pas un audit de conformité. Les contrôles nécessaires dépendent du site, de ses fonctionnalités et du référentiel applicable.