Regla de accesibilidad: Los elementos `<video>` deben tener subtítulos descriptivos

Acerca de esta regla de accesibilidad

Los subtítulos descriptivos son la forma principal en que las personas sordas y con problemas auditivos acceden a la parte de audio del contenido de vídeo. Cuando un vídeo carece de subtítulos descriptivos, estas personas pueden ver el contenido visual pero se pierden todo lo que se comunica a través del sonido, incluidos los diálogos hablados, la narración, la música, los sonidos ambientales y los efectos de sonido que proporcionan contexto o significado. Esto crea una barrera crítica para la comprensión.

Esta regla se relaciona con el Criterio de Éxito 1.2.2 de las WCAG 2.0/2.1/2.2: Subtítulos (Pregrabados) en el Nivel A, que requiere que se proporcionen subtítulos descriptivos para todo el contenido de audio pregrabado en medios sincronizados. También es requerido bajo la Sección 508 y EN 301 549. Debido a que este es un requisito de Nivel A, representa la línea base mínima para la accesibilidad: no proporcionar subtítulos descriptivos es uno de los problemas de accesibilidad más impactantes que puede tener un vídeo.

Subtítulos descriptivos vs. Subtítulos

Es importante entender la diferencia entre los subtítulos descriptivos y los subtítulos, ya que sirven para propósitos diferentes:

Subtítulos descriptivos (kind="captions") están diseñados para personas sordas y con problemas auditivos. Incluyen todos los diálogos más descripciones de audio significativo que no sea habla, como efectos de sonido, música, identificación del hablante y otras pistas auditivas (ej., “[se cierra la puerta de golpe]”, “[música orquestal dramática]”, “[aplausos del público]”).
Subtítulos (kind="subtitles") son traducciones de idioma de diálogos y narraciones, destinados a usuarios oyentes que no entienden el idioma hablado. Los subtítulos generalmente no incluyen descripciones de audio que no sea habla.

Para el cumplimiento de accesibilidad, debes usar kind="captions", no kind="subtitles".

Qué hace buenos subtítulos descriptivos

Los buenos subtítulos descriptivos van más allá de transcribir diálogos. Deben:

Identificar quién está hablando cuando no es visualmente obvio
Incluir efectos de sonido significativos (ej., “[teléfono sonando]”, “[cristal rompiéndose]”)
Describir la música cuando sea relevante (ej., “[música suave de piano]”, “[canción pop alegre sonando]”)
Anotar silencio o pausas significativas cuando tengan significado
Estar sincronizados con precisión con el audio
Usar ortografía, gramática y puntuación correctas

Cómo solucionar el problema

Añade un elemento <track> dentro de tu elemento <video> con los siguientes atributos:

src — la URL del archivo de subtítulos descriptivos (típicamente en formato WebVTT .vtt)
kind — configurado como "captions"
srclang — el código de idioma de los subtítulos descriptivos (ej., "en" para inglés)
label — una etiqueta legible por humanos para la pista (ej., "English")

Solo src es técnicamente requerido, pero kind, srclang y label son muy recomendados para mayor claridad y para asegurar que las tecnologías de asistencia y navegadores manejen la pista correctamente.

Ejemplos

Incorrecto: Vídeo sin subtítulos descriptivos

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
</video>

Este vídeo no tiene elemento <track>, por lo que las personas sordas y con problemas auditivos no pueden acceder a ninguno del contenido de audio.

Incorrecto: Usar subtítulos en lugar de subtítulos descriptivos

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Aunque esto proporciona una pista de texto, kind="subtitles" no satisface el requisito de subtítulos descriptivos. Los subtítulos típicamente incluyen solo diálogos y no transmitirán información de audio que no sea habla.

Correcto: Vídeo con subtítulos descriptivos

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</video>

Correcto: Vídeo con subtítulos descriptivos en múltiples idiomas

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English" default>
  <track src="captions_es.vtt" kind="captions" srclang="es" label="Español">
</video>

El atributo default indica qué pista de subtítulos descriptivos debe estar activa por defecto cuando el usuario tiene los subtítulos descriptivos habilitados.

Ejemplo de archivo de subtítulos descriptivos WebVTT

Un archivo básico captions_en.vtt se ve así:

WEBVTT

00:00:01.000 --> 00:00:04.000
[música alegre sonando]

00:00:05.000 --> 00:00:08.000
Sarah: ¡Bienvenidos a nuestra conferencia anual!

00:00:09.000 --> 00:00:12.000
[aplausos del público]

00:00:13.000 --> 00:00:17.000
Sarah: Hoy exploraremos tres temas clave.

Observa cómo los subtítulos descriptivos identifican al hablante, describen sonidos que no son habla y están sincronizados a marcas de tiempo específicas.

Learn more: