El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Contenido de Video y Audio Accesible

Siguiente ►
►

El corazón de Cursalia es el reproductor de vídeo-lección: cada curso son horas de vídeo con voz en off, capturas de pantalla y demostraciones. Un vídeo es, por naturaleza, una barrera doble: Diego (sordo/hipoacusia) no oye la narración, y Marta (ciega) no ve lo que se muestra en pantalla. Hugo, con dislexia y TDAH, necesita poder leer y controlar el ritmo. Hacer accesible el multimedia significa ofrecer el mismo contenido por varios canales sensoriales a la vez. En esta lección implementamos los criterios de la familia 1.2.x de WCAG sobre el reproductor de Cursalia: distinguiremos los distintos tipos de alternativa, veremos el elemento <track> y el formato WebVTT, y construiremos controles operables por teclado (enlazando con 05-02).

Contenido

  1. Los cuatro tipos de alternativa multimedia
  2. Qué exige cada nivel WCAG (A y AA)
  3. El elemento <track> y el formato WebVTT
  4. Un reproductor accesible: controles reales y teclado
  5. No autoplay con sonido y evitar destellos
  6. Reproductores embebidos de terceros
  7. Errores comunes, ejercicios y conclusión

  1. Los cuatro tipos de alternativa multimedia

Es fácil confundirlos, pero cada uno resuelve una barrera distinta. Esta tabla es la referencia mental:

Alternativa Qué es A quién beneficia sobre todo
Subtítulos (subtitles) Traducción del diálogo hablado a otro idioma (asumen que oyes el audio) Personas que no dominan el idioma original
Subtítulos para sordos (captions) Texto sincronizado del diálogo + sonidos relevantes (música, "[aplausos]", quién habla) Diego y cualquier persona sorda o en entorno silencioso
Transcripción Texto completo del contenido, no sincronizado, leíble de corrido Hugo (sigue su ritmo, relee), Marta (con lector de pantalla), SEO
Audiodescripción Narración de la información visual (lo que se ve pero no se dice) en las pausas del diálogo Marta y personas ciegas
Lengua de signos Intérprete de signos superpuesto o en ventana Personas sordas cuya primera lengua es la lengua de signos

La distinción subtitles vs captions es la que más se confunde: los subtitles asumen que oyes (solo traducen el diálogo); los captions asumen que no oyes, e incluyen sonidos como "[música tensa]" o "[la app emite un pitido]". Para Diego, los captions son imprescindibles; unos subtitles no le bastan porque se pierde los sonidos que aportan información.

  1. Qué exige cada nivel WCAG (A y AA)

Los criterios de la Guía 1.2 escalan según el nivel de conformidad al que aspires:

Criterio Nivel Exige
1.2.1 Solo audio / solo vídeo (pregrabado) A Alternativa textual para audio solo (transcripción); descripción para vídeo solo
1.2.2 Subtítulos (pregrabado) A Captions para todo vídeo con audio
1.2.3 Audiodescripción o alternativa (pregrabado) A Audiodescripción o una transcripción completa que incluya lo visual
1.2.4 Subtítulos (en directo) AA Captions en emisiones en vivo
1.2.5 Audiodescripción (pregrabado) AA Audiodescripción propiamente dicha

En la práctica, para las vídeo-lecciones pregrabadas de Cursalia y un objetivo realista de nivel AA, el mínimo es: captions (1.2.2), audiodescripción (1.2.5) y, como refuerzo que además cubre 1.2.3 de sobra, una transcripción completa. La transcripción es la alternativa de mejor relación coste/beneficio: barata de producir, beneficia a muchos perfiles y mejora el SEO.

  1. El elemento <track> y el formato WebVTT

El HTML nativo ofrece el elemento <track> para asociar pistas de texto temporizadas a un <video>. Su atributo kind define el tipo:

<video controls>
  <source src="leccion-01.mp4" type="video/mp4">

  <!-- Captions: diálogo + sonidos, en el idioma del vídeo -->
  <track kind="captions" src="leccion-01-es.vtt" srclang="es" label="Español (subtítulos)" default>

  <!-- Subtitles: traducción del diálogo a otro idioma -->
  <track kind="subtitles" src="leccion-01-en.vtt" srclang="en" label="English">

  <!-- Descriptions: audiodescripción textual (la lee la TA) -->
  <track kind="descriptions" src="leccion-01-desc.vtt" srclang="es" label="Audiodescripción">
</video>

