Reproductores y plataformas: YouTube, Vimeo, HTML5 y reproductores accesibles

Un vídeo con subtítulos y audiodescripción perfectos puede ser inaccesible si el reproductor no permite activarlos con teclado o si se lanza solo con el sonido a tope. El reproductor es un componente interactivo más y debe cumplir las WCAG como cualquier otro: operable con teclado, con foco visible, con botones nombrados y sin trampas. Esta lección compara las opciones habituales (vídeo HTML5 nativo, YouTube, Vimeo y reproductores especializados) y muestra cómo configurar cada una.

Requisitos de un reproductor accesible

• Operable con teclado (2.1.1): reproducir/pausar, volumen, buscar, pantalla completa, subtítulos y velocidad accesibles con Tab y teclas; sin trampas (2.1.2) al entrar en el reproductor.
• Nombre, función, valor (4.1.2): cada botón con nombre («Reproducir», «Activar subtítulos»), estado (pulsado/no), y los deslizadores de progreso y volumen como sliders con valor anunciado.
• Foco visible (2.4.7) y controles con tamaño suficiente (2.5.8).
• Control del audio (1.4.2): si el audio se reproduce automáticamente más de 3 segundos, debe poder pausarse o silenciarse de forma independiente. La buena práctica es no reproducir automáticamente con sonido.
• Pausar, detener, ocultar (2.2.2): el vídeo que se inicia solo y dura más de 5 segundos debe poder pausarse (vídeos de fondo decorativos incluidos).
• Sin destellos (2.3.1): nada que destelle más de tres veces por segundo; aplica al contenido del vídeo.
• Subtítulos y audiodescripción activables (EN 301 549 (PDF, se abre en una ventana nueva) 7.1.1 y 7.2.1), con subtítulos personalizables (7.1.4: tamaño, color, fondo) y sincronizados (7.1.2), y que se conserven al transmitir (7.1.3, 7.2.3).
• Contraste de los controles sobre el vídeo (1.4.11) y transcripción accesible junto al reproductor.

Vídeo HTML5 nativo con pistas WebVTT

El elemento <video> con controls ofrece un reproductor nativo razonablemente accesible en todos los navegadores modernos, con soporte de subtítulos mediante <track>:

<video controls preload="metadata" poster="biblioteca.jpg"
       aria-label="Presentación de la nueva Biblioteca Municipal">
  <source src="biblioteca.mp4" type="video/mp4">
  <track kind="captions" src="biblioteca-es.vtt" srclang="es" label="Español" default>
  <track kind="subtitles" src="biblioteca-en.vtt" srclang="en" label="English">
  <track kind="descriptions" src="biblioteca-ad.vtt" srclang="es" label="Audiodescripción">
  <track kind="chapters" src="biblioteca-cap.vtt" srclang="es" label="Capítulos">
  <p>Tu navegador no reproduce vídeo. <a href="biblioteca.mp4">Descarga el vídeo</a>
     o lee la <a href="#transcripcion">transcripción</a>.</p>
</video>

<details id="transcripcion">
  <summary>Transcripción del vídeo</summary>
  <p>[Fachada de ladrillo con grandes cristaleras. Rótulo: Biblioteca Municipal Río Segura.]</p>
  <p><strong>Narradora:</strong> La nueva biblioteca abre sus puertas…</p>
</details>

Notas sobre los tipos de pista: captions (subtítulos para personas sordas: incluyen sonidos relevantes e identificación de hablantes; es lo que exige 1.2.2), subtitles (traducción), descriptions (audiodescripción en texto; los navegadores no la leen por defecto, la aprovechan reproductores como Able Player), chapters (navegación por capítulos). El atributo default activa una pista al cargar. Un fichero WebVTT básico:

WEBVTT

1
00:00:03.000 --> 00:00:06.500
[Música suave]

2
00:00:07.000 --> 00:00:10.200
NARRADORA: La nueva biblioteca abre sus puertas

3
00:00:10.200 --> 00:00:13.000 line:85% align:start
el próximo 15 de marzo.

Buenas prácticas de subtitulado (UNE 153010:2012): máximo dos líneas de unos 37 caracteres, velocidad razonable (unos 15 caracteres por segundo), identificación de hablantes con color, etiqueta o guion, efectos sonoros entre paréntesis y con mayúscula inicial (en la web también son habituales los corchetes), sincronía con el habla; como práctica profesional habitual, entre 1 y 6 segundos por subtítulo. Limitaciones del reproductor nativo: la personalización de subtítulos depende del navegador o del sistema, no hay botón de audiodescripción (hay que servir una pista de audio alternativa con audioTracks, con soporte desigual) y los estilos de los controles no se pueden adaptar. Evita autoplay con sonido; si usas un vídeo de fondo decorativo, ponle muted, loop, respeta prefers-reduced-motion y ofrece botón de pausa.

