Fallo Común F75 de WCAG 2.1: No incluir subtítulos en medios sincronizados con información adicional

Herramientas para desarrolladores mostrando el árbol de accesibilidad y la falta de atributos ARIA en un campo de entrada, junto con un video de un presentador y subtítulos parciales en inglés.

La accesibilidad web garantiza que todos los usuarios, incluidas las personas con discapacidad auditiva, puedan acceder al contenido multimedia sin barreras. Un problema frecuente es la falta de subtítulos en los videos que contienen información adicional a la que se presenta en la página.

Este fallo, identificado como F75 en WCAG 2.1, compromete el cumplimiento del Criterio de Conformidad 1.2.2: Subtítulos (pregrabados). Se estima que más de 430 millones de personas en el mundo tienen discapacidad auditiva, por lo que la inclusión de subtítulos no solo mejora la accesibilidad, sino también la comprensión del contenido para todos los usuarios.

Acerca de este fallo

El fallo F75 ocurre cuando un video en una página web proporciona información adicional que no está presente en el texto y no cuenta con subtítulos. Esto deja fuera a usuarios con discapacidad auditiva, ya que no pueden acceder a la información completa.

Escenarios comunes del fallo:

  • Videos explicativos con detalles adicionales no mencionados en el texto.
  • Entrevistas o testimonios que incluyen información relevante sin subtítulos.
  • Presentaciones multimedia con datos importantes sin alternativa en texto.

Ejemplos

Ejemplo incorrecto 1: Video sin subtítulos y con información adicional

<video controls>
<source src="tutorial-formulario.mp4" type="video/mp4">

Tu navegador no soporta la reproducción de video.
</video>

🔴 Problema:

  • El video explica pasos detallados que no están en el texto de la página.
  • No tiene subtítulos, lo que impide el acceso a personas con discapacidad auditiva.

Solución correcta: Incluir subtítulos en el video

🔹 Código corregido:

<video controls>
<source src="tutorial-formulario.mp4" type="video/mp4">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
Tu navegador no soporta la reproducción de video.
</video>

¿Qué mejora?: Se añaden subtítulos (<track>) que permiten a los usuarios con discapacidad auditiva acceder a la información del video.

Ejemplo incorrecto 2: Video con información adicional, pero sin subtítulos

<video controls>
<source src="video-explicativo.mp4" type="video/mp4">
</video>
<p>Consulta nuestro video para más información.</p>

🔴 Problema:

  • El video contiene información detallada que no está en el texto de la página.
  • No hay subtítulos ni una transcripción accesible.

Solución correcta: Subtítulos + transcripción accesible

<video controls>
<source src="video-explicativo.mp4" type="video/mp4">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
</video>
<p><strong>Transcripción del video:</strong></p>
<p>En este video, explicamos el proceso detallado para completar el formulario, paso a paso...</p>

¿Qué mejora?:

  • Se incluyen subtítulos en el video.
  • Se proporciona una transcripción con la misma información.

Ejemplo correcto: Solución ideal

La solución más completa es combinar subtítulos, transcripción y accesibilidad en múltiples formatos.

<video controls>
<source src="tutorial.mp4" type="video/mp4">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
<track src="lenguaje-de-senas.vtt" kind="sign" srclang="es" label="Lenguaje de señas">

</video>

<p><strong>Transcripción completa:</strong></p>

<p>Este video muestra cómo llenar el formulario correctamente. En el primer paso...</p>

Reproductor de video acompañado de una transcripción escrita debajo, asegurando accesibilidad para personas con discapacidad auditiva.

¿Qué mejora?:

  • Se añaden subtítulos para accesibilidad auditiva.
  • Se proporciona una transcripción textual completa.
  • Se incluye interpretación en lenguaje de señas para mayor inclusión.

Errores comunes y cómo evitarlos

Errores frecuentes:

  • Publicar videos sin subtítulos cuando contienen información clave.
  • Asumir que todos los usuarios pueden escuchar el audio del video.
  • Depender solo del texto de la página sin ofrecer alternativas.

Cómo evitar estos errores:

  • Agregar subtítulos en todos los videos con audio.
  • Proporcionar transcripciones cuando el video tiene información adicional.
  • Verificar la accesibilidad con herramientas de validación de WCAG.

Preguntas frecuentes sobre el fallo F75

¿Los subtítulos automáticos de YouTube son suficientes?
No. Deben revisarse y corregirse para garantizar precisión.

¿Puedo usar solo transcripción en lugar de subtítulos?
No. Si el video tiene audio, debe incluir subtítulos para cumplir con WCAG 1.2.2.

¿Cómo agrego subtítulos a un video?
Puedes usar herramientas como Amara, Kapwing o YouTube Studio para generarlos.

¿Los subtítulos deben incluir sonidos?
No en este caso. Solo es obligatorio incluir el diálogo hablado.

¿Qué formatos de subtítulos se recomiendan?
El formato WebVTT (.vtt) es el más utilizado en HTML5.

¿Cómo saber si un video cumple con WCAG?
Verifica si tiene subtítulos y que no contenga información adicional sin alternativa en texto.

Recursos relacionados

Pruebas y validación

Procedimiento

  1. Reproduce el video en la página.
  2. Activa los subtítulos y verifica su precisión.
  3. Comprueba si el video contiene información adicional.
  4. Si hay información adicional, revisa que tenga una transcripción.

Resultados esperados

  • ✅ Si el video proporciona información adicional y tiene subtítulos o una transcripción accesible, cumple con WCAG.
  • ❌ Si el video proporciona información adicional y no tiene subtítulos ni transcripción, no cumple con WCAG.

La accesibilidad en videos es clave para garantizar una experiencia inclusiva para todos los usuarios. Cumplir con el criterio 1.2.2 de WCAG 2.1 mediante el uso de subtítulos y transcripciones es fundamental para una web accesible.

🚀 ¡Haz que tu contenido multimedia sea accesible para todos!

Si necesitas ayuda con la accesibilidad de tu web, contáctanos. 💡♿

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.