Démo
Regardez une vidéo de
présentation de l'historique et des fonctionnalités du vérificateur,
ou essayez de modifier le contenu de démonstration ci-dessous, d'ouvrir et de fermer les alertes,
et d'utiliser la barre d'outils () pour afficher le plan
des titres. Cette démo inclut les tests de base et la suite CSA.
Cette démo utilise un éditeur TinyMCE. Editoria11y est compatible avec la plupart des éditeurs de texte et propose des intégrations clés en main pour CKEditor et Gutenberg dans WordPress et Drupal.
Titres
Ce titre a sauté un niveau :
Oups
Ce titre ne contient aucun texte :
Cette courte citation pourrait être un titre :
Je suis un faux titre
Ce paragraphe entièrement en gras pourrait être un titre :
Je suis un faux titre
Ce titre est vraiment trop long :
Les titres et sous-titres créent une table des matières navigable pour les technologies d'assistance. Les numéros indiquent des niveaux d'imbrication. Des titres très longs signifient probablement que l'auteur en dit trop dans le titre.
Alternatives textuelles pour les images
Ce titre est composé d'une image de texte sans attribut alt :
Image sans aucun attribut alt :

Image avec un attribut alt invalide, par ex. alt=”'”

Image avec un nom de fichier comme alt

Image avec du texte redondant dans son alt, comme « image de : »

Image liée avec du texte redondant dans son alt, comme « image de : »
Image avec un alt provisoire :

Image liée avec un alt provisoire :
Image avec un alt de code machine :

Image liée avec un alt de code machine :
Image avec un texte alt très long :

Images dans des liens où le texte alt décrit peut-être l'image au lieu du lien
Ce lien contient du texte et une
image.
Toute image liée (test désactivé par défaut)
Image dans une figure marquée comme décorative :
Image dans une figure avec un alt identique à la figcaption :
Image dans un carrousel sans alt :
Contraste
Combinaison de couleurs illisible :
Super lisible.
Couleur nécessitant une vérification manuelle :
Et incalculable.
Graphique SVG avec un contraste insuffisant
Graphique SVG dont le contraste nécessite une vérification manuelle
Contenus intégrés et médias
Vidéo signalée comme nécessitant une vérification manuelle du sous-titrage :
L'audio nécessite une transcription :
Iframe sans titre nécessitant également une vérification manuelle :
Iframe non focalisable :
Composants interactifs imbriqués
Accordéon
Accordéon
Surprise !Liens significatifs
Liens sans aucun texte
Liens libellés uniquement avec une URL :
https://www.youtube.com/watch?v=DLzxrzFCyOs
Liens libellés uniquement avec des symboles :
Liens portant le même nom menant à des destinations différentes
Liens libellés uniquement avec un numéro DOI :
doi.org/10.1145/3493612.3520468
Liens avec des libellés non descriptifs :
Icônes liées sans alternatives textuelles :
Liens qui s'ouvrent dans une nouvelle fenêtre sans icône de lien externe ni avertissement textuel
Alerte pour le test d'ouverture dans une nouvelle fenêtre.
Liens vers des PDF
Liens vers d'autres documents
Un faux lien vers un document.
Liens avec des attributs title redondants
Liens avec des attributs qui les retirent de l'index de tabulation :
Liens avec des attributs aria-labelledby pointant vers des éléments sans texte :
Liens avec des mots génériques dans leur libellé aria :
Image liée sans texte alt :
Image liée avec un texte alt imprononçable :
Image liée sans attribut alt :
Image liée sans attribut alt dans un lien avec du texte :
Image liée avec uniquement un nom de fichier comme texte alt :
Image liée avec un texte alt anormalement long :
Liens internes brisés
Liens vers un serveur de développement
Ancres dupliquées
Tableaux
Tableaux sans en-têtes valides
| Un tableau sans en-tête TH est invalide |
Les titres de plan ne comptent pas |
Désactiver le test de titre de contenu à l'intérieur des tableaux |
| En-têtes vides | |
|---|---|
| J'ai trouvé | 700 vidéos de tortues |
| Chacune | 2 secondes de long |
Lisibilité
PLUSIEURS MOTS EN MAJUSCULES À LA SUITE DÉCLENCHERONT UN AVERTISSEMENT DE VÉRIFICATION MANUELLE.
Texte souligné
Un peu d'italique, c'est bien, mais de grands blocs de texte en emphase ne sont pas très lisibles. Un peu est acceptable bien sûr, mais il y a des limites, et un paragraphe entier, c'est beaucoup trop. Ceci, par exemple, est un paragraphe entier. C'est plutôt difficile à lire, n'est-ce pas ? Mais ce test ne se déclenche pas avant cette longueur, donc vous ne devriez pas voir de faux positifs dans votre contenu, sauf si vous écrivez régulièrement des paragraphes aussi longs.
Texte justifié
Exposant ou indice excessif ; l'indice devrait être utilisé pour de petites références et notes de bas de page, pas pour des phrases ou des paragraphes entiers.
Polices minuscules
* Fausses listes utilisant des caractères courants,
* des lettres, des chiffres et des émojis.
Formulaires
Bouton sans libellé
Champs avec un libellé invisible, demandant s'il y a aussi un libellé visible.
Champs avec uniquement un placeholder comme libellé, demandant s'il y a aussi un libellé visible.
Bouton avec un libellé accessible différent de son libellé visible.
Bouton avec un attribut aria-labelledby invalide.
Bouton avec un libellé redondant.
Bouton de réinitialisation.