Reproductors accessibles, reproducció automàtica (1.4.2) i centelleigs (2.3.1)

Un vídeo perfectament subtitulat i audiodescrit continua sent inaccessible si el botó de subtítols no es pot activar amb el teclat, si arrenca sol amb el so al màxim i trepitja la veu del lector de pantalla, o si conté flaixos que poden provocar una crisi epilèptica. Aquesta lliçó tracta l'embolcall del contingut multimèdia: el reproductor, el comportament en carregar la pàgina i la seguretat del mateix vídeo.

Què ha de tenir un reproductor accessible

El reproductor és una interfície d'usuari i se li apliquen tots els criteris de les WCAG: teclat, focus, noms, contrast. En concret, un reproductor accessible ha de:

• Ser operable amb teclat (2.1.1): reproduir, posar en pausa, avançar, apujar i abaixar el volum, activar subtítols, pantalla completa. I amb focus visible (2.4.7) a cada control.
• Tenir controls amb nom accessible (4.1.2): «Reprodueix», «Posa en pausa», «Silencia», «Subtítols», «Audiodescripció», «Pantalla completa», que canvien segons l'estat (un botó que sempre diu «Reprodueix» encara que estigui posant en pausa confon).
• Permetre activar i desactivar subtítols i audiodescripció i, si és possible, personalitzar la mida i el color dels subtítols (EN 301 549 (PDF, s'obre en una finestra nova) 7.1.4).
• Oferir la transcripció accessible des del mateix reproductor o just a sota.
• Controls de mida suficient (2.5.8, 24 per 24 px com a mínim) i amb contrast 3:1 (1.4.11).
• No dependre del ratolí per a la barra de progrés: s'ha de poder moure amb les fletxes del teclat (i així també compleix el 2.5.7 Moviments d'arrossegament).
• Permetre canviar la velocitat de reproducció: ajuda persones amb dificultats de processament (més lenta) i usuaris de lector de pantalla acostumats a velocitats altes.

A la pràctica, el reproductor natiu d'HTML5 (<video controls>) és raonablement accessible en els navegadors actuals i admet pistes de subtítols amb <track>. Reproductors com Able Player (dissenyat per a l'accessibilitat, amb audiodescripció i transcripció interactiva) o Plyr ofereixen més control. El reproductor incrustat de YouTube és operable amb teclat i permet subtítols, però l'audiodescripció com a pista separada no està disponible a tots els canals: el més habitual és publicar un segon vídeo audiodescrit. Vimeo admet pistes de subtítols i, segons el pla contractat, pistes d'àudio alternatives.

1.4.2 Control de l'àudio

El criteri 1.4.2 Control de l'àudio (nivell A) estableix que si un àudio es reprodueix automàticament durant més de 3 segons, hi ha d'haver un mecanisme per posar-lo en pausa o aturar-lo, o per controlar-ne el volum de manera independent del volum general del sistema. El motiu és directe: una persona que fa servir lector de pantalla sent la pàgina a través de la veu sintètica; si un vídeo arrenca amb so, no pot sentir el lector per trobar el botó de pausa. És una trampa.

Bones pràctiques de disseny:

• Res no arrenca amb so per si sol. Si per raons de negoci hi ha reproducció automàtica, que sigui silenciada (muted) i que la persona activi el so.
• Si hi ha vídeo de fons decoratiu en una capçalera, sense àudio i amb botó de pausa visible (també pel 2.2.2 Posar en pausa, aturar, amagar, que exigeix poder aturar qualsevol moviment automàtic de més de 5 segons).
• El control per aturar l'àudio ha de ser al principi de la pàgina o ser el primer element enfocable, perquè s'hi pugui arribar sense sentir res.
• Els navegadors bloquegen la reproducció automàtica amb so en molts casos, però no en tots. No et refiïs del navegador.

<!-- Incorrecte: arrenca amb so -->
<video autoplay src="promo.mp4"></video>

<!-- Acceptable: silenciat, amb controls i en bucle només si és decoratiu -->
<video autoplay muted loop controls src="fondo.mp4" aria-label="Vídeo decoratiu de la façana"></video>

2.3.1 Llindar de tres flaixos o menys

El criteri 2.3.1 Llindar de tres flaixos o menys (nivell A) prohibeix que qualsevol contingut faci més de tres flaixos per segon, llevat que el flaix estigui per sota dels llindars de flaix general i de flaix vermell (definits per àrea i contrast de luminància). És un dels pocs criteris que protegeixen contra un dany físic: l'epilèpsia fotosensible afecta prop d'una de cada 4.000 persones i els flaixos d'entre 3 i 60 Hz, especialment els vermells saturats, poden provocar crisis. El criteri 2.3.2 Tres flaixos (AAA) elimina les excepcions.

On apareix el problema: vídeos amb flaixos de càmera, transicions estroboscòpiques, escenes de concerts, llums d'emergència, GIF animats, bàners publicitaris que centellegen, efectes de «glitch». Què cal fer:

• Revisar el material abans de publicar amb eines com PEAT (Photosensitive Epilepsy Analysis Tool, del Trace Center, gratuïta per a Windows) o Harding Test (comercial, usat en televisió).
• Reeditar les escenes problemàtiques: reduir-ne la freqüència, l'àrea de la pantalla afectada o la saturació del vermell.
• Si no es pot modificar el contingut, advertir-ho abans de reproduir i no reproduir automàticament.
• Evitar GIF i animacions CSS que centellegin; en qualsevol cas, complir el 2.2.2 (posar en pausa) i respectar prefers-reduced-motion.

Com comprovar-ho

• Carrega la pàgina amb el so activat: sona alguna cosa sense demanar-ho? La pots aturar sense ratolí?
• Recorre el reproductor amb Tab: arribes a tots els controls, veus el focus i els pots activar?
• Amb lector de pantalla, cada botó diu què fa i en quin estat és?
• Davant el dubte sobre els flaixos, passa-ho per PEAT.

Resum

• Un reproductor accessible és operable amb teclat, amb focus visible, controls amb nom i amb estat, subtítols i audiodescripció activables, transcripció i velocitat ajustable.
• El reproductor natiu HTML5 amb <track> és una bona base; Able Player hi afegeix audiodescripció i transcripció interactiva.
• 1.4.2 Control de l'àudio (A): res no sona automàticament més de 3 segons sense un mecanisme per aturar-ho; el millor és no arrencar amb so.
• 2.2.2 (A): tot moviment automàtic de més de 5 segons es pot posar en pausa.
• 2.3.1 Llindar de tres flaixos o menys (A): revisa amb PEAT, reedita o adverteix; és un criteri de seguretat física.