Testez dès aujourd'hui la conformité de vos sites web aux WCAG à l'aide d'Eye-Able Audit
Ce site web présente des erreurs courantes et explique comment les détecter à l'aide d'Eye-Able Audit
Vérifiez toutes les erreurs dans la barre d'outils Eye-Able Audit située à droite de l'écran !
Tests logiciels pour vos produits numériques
Tests automatisés de sites web conformément aux normes d'accessibilité
L'accessibilité numérique fait progresser votre entreprise
Afin de respecter les exigences légales.
Analysez l'ensemble de votre domaine à l'aide d'Eye-Able Report
Tableau de bord d'administration dédié à l'accessibilité numérique, avec un aperçu de toutes vos sous-pages
Cette page ne présente qu'une partie des erreurs que Eye-Able Audit peut détecter. Découvrez toutes les règles dans notre aperçu!
Texte alternatif manquant
31,3 % des bannières de la page d'accueil ne comportent pas de texte alternatif. Les images doivent être accompagnées d'un texte alternatif afin que les utilisateurs de lecteurs d'écran puissent comprendre leur contenu et leur fonction.
Texte au contraste faible
Le faible contraste est la principale erreur d'accessibilité sur de nombreux sites web. Assurez-vous que tous les éléments textuels présentent un contraste de couleur suffisant entre le texte au premier plan et la couleur d'arrière-plan. Le contraste minimal dépend de la taille du texte et est de 3:1 ou 4,5:1 pour les textes de grande taille.
Le contraste est très mauvais
Hiérarchie des titres
Les titres vides peuvent également prêter à confusion et doivent être évités.
Problèmes courants
Texte du lien manquant
Cette image liée ne comporte pas de texte alternatif. Les liens doivent comporter un texte de lien compréhensible et correctement lu par les lecteurs d'écran.
Syntaxe de table incorrecte
| Ma superbe table | |
|---|---|
| Ligne 1 | Je n'ai pas de titre… |
Les tableaux doivent respecter une syntaxe correcte, par exemple comporter des cellules d'en-tête pour toutes les colonnes, afin d'être compréhensibles avec les lecteurs d'écran. Eye-Able détecte les erreurs courantes qui rendent vos en-têtes moins accessibles.
Attributs d'Aria
Si les attributs aria sont très utiles pour rendre votre interface web plus accessible, il est toutefois indispensable d'utiliser la syntaxe et les rôles appropriés.
Boutons
A doit avoir un nom accessible afin que les lecteurs d'écran puissent en refléter la fonction.
Sélectionner les champs
Les listes de sélection sont couramment utilisées dans les formulaires et nécessitent également un texte alternatif.
Champs de formulaire non valides
Liens sans nom accessible
Chaque élément de lien doit comporter un nom accessible ou un texte décrivant sa fonction. Ce lien est invalide et vide.
Objets dont le nom n'est pas accessible
Les éléments contenant du contenu multimédia, tel que de l'audio ou de la vidéo, doivent comporter un balisage compatible avec les lecteurs d'écran.
Élément de liste hors d'une liste
Un élément de liste ne doit pas se trouver en dehors d'une liste. Il fait toujours partie d'une liste ordonnée <ol> ou non ordonnée <ul>.
Attributs « Accesskey » à double affectation
L'attribut « accesskey » identifie un élément accessible via un raccourci clavier spécifique. Le raccourci spécifié doit être unique et ne doit être utilisé pour aucun autre élément de la page actuelle.
La taille de la police est trop petite
La taille de la police ne doit pas être inférieure à 9 px.
Ce texte est affiché en taille 7px et devrait être agrandi
Lien impossible à distinguer du texte normal
Les liens intégrés doivent se distinguer du texte environnant par un élément autre que la couleur. Les liens peuvent être mis en évidence, par exemple, en soulignant le texte ou en ajoutant une bordure. Ce lien est un mauvais exemple.
Toute cette section du texte est affichée en italique
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Les paragraphes ont une interligne d'au moins 1,5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Toute la section de texte est affichée en justifié
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Le nom visible ne fait pas partie du nom accessible
Le lien ci-dessous comporte un texte affiché qui diffère du nom accessible. Vous trouverez la référence ici. Ceci est particulièrement important pour les utilisateurs qui recourent à la commande vocale pour naviguer sur le site web. Sans cela, la commande vocale ne peut pas être interprétée correctement.