Reproductores accesibles, reproducción automática (1.4.2) y parpadeos (2.3.1)

Un vídeo perfectamente subtitulado y audiodescrito sigue siendo inaccesible si el botón de subtítulos no se puede activar con teclado, si arranca solo con el sonido a tope y pisa la voz del lector de pantalla, o si contiene destellos que pueden provocar una crisis epiléptica. Esta lección trata el envoltorio del contenido multimedia: el reproductor, el comportamiento al cargar la página y la seguridad del propio vídeo.

Qué debe tener un reproductor accesible

El reproductor es una interfaz de usuario y le aplican todos los criterios de las WCAG: teclado, foco, nombres, contraste. En concreto, un reproductor accesible debe:

• Ser operable por teclado (2.1.1): reproducir, pausar, avanzar, subir y bajar volumen, activar subtítulos, pantalla completa. Y con foco visible (2.4.7) en cada control.
• Tener controles con nombre accesible (4.1.2): «Reproducir», «Pausar», «Silenciar», «Subtítulos», «Audiodescripción», «Pantalla completa», que cambian según el estado (un botón que siempre dice «Reproducir» aunque esté pausando confunde).
• Permitir activar y desactivar subtítulos y audiodescripción y, si es posible, personalizar el tamaño y el color de los subtítulos (EN 301 549 (PDF, se abre en una ventana nueva) 7.1.4).
• Ofrecer la transcripción accesible desde el propio reproductor o justo debajo.
• Controles de tamaño suficiente (2.5.8, 24 por 24 px como mínimo) y con contraste 3:1 (1.4.11).
• No depender del ratón para la barra de progreso: debe poder moverse con las flechas del teclado (y así cumple también 2.5.7 Movimientos de arrastre).
• Permitir cambiar la velocidad de reproducción: ayuda a personas con dificultades de procesamiento (más lento) y a usuarios de lector de pantalla acostumbrados a velocidades altas.

En la práctica, el reproductor nativo de HTML5 (<video controls>) es razonablemente accesible en los navegadores actuales y admite pistas de subtítulos con <track>. Reproductores como Able Player (diseñado para accesibilidad, con audiodescripción y transcripción interactiva) o Plyr ofrecen más control. El reproductor incrustado de YouTube es operable por teclado y permite subtítulos, pero la audiodescripción como pista separada no está disponible en todos los canales: lo habitual es publicar un segundo vídeo audiodescrito. Vimeo admite pistas de subtítulos y, según el plan contratado, pistas de audio alternativas.

1.4.2 Control del audio

El criterio 1.4.2 Control del audio (nivel A) establece que si un audio se reproduce automáticamente durante más de 3 segundos, debe existir un mecanismo para pausarlo o detenerlo, o para controlar su volumen de forma independiente del volumen general del sistema. El motivo es directo: una persona que usa lector de pantalla oye la página a través de la voz sintética; si un vídeo arranca con sonido, no puede oír al lector para encontrar el botón de pausa. Es una trampa.

Buenas prácticas de diseño:

• Nada arranca con sonido por sí solo. Si por razones de negocio hay reproducción automática, que sea silenciada (muted) y la persona active el sonido.
• Si hay vídeo de fondo decorativo en una cabecera, sin audio y con botón de pausa visible (también por 2.2.2 Poner en pausa, detener, ocultar, que exige poder detener cualquier movimiento automático de más de 5 segundos).
• El control para parar el audio debe estar al principio de la página o ser el primer elemento enfocable, para que se pueda alcanzar sin oír nada.
• Los navegadores bloquean el autoplay con sonido en muchos casos, pero no en todos. No confíes en el navegador.

<!-- Incorrecto: arranca con sonido -->
<video autoplay src="promo.mp4"></video>

<!-- Aceptable: silenciado, con controles y en bucle solo si es decorativo -->
<video autoplay muted loop controls src="fondo.mp4" aria-label="Vídeo decorativo de la fachada"></video>

2.3.1 Umbral de tres destellos o menos

El criterio 2.3.1 Umbral de tres destellos o menos (nivel A) prohíbe que cualquier contenido destelle más de tres veces por segundo, salvo que el destello esté por debajo de los umbrales de destello general y de destello rojo (definidos por área y contraste de luminancia). Es uno de los pocos criterios que protegen contra un daño físico: la epilepsia fotosensible afecta a cerca de una de cada 4.000 personas y los destellos entre 3 y 60 Hz, especialmente los rojos saturados, pueden provocar crisis. El criterio 2.3.2 Tres destellos (AAA) elimina las excepciones.

Dónde aparece el problema: vídeos con flashes de cámara, transiciones estroboscópicas, escenas de conciertos, luces de emergencia, GIF animados, banners publicitarios parpadeantes, efectos de «glitch». Qué hacer:

• Revisar el material antes de publicar con herramientas como PEAT (Photosensitive Epilepsy Analysis Tool, del Trace Center, gratuita para Windows) o Harding Test (comercial, usado en televisión).
• Reeditar las escenas problemáticas: reducir la frecuencia, el área de la pantalla afectada o la saturación del rojo.
• Si no se puede modificar el contenido, advertir antes de reproducir y no reproducir automáticamente.
• Evitar GIF y animaciones CSS que parpadeen; en cualquier caso, cumplir 2.2.2 (pausar) y respetar prefers-reduced-motion.

Cómo comprobarlo

• Carga la página con el sonido activado: ¿suena algo sin pedirlo? ¿Puedes pararlo sin ratón?
• Recorre el reproductor con Tab: ¿llegas a todos los controles, ves el foco y puedes activarlos?
• Con lector de pantalla, ¿cada botón dice lo que hace y su estado?
• Ante la duda sobre destellos, pásalo por PEAT.

Resumen

• Un reproductor accesible es operable por teclado, con foco visible, controles nombrados y con estado, subtítulos y audiodescripción activables, transcripción y velocidad ajustable.
• El reproductor nativo HTML5 con <track> es una buena base; Able Player añade audiodescripción y transcripción interactiva.
• 1.4.2 Control del audio (A): nada suena automáticamente más de 3 segundos sin mecanismo para pararlo; lo mejor es no arrancar con sonido.
• 2.2.2 (A): todo movimiento automático de más de 5 segundos se puede pausar.
• 2.3.1 Umbral de tres destellos o menos (A): revisa con PEAT, reedita o advierte; es un criterio de seguridad física.