Reproductores accesibles de terceros

• Able Player: de código abierto, diseñado desde la accesibilidad. Soporta subtítulos, descripciones en texto con voz sintética y pausa (AD extendida), pista de audio descrita alternativa, transcripción interactiva generada a partir de las pistas, capítulos, vídeo de lengua de signos sincronizado en ventana, controles con teclado, personalización de subtítulos y uso con YouTube y Vimeo como fuente. Es una referencia habitual en administraciones y universidades.
• Plyr y Video.js: ligeros y populares, con controles accesibles por teclado y soporte de pistas; carecen de audiodescripción nativa (Video.js la añade con plugins) y de transcripción interactiva.
• MediaElement.js: histórico, con soporte de pistas y buena compatibilidad.
• Reproductores comerciales de plataformas de vídeo (Kaltura, Brightcove, JW Player, Vimeo OTT) incluyen opciones de accesibilidad; verifica en cada caso teclado, nombres de botones, subtítulos personalizables y pista de AD.

YouTube

YouTube es el canal más usado por administraciones y empresas. Claves para publicar accesible:

1. Subtítulos: sube tu fichero (.srt, .vtt, .sbv) en Estudio de YouTube > Subtítulos, o corrige los automáticos. Los subtítulos automáticos (reconocimiento de voz) no cumplen 1.2.2 por sí solos: carecen de puntuación, confunden nombres y cifras, no identifican hablantes ni sonidos. Deben revisarse y corregirse, y hay que indicar el idioma del vídeo.
2. Audiodescripción: YouTube permite pistas de audio adicionales (multi-audio) solo en canales habilitados; la opción universal es publicar una versión con AD como vídeo separado, enlazado desde la descripción y desde la web.
3. Descripción y capítulos: capítulos mediante marcas de tiempo en la descripción; enlace a la transcripción completa en la web (la transcripción automática de YouTube ayuda, pero no sustituye a la corregida).
4. Inserción (embed): el <iframe> necesita un atributo title descriptivo («Vídeo: Presentación de la nueva biblioteca»); no actives autoplay; el reproductor de YouTube es operable con teclado y sus controles están nombrados, y permite personalizar subtítulos desde el engranaje. Comprueba que la miniatura no contiene texto esencial sin alternativa.
5. Portada y título del vídeo descriptivos; evita texto incrustado en el vídeo sin leerlo en voz o en AD.

Vimeo

Vimeo admite subida de subtítulos en varios idiomas (.vtt, .srt, .dfxp…), subtítulos automáticos para corregir, capítulos y, pistas de audiodescripción que el usuario activa desde el reproductor (comprueba en qué planes está disponible). Su reproductor es operable con teclado y expone nombres de botones. Permite desactivar el autoplay y los vídeos relacionados, y ocultar controles innecesarios. El <iframe> también necesita title.

Plataformas de formación y redes sociales

Los campus virtuales (Moodle, Canvas), los gestores de vídeo universitario (Kaltura, Panopto) y las redes sociales (LinkedIn, Instagram, TikTok) tienen capacidades desiguales: casi todas admiten subtítulos (cerrados o quemados en la imagen), casi ninguna audiodescripción. Para redes, la práctica habitual es subtítulos abiertos (incrustados en la imagen) corregidos a mano, descripción del vídeo en el texto de la publicación y enlace a la versión completa accesible en la web. Los subtítulos abiertos son menos flexibles (no se pueden personalizar) pero garantizan que se ven en cualquier cliente.

Resumen

• El reproductor es un componente interactivo: teclado, nombres y estados de botones, foco visible, control de audio (1.4.2), pausa (2.2.2) y sin destellos (2.3.1); la EN 301 549 cap. 7 exige subtítulos y AD activables, sincronizados y personalizables.
• HTML5 <video controls> con <track> de tipo captions, subtitles, descriptions y chapters en WebVTT, más transcripción accesible al lado.
• Able Player es la referencia en accesibilidad (AD en texto con pausa, transcripción interactiva, ventana de LSE); Plyr y Video.js son correctos para lo básico.
• YouTube: subtítulos subidos o corregidos (nunca los automáticos sin revisar), versión con AD como vídeo aparte, title en el iframe, sin autoplay. Vimeo admite pistas de AD (según el plan).
• En redes sociales: subtítulos abiertos corregidos, descripción en el texto y enlace a la versión accesible completa.