video-poster-text-alternative-present

L’image poster d’une <video> doit avoir une alternative textuelle

automaticWCAG 1.1.1 (A)confiance : mediumgravité : seriousperceivable

Vérifie que les éléments <video> dotés d’une image poster fournissent une alternative textuelle (nom accessible).

Applicabilité. S’applique aux éléments <video> qui : 1) ont un attribut poster non vide, ET 2) sont exposés aux technologies d’assistance (selon les vérifications d’éligibilité du moteur). Les éléments autrement masqués de l’arbre d’accessibilité restent applicables s’ils sont atteignables par tabulation ou référencés par des relations IDREF (selon les vérifications d’éligibilité). Les vidéos avec role="presentation" ou role="none" ne sont exclues que si elles ne sont pas focalisables.

Attendu. Chaque élément <video> applicable fournit une alternative textuelle pour l’image poster, au moyen :

  • d’un nom accessible (aria-label / aria-labelledby / title).

Le contenu de repli placé entre les balises de <video> n’est PAS accepté : il n’est rendu que par les navigateurs qui ne prennent pas en charge <video>, il n’est donc pas exposé de façon fiable aux technologies d’assistance dans la pratique. <video> n’est pas non plus un élément étiquetable, si bien que les associations natives <label for="..."> ne sont pas acceptées non plus. Une <video> sans nom qui est le seul contenu d’une <figure> dotée d’une <figcaption> non vide donne lieu à une question (cantTell) plutôt qu’à un échec : la légende nomme la figure, pas la vidéo (HTML-AAM ; Chromium ne donne aucun nom à la vidéo), mais elle peut décrire l’image poster, et seule une personne peut le dire.

Ce que rapporte un constat.

  • reasonCode : VIDEO_POSTER_FIGCAPTION_REVIEW sur le constat cantTell, avec figcaption, le texte de la légende jusqu’à 100 caractères ; TEXT_ALTERNATIVE_MISSING sur un échec.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

pass
<video poster="poster.png" aria-label="Product demo"></video>

aria-label nomme l’élément vidéo qui porte l’image poster.

fail
<video poster="poster.png"></video>

Ni nom accessible, ni contenu de repli ; un attribut poster seul ne constitue pas une alternative textuelle.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

VIDEO_POSTER_FIGCAPTION_REVIEW

  1. Repérez la vidéo indiquée par le rapport et regardez son image d’affiche avant la lecture.
  2. Lisez la légende de la figure affichée avec elle.
  3. Déterminez si la légende indique à quelqu’un qui ne voit pas l’affiche de quelle vidéo il s’agit.

Réussite. La légende identifie la vidéo et ce que montre son affiche.

Échec. La légende n’identifie pas la vidéo : l’affiche n’a donc pas d’équivalent textuel, ce qui ne respecte pas le critère WCAG 1.1.1.

Voir le code source