Puntos clave:

  • kind="captions" para Diego, kind="subtitles" para traducción, kind="descriptions" para la información visual.
  • El atributo default marca la pista que se activa sin que el usuario haga nada.
  • label es el texto que verá el usuario en el menú de pistas: hazlo descriptivo.

El formato de las pistas es WebVTT (.vtt), un fichero de texto plano sencillo: la cabecera WEBVTT, y bloques con marca de tiempo inicio --> fin y el texto:

WEBVTT

00:00:00.000 --> 00:00:03.500
Bienvenido a la lección de accesibilidad web.

00:00:03.500 --> 00:00:06.000
[música suave de introducción]

00:00:06.000 --> 00:00:10.200
Marta: hoy veremos cómo construir un reproductor accesible.

Fíjate en el bloque [música suave de introducción]: eso es lo que convierte unos subtitles en captions. Se anota entre corchetes el sonido no verbal relevante y, cuando hay varios interlocutores, se indica quién habla.

  1. Un reproductor accesible: controles reales y teclado

Si usas <video controls>, el navegador te da controles nativos que ya son bastante accesibles. Pero en Cursalia el reproductor es personalizado (marca propia, velocidad, notas). En cuanto sustituyes los controles nativos, tú te haces responsable de su accesibilidad. Reglas:

<!-- MAL: controles falsos, no operables por teclado ni con nombre -->
<div class="play" onclick="play()">▶</div>

<!-- BIEN: botón real, con nombre accesible, operable por teclado -->
<button type="button" id="play" aria-label="Reproducir">
  <svg aria-hidden="true" focusable="false"><!-- icono ▶ --></svg>
</button>
  • Controles como botones reales. Cada control (play/pausa, silencio, pantalla completa) es un <button>, no un <div>. Así es focusable y operable con Enter/Espacio sin JavaScript extra (ver 05-02).
  • Nombre accesible. El icono ▶ no dice nada a Marta. Añade aria-label (o texto oculto) y marca el <svg> decorativo con aria-hidden="true" (lo veremos a fondo en 05-04).
  • Estado dinámico. El botón play/pausa cambia de función; refléjalo actualizando su nombre: cuando se reproduce, aria-label="Pausar"; al pausar, aria-label="Reproducir".
  • Foco visible. Los controles deben mostrar el foco (:focus-visible, Módulo 4) para que Lucía sepa cuál va a activar.
const video = document.querySelector('video');
const btnPlay = document.getElementById('play');

btnPlay.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    btnPlay.setAttribute('aria-label', 'Pausar'); // sincroniza nombre y estado
  } else {
    video.pause();
    btnPlay.setAttribute('aria-label', 'Reproducir');
  }
});

Además, ofrece la transcripción como texto en la página, bajo el reproductor o en un panel plegable (patrón disclosure de 05-01). A Hugo le permite leer a su ritmo y a Marta consultarla con NVDA sin depender de la reproducción.

  1. No autoplay con sonido y evitar destellos

Dos criterios que afectan directamente al reproductor:

  • 1.4.2 (Control del audio). Si un audio se reproduce automáticamente durante más de 3 segundos, debe haber un mecanismo para pausarlo o silenciarlo. La regla práctica y respetuosa: no hagas autoplay con sonido. El audio inesperado tapa la voz sintética de NVDA (Marta no puede ni oír su lector) y sobresalta a cualquiera. Si autorreproduces un vídeo, que sea silenciado por defecto.
<!-- Aceptable: autoplay SOLO si va silenciado -->
<video autoplay muted playsinline>…</video>
<!-- Evita: <video autoplay> con sonido -->
  • 2.3.1 (Umbral de tres destellos). El contenido no debe destellar más de tres veces por segundo, para no provocar crisis a personas con epilepsia fotosensible. Revisa que ninguna vídeo-lección contenga secuencias con parpadeos rápidos o estroboscópicos; si el material original los tiene, edítalos.

  1. Reproductores embebidos de terceros

Muchas plataformas incrustan vídeo de YouTube o Vimeo vía <iframe> en lugar de servirlo ellas. Esto tiene ventajas (ancho de banda, transcodificación) pero también limitaciones de accesibilidad que debes conocer:

  • Heredas su interfaz. La accesibilidad de teclado y de lector de pantalla depende del reproductor de terceros, no de ti. Los de YouTube y Vimeo son razonables, pero no controlas sus cambios.
  • Los captions dependen de la plataforma. Puedes subir tu .vtt, pero la calidad de los subtítulos automáticos es baja: no confíes en ellos para conformidad. Revisa y corrige siempre las pistas.
  • Da nombre al iframe. Un <iframe> sin título es un agujero negro para Marta. Añade siempre title:
