Les problèmes d'accessibilité web les plus courants et comment les identifier
Un site web peut fonctionner parfaitement pour l'équipe qui le gère tout en posant de sérieuses difficultés à certains utilisateurs.
Le problème est que de nombreuses barrières d'accessibilité ne sont pas évidentes lorsque vous naviguez avec une souris, que vous voyez clairement l'écran et que vous utilisez le site exactement comme il a été testé en interne.
Changez légèrement la situation.
Essayez d'effectuer un achat sans souris. Utilisez uniquement la touche Tabulation. Zoomez la page à 200 %. Regardez un formulaire et imaginez que ses étiquettes de champ sont lues par un lecteur d'écran.
Le site web commence à paraître différent.
Voici quelques-uns des problèmes qu'il convient de vérifier en priorité.
Images sans texte alternatif
Une image de produit, un schéma, une icône ou une bannière peut communiquer des informations auxquelles un utilisateur ne peut pas accéder si l'image ne dispose pas d'une alternative textuelle appropriée.
Les WCAG 2.2 exigent des alternatives textuelles pour tout contenu non textuel lorsqu'il transmet des informations ou possède une fonction. Les images purement décoratives sont traitées différemment et peuvent être ignorées par les technologies d'assistance.
Une erreur très courante se produit ici. Une équipe vérifie si l' alt attribut existe et considère le problème comme résolu.
La qualité du texte est tout aussi importante.
Si l'image montre un produit, la description doit fournir les informations pertinentes sur ce produit. S'il s'agit d'un graphique, se contenter d'écrire « graphique » n'aide pas l'utilisateur à comprendre les données présentées.
Comment vérifier
Commencez par les pages qui contiennent beaucoup d'images. La page d'accueil, les pages produits, les articles de blog et les pages de destination sont de bons points de départ.
Le Wawsome Accessibility Checker peut identifier automatiquement les problèmes détectables, tels qu'un texte alternatif manquant ou inadéquat.
Pour les images qui possèdent déjà un texte alt , une vérification humaine reste nécessaire.
Contraste insuffisant
Un texte gris clair sur fond blanc peut paraître élégant dans un design. Pour une personne malvoyante, il peut devenir difficile à lire.
Ce problème survient souvent sur les textes secondaires, les espaces réservés, les boutons, les menus et les éléments désactivés ou inactifs.
Les règles WCAG incluent des critères concernant le contraste du texte ainsi que certains éléments graphiques et composants d'interface utilisateur.
Le contraste doit être vérifié sur le produit final. Un fichier de design peut utiliser les bonnes couleurs, alors que l'implémentation finale peut aboutir à des valeurs différentes.
Comment vérifier
Testez les couleurs pour :
- Les textes principaux et secondaires
- Les liens et les boutons
- Les messages d'erreur et les notifications
- Les commandes et composants interactifs
- Les états au survol et au focus
- Les graphiques ou les informations transmises par la couleur
Ne limitez pas vos tests à la page d'accueil. C'est souvent lors du paiement et dans les formulaires qu'un mauvais contraste devient le plus préjudiciable pour l'utilisateur.
Formulaires sans étiquettes ni instructions claires
Les formulaires sont omniprésents.
La création de compte, les demandes de devis, le paiement de factures, la prise de rendez-vous et les processus de commande utilisent tous des champs où les utilisateurs doivent saisir des informations.
Les WCAG exigent des étiquettes ou des instructions lorsqu'une saisie utilisateur est requise. L'objectif est de s'assurer que les utilisateurs comprennent quelles informations ils doivent fournir.
Un texte indicatif (placeholder) ne doit pas être considéré automatiquement comme un remplacement pour une étiquette correctement implémentée.
Viennent ensuite les messages d'erreur.
« Saisie invalide » n'est pas très utile.
Les utilisateurs doivent comprendre ce qui n'a pas fonctionné et ce qu'ils doivent corriger. Dans un formulaire long, identifier clairement le champ problématique est encore plus important.
Comment vérifier
Choisissez un parcours utilisateur complet et suivez-le du début à la fin.
Il peut s'agir de :
- Formulaire de contact
- Création de compte
- Paiement
- Prise de rendez-vous en ligne
- Demande de devis
- Connexion
- Réinitialisation de mot de passe
- Paiement de facture
Vérifiez que chaque champ dispose d'une étiquette claire et que les messages d'erreur sont compréhensibles sans dépendre exclusivement de la couleur.
Pour les formulaires importants, les tests au clavier et au lecteur d'écran peuvent fournir des informations qu'un scanner ne peut pas entièrement détecter.
Navigation qui ne fonctionne pas au clavier
Essayez un test simple.
Mettez la souris de côté et appuyez sur la touche Tabulation.
Pouvez-vous accéder au menu ? Pouvez-vous ouvrir les sous-menus ? Pouvez-vous sélectionner un produit ? Pouvez-vous remplir le formulaire ? Pouvez-vous le soumettre ?
Les WCAG incluent des exigences concernant l'accessibilité au clavier et la nécessité d'éviter que le focus ne reste bloqué dans un composant.
Le problème survient souvent avec les composants personnalisés.
Les menus déroulants, les fenêtres modales, les carrousels, les sélecteurs de date et les menus basés sur JavaScript peuvent fonctionner parfaitement avec une souris tout en étant difficiles à utiliser au clavier.
Comment vérifier
Utilisez la touche Tab pour avancer et Maj + Tab pour reculer.
Suivez l'indicateur visuel de focus. Vous devriez toujours être en mesure de voir où vous vous trouvez sur la page.
Testez les composants interactifs à l'aide des touches Entrée, Espace et des flèches directionnelles lorsque le comportement du composant l'exige.
Effectuez le test sur les parcours les plus importants pour l'activité. La connexion, le paiement, la prise de rendez-vous et les formulaires essentiels doivent être vérifiés en priorité.
Boutons et liens sans noms accessibles
L'icône en forme de loupe est visuellement facile à identifier comme étant la fonction « Rechercher ».
Pour les technologies d'assistance, cette icône doit disposer des informations programmatiques nécessaires afin que sa fonction puisse être communiquée à l'utilisateur.
Les WCAG traitent du nom, du rôle et de la valeur des composants d'interface utilisateur. Un contrôle dépourvu de nom accessible peut être très difficile à utiliser avec des technologies d'assistance.
Ce problème survient fréquemment avec :
- Les boutons composés uniquement d'icônes
- Les menus mobiles
- Les boutons de fermeture
- Les commandes vidéo
- Les éléments de carrousel
- Les boutons de partage sur les réseaux sociaux
- Les composants personnalisés
- Les liens avec un texte vague tel que « cliquez ici »
Un nom accessible doit communiquer la finalité de l'élément.
Comment vérifier
Vous pouvez commencer par le Vérificateur d'accessibilité Wawsome pour les problèmes détectables automatiquement.
Pour les composants importants, utilisez également l'inspecteur d'accessibilité de votre navigateur ou testez la page avec un lecteur d'écran.
Si l'utilisateur entend « bouton » sans savoir ce qu'il fait, l'implémentation doit être revue.
Structure de titres incorrecte
Les titres sont parfois utilisés uniquement pour leur apparence visuelle.
Un texte reçoit une balise H2 parce que sa taille semble appropriée. Un autre devient un H4 parce qu'il s'intègre bien dans la mise en page. Avec le temps, la structure sémantique se perd.
Pour les utilisateurs de lecteurs d'écran, les titres constituent un moyen efficace de naviguer dans une page.
Une page longue contenant des articles, des mentions légales, des services ou des produits devient beaucoup plus facile à parcourir lorsque sa structure de titres est logique.
Comment vérifier
Consultez le plan de la page.
Le titre principal doit indiquer clairement le sujet. Les sections importantes doivent être organisées selon une hiérarchie logique.
Ne choisissez pas un niveau de titre en fonction de la taille visuelle souhaitée. L'apparence visuelle peut être contrôlée par CSS. La sémantique doit décrire la structure du contenu.
Documents et fichiers téléchargeables
Un site web peut avoir des pages bien structurées et proposer un PDF inaccessible au moment précis où l'utilisateur accède aux informations dont il a besoin.
C'est une situation courante dans les secteurs public, bancaire, des assurances, de l'éducation et de la santé.
Les documents peuvent contenir :
- Des images numérisées sans texte disponible
- Une structure incorrecte
- Des formulaires PDF difficiles à remplir
- Des graphiques sans alternative
- Un ordre de lecture incorrect
- Des liens mal décrits
- Des tableaux difficiles à interpréter
Si un document fait partie du service fourni à l'utilisateur, son accessibilité doit être évaluée.
Contenu vidéo sans sous-titres
La vidéo est de plus en plus utilisée pour les présentations de produits, les tutoriels, le contenu éducatif et la communication sur les réseaux sociaux.
Si des informations sont communiquées oralement, les utilisateurs qui ne peuvent pas entendre le contenu ont besoin d'une alternative appropriée.
Les sous-titres doivent refléter fidèlement les informations énoncées. La transcription automatique peut faciliter la production, mais le résultat doit être vérifié avant publication.
Si une vidéo contient des informations importantes transmises exclusivement par le contenu visuel, une description appropriée de ces éléments visuels peut également s'avérer nécessaire.
Pourquoi un scanner ne trouve-t-il pas tout ?
L'analyse automatisée est extrêmement utile. Pour les grands sites web, elle permet de gagner un temps précieux et de faire ressortir les problèmes récurrents.
Le Wawsome Accessibility Checker peut identifier de nombreux problèmes WCAG détectables automatiquement, notamment les textes alternatifs manquants, les défauts de contraste, les étiquettes de formulaire absentes, les structures de titres incorrectes et certains problèmes liés au clavier ou aux éléments interactifs.
Un outil peut détecter qu'un attribut alt existe.
Il ne peut pas déterminer avec certitude si ce texte explique réellement l'image dans le contexte de la page.
Il peut détecter certains problèmes structurels.
Il ne peut pas reproduire entièrement l'expérience d'un utilisateur essayant d'effectuer un processus complexe avec un lecteur d'écran.
C'est pourquoi une évaluation d'accessibilité utile combine plusieurs types d'analyses.
Commencez par les parcours essentiels
Si votre site web compte 5 000 pages, vérifier manuellement chaque élément peut rapidement devenir ingérable.
Commencez par les parcours utilisateurs essentiels.
Pour un site e-commerce, vérifiez la fiche produit, le panier et le tunnel de commande.
Pour une banque, vérifiez la connexion, les transactions et les principaux services utilisés par les clients.
Dans le secteur de la santé, examinez la prise de rendez-vous, les formulaires, le compte patient et l'accès aux informations.
Pour le secteur public, vérifiez la soumission de documents, les formulaires, les paiements et l'accès aux informations nécessaires aux citoyens.
Étendez ensuite l'évaluation au reste du site web.
L'impact sur l'utilisateur doit déterminer l'ordre de résolution des problèmes.
En quoi le suivi peut-il aider ?
Imaginons que vous ayez terminé une évaluation et que l'équipe ait corrigé les problèmes prioritaires.
Deux semaines plus tard, une nouvelle page d'atterrissage est publiée. Le marketing télécharge de nouvelles images. Le développement modifie le formulaire principal. 50 produits supplémentaires sont ajoutés.
Le site web a changé.
Le Wawsome Accessibility Monitor peut surveiller votre site web en continu et réanalyser les pages lorsque des mises à jour sont détectées, aidant ainsi à identifier les problèmes détectables introduits par de nouveaux contenus ou composants.
Pour un site web mis à jour fréquemment, les contrôles d'accessibilité doivent faire partie intégrante du processus de gestion habituel.
Que faire des problèmes identifiés ?
Un rapport trop long peut donner l'impression que chaque problème doit être résolu dans le même ordre.
En pratique, la priorisation est essentielle.
Parfois, nous oublions de poser une question simple : qu'est-ce qui empêche l'utilisateur d'accomplir sa tâche ?
Un problème lors du paiement mérite une attention immédiate s'il empêche un client de finaliser sa commande.
Un bouton inaccessible dans un parcours de prise de rendez-vous peut empêcher un patient de sélectionner un créneau.
Un problème d'authentification peut rendre un compte totalement inutilisable pour un utilisateur donné.
Après avoir évalué l'impact, vous pouvez examiner la fréquence du problème et le nombre de pages concernées.
C'est à ce stade que le rapport devient utile pour l'équipe de développement. Les problèmes se transforment en tâches concrètes pouvant être intégrées aux sprints de remédiation.
Comment Wawsome peut vous aider
Si vous n'avez pas encore évalué votre site web, une analyse initiale est une première étape pratique.
Le vérificateur d'accessibilité Wawsome peut identifier les problèmes détectables automatiquement et fournir un aperçu initial des points nécessitant une attention particulière.
Après l'analyse, les résultats peuvent être complétés par des vérifications manuelles pour les critères nécessitant une évaluation humaine.
Les sites web qui évoluent fréquemment peuvent utiliser le moniteur d'accessibilité Wawsome pour suivre les problèmes introduits ultérieurement.
Pour les fonctionnalités proposées directement aux utilisateurs, vous pouvez également explorer le widget d'accessibilité Wawsome.
Vous pouvez également explorer la gamme complète des fonctionnalités d'accessibilité Wawsome.
FAQ
Comment puis-je vérifier si mon site web présente des problèmes d'accessibilité ?
Vous pouvez commencer par utiliser un scanner automatisé pour détecter les problèmes identifiables par programme. Poursuivez avec des tests manuels sur les parcours utilisateurs importants, ainsi que des tests au clavier ou avec des technologies d'assistance si nécessaire.
Un score peut-il m'indiquer si mon site web est accessible ?
Un score donne un aperçu des critères évalués par l'outil. Les outils automatisés ne peuvent pas déterminer à eux seuls l'accessibilité complète d'un site web.
Quels problèmes d'accessibilité puis-je identifier moi-même sans connaissances techniques ?
Vous pouvez effectuer quelques vérifications simples. Essayez de naviguer au clavier, zoomez sur la page, vérifiez si les formulaires ont des étiquettes claires et examinez le contraste du texte. Pour les critères techniques, vous aurez besoin d'outils appropriés et de personnes familières avec les WCAG.
Pourquoi dois-je vérifier à nouveau mon site web après une remédiation ?
Les sites web évoluent. Une nouvelle page de destination, un formulaire ou un composant peut introduire de nouveaux obstacles. Il est utile de surveiller et de tester à nouveau après chaque modification pertinente.
Comment prioriser les problèmes identifiés ?
Commencez par les obstacles qui empêchent les utilisateurs d'effectuer des actions importantes. Le paiement, l'authentification, la prise de rendez-vous, les formulaires et les transactions peuvent avoir un impact direct sur les utilisateurs. Ensuite, vous pourrez organiser les problèmes restants selon leur gravité et leur fréquence sur le site.
Un bon point de départ
L'accessibilité devient beaucoup plus facile à gérer lorsque vous pouvez visualiser les problèmes concrets qui affectent votre propre site web.
Analysez les pages importantes, vérifiez les parcours que les utilisateurs doivent pouvoir suivre et déterminez quels obstacles doivent être traités en priorité.
Un outil d'analyse aide à identifier les problèmes détectables automatiquement. Les tests manuels complètent le tableau là où le contexte et l'évaluation humaine sont nécessaires.
À partir de là, vous disposez déjà d'éléments utiles pour votre équipe : des problèmes réels, les pages concernées et un point de départ clair pour les corrections.