Los elementos <audio> deben tener una pista de subtítulos

Cuando un elemento <audio> carece de una pista de subtítulos, toda la información que transmite — diálogos, narración, efectos de sonido, señales musicales e identificación de hablantes — se vuelve completamente inaccesible para usuarios que son sordos o sordociegos. Esto se considera un problema de accesibilidad crítico porque bloquea a grupos enteros de usuarios del acceso al contenido.

Esta regla se relaciona con el Criterio de Conformidad 1.2.1 de WCAG: Solo audio y solo vídeo (pregrabado) (Nivel A), que requiere que se proporcione una alternativa de texto para contenido de solo audio pregrabado. También se incluye bajo los requisitos de Section 508 y EN 301 549. Los criterios de Nivel A representan los requisitos de accesibilidad más fundamentales — no cumplirlos significa que existen barreras significativas para usuarios con discapacidades.

Subtítulos vs. Subtítulos para traducción

Es importante entender que los subtítulos y los subtítulos para traducción no son lo mismo:

• Subtítulos (kind="captions") están diseñados para usuarios sordos y con problemas auditivos. Incluyen diálogos, identificación de hablantes, efectos de sonido (ej., “[se cierra la puerta]”), señales musicales (ej., “[música suave de piano]”), y otra información de audio significativa.
• Subtítulos para traducción (kind="subtitles") son traducciones de idioma destinadas a usuarios oyentes que no comprenden el idioma hablado. Típicamente incluyen solo diálogos y narración.

Debido a esta distinción, debes usar kind="captions", no kind="subtitles", para satisfacer esta regla.

Cómo solucionarlo

1. Crea un archivo de subtítulos (típicamente en formato WebVTT .vtt) que incluya toda la información de audio significativa: quién habla, qué dice, y sonidos relevantes que no son habla.
2. Agrega un elemento <track> dentro de tu elemento <audio>.
3. Establece el atributo kind como "captions".
4. Establece el atributo src con la ruta de tu archivo de subtítulos.
5. Usa el atributo srclang para especificar el idioma de los subtítulos.
6. Usa el atributo label para dar a la pista un nombre legible para humanos.

Aunque técnicamente solo src es requerido en un elemento <track>, incluir kind, srclang y label es muy recomendable para claridad y funcionalidad apropiada.

Ejemplos

Incorrecto: <audio> sin pista de subtítulos

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
</audio>

Esto no cumple la regla porque no hay un elemento <track> proporcionando subtítulos.

Incorrecto: <track> con valor kind incorrecto

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</audio>

Esto falla porque kind="subtitles" no satisface el requisito de subtítulos. Los subtítulos para traducción no son un sustituto de los subtítulos para sordos.

Correcto: <audio> con una pista de subtítulos

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
</audio>

Correcto: <audio> con múltiples pistas de subtítulos para diferentes idiomas

<audio controls>
  <source src="interview.mp3" type="audio/mp3">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
  <track src="captions_es.vtt" kind="captions" srclang="es" label="Subtítulos en español">
</audio>

Proporcionar subtítulos en múltiples idiomas asegura una accesibilidad más amplia y es especialmente útil cuando tu audiencia habla diferentes idiomas.

Ejemplo de archivo de subtítulos WebVTT

Un archivo básico captions_en.vtt podría verse así:

WEBVTT

00:00:01.000 --> 00:00:04.000
[Música de introducción animada]

00:00:04.500 --> 00:00:07.000
Anfitrión: Bienvenidos todos al programa.

00:00:07.500 --> 00:00:10.000
Invitado: ¡Gracias por invitarme!

00:00:10.500 --> 00:00:12.000
[Aplausos de la audiencia]

Observa cómo los subtítulos incluyen identificación de hablantes (Anfitrión:, Invitado:), sonidos que no son habla ([Música de introducción animada], [Aplausos de la audiencia]), y el diálogo completo. Este nivel de detalle es lo que hace que los subtítulos sean efectivos para usuarios sordos y sordociegos.

Learn more:

Deque Reference

Deque University - How To Fix

→