<!-- El title describe QUÉ contiene el iframe -->
<iframe src="https://www.youtube.com/embed/…"
        title="Vídeo-lección: introducción a la accesibilidad"
        allowfullscreen></iframe>
  • Audiodescripción limitada. Los reproductores embebidos rara vez soportan pistas de audiodescripción; suele resolverse con una versión alternativa del vídeo o con la transcripción ampliada con lo visual.

Conclusión práctica: embeber terceros es válido, pero sigues siendo responsable de que haya captions correctos, un title en el iframe y una transcripción propia.

Errores Comunes y Consejos

  • Confundir subtitles con captions. Publicar solo subtitles (diálogo) creyendo que cumples 1.2.2. Diego necesita captions con los sonidos.
  • Fiarte de los subtítulos automáticos. La transcripción automática de YouTube tiene errores; para conformidad hay que revisarla y corregirla.
  • Controles <div> con onclick. No operables por teclado ni anunciados. Usa <button> con nombre accesible.
  • Iconos sin nombre. Un botón que solo contiene un ▶ no dice nada a NVDA. Añade aria-label y oculta el icono con aria-hidden.
  • Autoplay con sonido. Tapa al lector de pantalla y molesta a todos. Silénciado o nada.
  • Consejo: produce siempre la transcripción. Es la alternativa más barata, ayuda a Diego, a Marta y a Hugo a la vez, cumple 1.2.3 y de propina mejora el posicionamiento.

Ejercicios

Ejercicio 1. Un compañero dice: "ya he puesto subtítulos, el vídeo cumple para personas sordas". Ha usado kind="subtitles" con solo el diálogo. ¿Es correcto? ¿Qué cambiarías?

Ejercicio 2. Escribe un fragmento WebVTT de tres bloques para el inicio de una lección donde suena una melodía, habla la instructora y suena una notificación de la app. Anota los sonidos como corresponde.

Ejercicio 3. Tienes este control de play. Enumera todos los problemas de accesibilidad y reescríbelo.

<div class="btn-play" onclick="reproducir()">▶</div>

Soluciones

Solución 1. No es correcto. kind="subtitles" con solo el diálogo son subtitles, no captions. Para personas sordas se necesita kind="captions" que incluya, además del diálogo, los sonidos relevantes ("[música]", "[pitido de la app]") e identifique quién habla. Diego se perdería toda la información sonora no verbal con unos meros subtitles.

Solución 2.

WEBVTT

00:00:00.000 --> 00:00:02.500
[melodía de introducción]

00:00:02.500 --> 00:00:07.000
Instructora: comencemos configurando el reproductor.

00:00:07.000 --> 00:00:08.200
[la aplicación emite una notificación]

Los sonidos no verbales van entre corchetes y el interlocutor se nombra antes del diálogo: eso los convierte en captions válidos para Diego.

Solución 3. Problemas: (1) es un <div>, no focusable ni operable por teclado, Lucía no puede activarlo; (2) onclick sin manejo de Enter/Espacio; (3) el ▶ no tiene nombre accesible, Marta no sabe qué es; (4) no hay estado (no cambia a "pausar"). Reescritura:

<button type="button" class="btn-play" id="play" aria-label="Reproducir">
  <span aria-hidden="true">▶</span>
</button>

Con un <button> es focusable y operable con teclado gratis; el aria-label le da nombre; el ▶ se oculta a la TA con aria-hidden. En JS se actualiza aria-label a "Pausar" al reproducir.

Conclusión

Hemos hecho accesible el reproductor de Cursalia: distinguimos subtitles, captions, transcripción, audiodescripción y lengua de signos; sabemos qué exige cada nivel WCAG, cómo asociar pistas con <track> y WebVTT, cómo construir controles operables por teclado con nombre accesible, y las reglas del autoplay y los destellos. Nos queda un último tipo de contenido no textual omnipresente en la plataforma: las imágenes. Miniaturas de curso, el logo, iconos de categoría, el gráfico de progreso… todas necesitan una alternativa textual. En la siguiente y última lección del módulo, 05-04: Proporcionar Alternativas de Texto para Imágenes, cerraremos el criterio 1.1.1 con un árbol de decisión completo.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2026. Todos los derechos reservados