Accesibilidad multimedia

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Fecha de publicación: 20 de agosto de 2020

Los subtítulos y las descripciones para lectores de pantalla son la única forma en que muchos usuarios pueden disfrutar de tus videos y, en algunas jurisdicciones, incluso son obligatorios por ley o reglamento. El formato WebVTT (pistas de texto de video web) se usa para describir datos de texto sincronizados, como subtítulos, para que tus videos sean más accesibles.

Agrega etiquetas <track>

Para agregar subtítulos o descripciones para lectores de pantalla a un video web, agrega una etiqueta <track> dentro de una etiqueta <video>. Además de los subtítulos y las descripciones para lectores de pantalla, las etiquetas <track> también se pueden usar para subtítulos y títulos de capítulos.

Captura de pantalla de los subtítulos que se muestran con el elemento de seguimiento en Chrome para Android.

La etiqueta <track> es similar al elemento <source>, ya que ambos tienen un atributo src que apunta al contenido al que se hace referencia. Para una etiqueta <track>, apunta a un archivo WebVTT. El atributo label especifica cómo se puede identificar un segmento en particular en la interfaz.

Para proporcionar pistas para varios idiomas, agrega una etiqueta <track> independiente para cada archivo WebVTT que proporciones y, luego, indica el idioma con el atributo srclang.

Observa este ejemplo de etiqueta <video> con dos etiquetas <track>. Agrega un elemento <track> como elemento secundario del elemento <video>.

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
  <track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
  <p>This browser does not support the video element.</p>
</video>

También puedes ver una muestra en Glitch.

Estructura del archivo WebVTT

Este es un archivo WebVTT hipotético para la demostración. Es un archivo de texto que contiene una serie de indicaciones. Cada indicación es un bloque de texto que se mostrará en pantalla y el intervalo de tiempo durante el cual se mostrará.

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Cada elemento del archivo de pista es una clave. Cada indicación tiene una hora de inicio y una hora de finalización, separadas por una flecha, seguidas del texto de la indicación. Los indicadores también pueden tener IDs, como railroad y manuscript. Las indicaciones se separan por una línea vacía.

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

Los tiempos de inserción están en formato hours:minutes:seconds.milliseconds. El análisis es estricto. Esto significa que los números deben tener ceros a la izquierda si es necesario: las horas, los minutos y los segundos deben tener dos dígitos (00 para un valor de cero) y los milisegundos deben tener tres dígitos (000 para un valor de cero). Hay un excelente validador de WebVTT en Live WebVTT Validator, que busca errores en el formato de hora y problemas como tiempos no secuenciales.

Puedes crear un archivo VTT de forma manual, aunque existen muchos servicios que los crean por ti.

Como puedes ver en nuestros ejemplos anteriores, el formato WebVTT es bastante simple. Solo agrega tus datos de texto junto con los tiempos.

Sin embargo, ¿qué sucede si deseas que los subtítulos se rendericen en una posición diferente con alineación a la izquierda o a la derecha? Quizás para alinear los subtítulos con la posición del interlocutor actual o para que no se superpongan con el texto de la cámara. WebVTT define la configuración para hacerlo y mucho más directamente dentro del archivo .vtt. Ten en cuenta cómo se define la posición de los subtítulos agregando parámetros de configuración después de las definiciones de intervalo de tiempo.

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

Otra función útil es la capacidad de aplicar diseño a los indicadores con CSS. Quizás quieras usar un gradiente lineal gris como fondo, con un color de primer plano de papayawhip para todos los subtítulos y todo el texto en negrita de color peachpuff.

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

Si te interesa obtener más información sobre el diseño y el etiquetado de indicaciones individuales, la especificación de WebVTT es una buena fuente de ejemplos avanzados.

Tipos de pistas de texto

¿Notaste el atributo kind del elemento <track>? Se usa para indicar qué relación tiene la pista de texto en particular con el video. Los valores posibles del atributo kind son los siguientes:

  • captions: Para subtítulos de transcripciones y, posiblemente, traducciones de cualquier audio. Adecuada para personas con discapacidad auditiva y en los casos en que el video se reproduce con el sonido silenciado.
  • subtitles: Para subtítulos, es decir, traducciones de voz y texto en un idioma diferente del idioma principal del video.
  • descriptions: Para descripciones de partes visuales del contenido de video. Adecuado para personas con discapacidad visual.
  • chapters: Se muestra cuando el usuario navega dentro del video.
  • metadata: No es visible y las secuencias de comandos pueden usarlo.

Ahora que comprendes los conceptos básicos de hacer que un video esté disponible y sea accesible en tu página web, es posible que te preguntes sobre casos de uso más complejos. Obtén información sobre los frameworks multimedia y cómo pueden ayudarte a agregar videos a tu página web y, al mismo tiempo, proporcionar funciones avanzadas.