Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H95Añadir subtítulos a un vídeo con el elemento track

Nombre oficial en el W3C: Usar el elemento track para proporcionar subtítulos

En pocas palabras

Los subtítulos de un vídeo HTML se añaden con el elemento track y el valor kind="captions". El archivo de subtítulos, normalmente en formato WebVTT, recoge los diálogos y también los sonidos importantes, como música, risas o un timbre. El reproductor del navegador los muestra y permite activarlos.

Por qué es importante

Las personas sordas o con pérdida auditiva necesitan leer lo que se dice y lo que suena. También ayudan a quien ve el vídeo sin sonido, en un lugar ruidoso o en otro idioma.

Si los subtítulos están «quemados» en la imagen, no se pueden desactivar, agrandar ni traducir. Con <track>, el navegador los gestiona y el usuario los controla.

Cómo se hace

  1. Prepare un archivo de subtítulos (por ejemplo, .vtt) con diálogos, quién habla si no está claro y sonidos relevantes.
  2. Dentro de <video>, añada un <track> con kind="captions" y la ruta en src.
  3. Indique el idioma con srclang y un nombre visible con label.
  4. Use kind="subtitles" solo para traducciones del diálogo. Para el idioma del vídeo, prefiera captions.
  5. Añada el atributo controls al vídeo para que el usuario pueda activar los subtítulos.

Cómo comprobarlo

  1. Revise el código (F12): cada <video> debe tener un <track kind="captions"> en su idioma.
  2. Reproduzca el vídeo y active los subtítulos desde el reproductor.
  3. Compruebe que recogen los diálogos y los sonidos importantes.
  4. Confirme que van sincronizados con el audio.

Ejemplo

Vídeo con subtítulos en español y una traducción al inglés.

<video controls width="640">
  <source src="bienvenida.mp4" type="video/mp4">
  <track kind="captions" src="bienvenida-es.vtt" srclang="es" label="Español" default>
  <track kind="subtitles" src="bienvenida-en.vtt" srclang="en" label="English">
</video>

Para saber más, en nuestro blog

  • Cómo crear vídeos accesibles

    Un vídeo accesible incluye subtítulos; una transcripción; buen uso del color de los textos y de los parpadeos. Debe crearse en un formato accesible

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H95 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es usar el elemento track de HTML para especificar una pista de texto temporizado de subtítulos (captions) para un elemento video. Las pistas de texto temporizado de subtítulos contienen la transcripción o traducción del diálogo, los efectos de sonido, las indicaciones musicales relevantes y otra información sonora relevante, adecuadas para cuando el sonido no está disponible o no se oye con claridad.

El atributo src del elemento track es una URL con la dirección de los datos de la pista de texto.

El atributo kind del elemento track indica el tipo de información del texto temporizado. Las pistas de texto de tipo captions proporcionan una versión textual del diálogo y de otros sonidos importantes para entender el vídeo. Las de tipo subtitles contienen solo el diálogo. Si hay otra información sonora importante para entender el vídeo, una pista de tipo subtitles no será suficiente para cumplir el criterio de conformidad.

En algunas regiones se usa el término «subtitle» para cualquier representación textual visible de la pista de audio. Un autor puede marcar una pista de texto temporizado en el idioma de la pista de audio como kind=subtitles, en lugar de kind=captions, e incluir información sonora adicional relevante. Se aconseja a los autores no usar subtitles en esta situación, ya que puede confundir a los usuarios que intentan encontrar los subtítulos para personas sordas (captions), pero una pista de texto temporizado así cumpliría los requisitos normativos del criterio de conformidad 1.2.2 Sonido sincronizado con subtítulos (grabado).

Ejemplos

Subtítulos en un idioma

Un elemento video para un vídeo en inglés con una pista de subtítulos en inglés. Los subtítulos se proporcionan en formato WebVTT.

<video poster="myvideo.png" controls>
  <source src="myvideo.mp4" srclang="en" type="video/mp4">
  <track kind="captions" label="English" src="myvideo_en.vtt" srclang="en">
</video>

Subtítulos en varios idiomas

Un elemento video para un vídeo en inglés con una pista de subtítulos en inglés. Los subtítulos se proporcionan en formato WebVTT.

<video poster="myvideo.png" controls>
  <source src="myvideo.mp4" srclang="en" type="video/mp4">
  <source src="myvideo.webm" srclang="fr" type="video/webm">
  <track kind="captions" label="English" src="myvideo-en.vtt" srclang="en">
  <track kind="captions" label="Français" src="myvideo-fr.ttml" srclang="fr">
</video>

Pruebas

Procedimiento

Para cada elemento video usado para reproducir un vídeo:

  1. Comprobar que el vídeo contiene un elemento track de kind captions en el idioma del vídeo.

Resultados esperados

  • La comprobación n.º 1 es verdadera.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H95 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.