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 (Capture d'écran de la barre d'outils
              Editoria11y, affichant 4 erreurs.) 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

filename.jpg

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

Image of a dog.

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

Image of a dog.

Image avec un alt provisoire :

TBD

Image liée avec un alt provisoire :

TBD

Image avec un alt de code machine :

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Image liée avec un alt de code machine :

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Image avec un texte alt très long :

Regardez ce petit chien. Ce petit chien est tellement heureux.
                Ce petit chien est allé se promener et la promenade l'a mené à un lac où il y avait toutes sortes
                d'odeurs fascinantes. Quelle journée incroyable pour ce petit chien.

Ce lien contient du texte et une image.Une jolie boîte grise

Bonjour

Image dans une figure marquée comme décorative :

La figcaption est présente.

Image dans une figure avec un alt identique à la figcaption :

La figcaption est identique à l'alt
La figcaption est identique à l'alt

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 :

Lecture désactivée pour éviter les cookies.

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éonSurprise !

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.

  • Balise UL manquante
  • 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.

    Perturbation de l'ordre de tabulation