video-poster-text-alternative-present

La imagen de portada de video debe tener una alternativa textual

automaticWCAG 1.1.1 (A)confianza: mediumgravedad: seriousperceivable

Comprueba que los elementos <video> con una imagen poster proporcionan una alternativa textual (nombre accesible).

Ámbito de aplicación. Se aplica a los elementos <video> que: 1) tienen un atributo poster no vacío, Y 2) se exponen a las tecnologías de asistencia (según las comprobaciones de elegibilidad del motor). Los elementos que de otro modo estarían ocultos del árbol de accesibilidad siguen siendo aplicables si son enfocables mediante tabulación o si se referencian mediante relaciones IDREF (según las comprobaciones de elegibilidad). Los vídeos con role="presentation" o role="none" solo se excluyen cuando no son enfocables.

Resultado esperado. Cada elemento <video> aplicable proporciona una alternativa textual para la imagen poster, mediante:

  • un nombre accesible (aria-label / aria-labelledby / title).

El contenido de reserva entre etiquetas dentro de <video> NO se acepta: solo lo renderizan los navegadores que no admiten <video>, por lo que en la práctica no se expone de forma fiable a las tecnologías de asistencia. <video> tampoco es un elemento etiquetable, así que las asociaciones nativas <label for="..."> tampoco se aceptan. Por un <video> sin nombre que es el único contenido de un <figure> con un <figcaption> no vacío se pregunta (cantTell) en lugar de darlo por fallido: el pie de figura nombra la figura, no el vídeo (HTML-AAM; Chromium no le da nombre al vídeo), pero puede describir el poster, y solo una persona puede saberlo.

Qué informa un hallazgo.

  • reasonCode: VIDEO_POSTER_FIGCAPTION_REVIEW en el hallazgo cantTell, con figcaption, el texto del pie de figura hasta 100 caracteres; TEXT_ALTERNATIVE_MISSING en un fallo.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

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

aria-label nombra el elemento de vídeo que lleva la imagen poster.

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

No hay nombre accesible ni contenido de reserva; un atributo poster por sí solo no es una alternativa textual.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

VIDEO_POSTER_FIGCAPTION_REVIEW

  1. Localizar el vídeo que indica el informe y observar su imagen de portada antes de que se reproduzca.
  2. Leer el pie de la figura que se muestra con él.
  3. Decidir si el pie le dice a quien no puede ver la imagen de portada qué es el vídeo.

Se cumple. El pie identifica el vídeo y lo que muestra su imagen de portada.

No se cumple. El pie no identifica el vídeo, así que la imagen de portada no tiene alternativa textual, lo que incumple WCAG 1.1.1.

Ver código fuente