Reproductors i plataformes: YouTube, Vimeo, HTML5 i reproductors accessibles

Un vídeo amb subtítols i audiodescripció perfectes pot ser inaccessible si el reproductor no permet activar-los amb el teclat o si s'inicia sol amb el so a tota potència. El reproductor és un component interactiu més i ha de complir les WCAG com qualsevol altre: operable amb el teclat, amb focus visible, amb botons amb nom i sense paranys. Aquesta lliçó compara les opcions habituals (vídeo HTML5 natiu, YouTube, Vimeo i reproductors especialitzats) i mostra com configurar-les.

Requisits d'un reproductor accessible

• Operable amb el teclat (2.1.1): reproduir/posar en pausa, volum, cercar, pantalla completa, subtítols i velocitat accessibles amb Tab i tecles; sense paranys (2.1.2) en entrar al reproductor.
• Nom, funció i valor (4.1.2): cada botó amb nom («Reprodueix», «Activa els subtítols»), estat (premut/no), i els controls lliscants de progrés i de volum com a sliders amb el valor anunciat.
• Focus visible (2.4.7) i controls amb una mida suficient (2.5.8).
• Control de l'àudio (1.4.2): si l'àudio es reprodueix automàticament més de 3 segons, s'ha de poder posar en pausa o silenciar de manera independent. La bona pràctica és no reproduir automàticament amb so.
• Posar en pausa, aturar, amagar (2.2.2): el vídeo que s'inicia sol i dura més de 5 segons s'ha de poder posar en pausa (vídeos de fons decoratius inclosos).
• Sense flaixos (2.3.1): res que parpellegi més de tres vegades per segon; s'aplica al contingut del vídeo.
• Subtítols i audiodescripció activables (EN 301 549 (PDF, s'obre en una finestra nova) 7.1.1 i 7.2.1), amb subtítols personalitzables (7.1.4: mida, color, fons) i sincronitzats (7.1.2), i que es conservin en transmetre (7.1.3, 7.2.3).
• Contrast dels controls sobre el vídeo (1.4.11) i transcripció accessible al costat del reproductor.

Vídeo HTML5 natiu amb pistes WebVTT

L'element <video> amb controls ofereix un reproductor natiu raonablement accessible a tots els navegadors moderns, amb suport de subtítols mitjançant <track>:

<video controls preload="metadata" poster="biblioteca.jpg"
       aria-label="Presentació de la nova Biblioteca Municipal">
  <source src="biblioteca.mp4" type="video/mp4">
  <track kind="captions" src="biblioteca-es.vtt" srclang="es" label="Espanyol" default>
  <track kind="subtitles" src="biblioteca-en.vtt" srclang="en" label="English">
  <track kind="descriptions" src="biblioteca-ad.vtt" srclang="es" label="Audiodescripció">
  <track kind="chapters" src="biblioteca-cap.vtt" srclang="es" label="Capítols">
  <p>El teu navegador no reprodueix vídeo. <a href="biblioteca.mp4">Descarrega el vídeo</a>
     o llegeix la <a href="#transcripcion">transcripció</a>.</p>
</video>

<details id="transcripcion">
  <summary>Transcripció del vídeo</summary>
  <p>[Façana de maó amb grans vidrieres. Rètol: Biblioteca Municipal Río Segura.]</p>
  <p><strong>Narradora:</strong> La nova biblioteca obre les portes…</p>
</details>

Notes sobre els tipus de pista: captions (subtítols per a persones sordes: inclouen els sons rellevants i la identificació dels parlants; és el que exigeix l'1.2.2), subtitles (traducció), descriptions (audiodescripció en text; els navegadors no la llegeixen per defecte, l'aprofiten reproductors com Able Player), chapters (navegació per capítols). L'atribut default activa una pista en carregar. Un fitxer WebVTT bàsic:

WEBVTT

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

2
00:00:07.000 --> 00:00:10.200
NARRADORA: La nova biblioteca obre les portes

3
00:00:10.200 --> 00:00:13.000 line:85% align:start
el pròxim 15 de març.

Bones pràctiques de subtitulació (UNE 153010:2012): com a màxim dues línies d'uns 37 caràcters, velocitat raonable (uns 15 caràcters per segon), identificació dels parlants amb color, etiqueta o guió, efectes sonors entre parèntesis i amb majúscula inicial (al web també són habituals els claudàtors), sincronia amb la parla; com a pràctica professional habitual, entre 1 i 6 segons per subtítol. Limitacions del reproductor natiu: la personalització dels subtítols depèn del navegador o del sistema, no hi ha botó d'audiodescripció (cal servir una pista d'àudio alternativa amb audioTracks, amb un suport desigual) i els estils dels controls no es poden adaptar. Evita autoplay amb so; si fas servir un vídeo de fons decoratiu, posa-hi muted i loop, respecta prefers-reduced-motion i ofereix un botó de pausa.

Reproductors accessibles de tercers

• Able Player: de codi obert, dissenyat des de l'accessibilitat. Admet subtítols, descripcions en text amb veu sintètica i pausa (AD ampliada), pista d'àudio descrita alternativa, transcripció interactiva generada a partir de les pistes, capítols, vídeo de llengua de signes sincronitzat en finestra, controls amb teclat, personalització dels subtítols i ús amb YouTube i Vimeo com a font. És una referència habitual en administracions i universitats.
• Plyr i Video.js: lleugers i populars, amb controls accessibles amb el teclat i suport de pistes; no tenen audiodescripció nativa (Video.js l'afegeix amb connectors) ni transcripció interactiva.
• MediaElement.js: històric, amb suport de pistes i bona compatibilitat.
• Els reproductors comercials de plataformes de vídeo (Kaltura, Brightcove, JW Player, Vimeo OTT) inclouen opcions d'accessibilitat; verifica en cada cas el teclat, els noms dels botons, els subtítols personalitzables i la pista d'AD.

YouTube

YouTube és el canal més utilitzat per administracions i empreses. Claus per publicar-hi de manera accessible:

1. Subtítols: puja el teu fitxer (.srt, .vtt, .sbv) a YouTube Studio > Subtítols, o corregeix els automàtics. Els subtítols automàtics (reconeixement de veu) no compleixen per si sols l'1.2.2: no tenen puntuació, confonen noms i xifres, no identifiquen parlants ni sons. S'han de revisar i corregir, i cal indicar l'idioma del vídeo.
2. Audiodescripció: YouTube permet pistes d'àudio addicionals (multiàudio) només en canals habilitats; l'opció universal és publicar una versió amb AD com a vídeo separat, enllaçada des de la descripció i des del web.
3. Descripció i capítols: capítols mitjançant marques de temps a la descripció; enllaç a la transcripció completa al web (la transcripció automàtica de YouTube ajuda, però no substitueix la corregida).
4. Inserció (embed): l'<iframe> necessita un atribut title descriptiu («Vídeo: Presentació de la nova biblioteca»); no activis autoplay; el reproductor de YouTube és operable amb el teclat i els seus controls tenen nom, i permet personalitzar els subtítols des de l'engranatge. Comprova que la miniatura no conté text essencial sense alternativa.
5. Portada i títol del vídeo descriptius; evita text incrustat al vídeo sense llegir-lo en veu o en AD.

Vimeo

Vimeo admet la pujada de subtítols en diversos idiomes (.vtt, .srt, .dfxp…), subtítols automàtics per corregir, capítols i pistes d'audiodescripció que l'usuari activa des del reproductor (comprova en quins plans està disponible). El seu reproductor és operable amb el teclat i exposa els noms dels botons. Permet desactivar la reproducció automàtica i els vídeos relacionats, i ocultar controls innecessaris. L'<iframe> també necessita title.

Plataformes de formació i xarxes socials

Els campus virtuals (Moodle, Canvas), els gestors de vídeo universitari (Kaltura, Panopto) i les xarxes socials (LinkedIn, Instagram, TikTok) tenen capacitats desiguals: gairebé totes admeten subtítols (tancats o incrustats a la imatge), gairebé cap no admet audiodescripció. Per a les xarxes, la pràctica habitual és subtítols oberts (incrustats a la imatge) corregits a mà, descripció del vídeo al text de la publicació i enllaç a la versió completa accessible al web. Els subtítols oberts són menys flexibles (no es poden personalitzar), però garanteixen que es vegin en qualsevol client.

Resum

• El reproductor és un component interactiu: teclat, noms i estats dels botons, focus visible, control de l'àudio (1.4.2), pausa (2.2.2) i sense flaixos (2.3.1); l'EN 301 549 cap. 7 exigeix subtítols i AD activables, sincronitzats i personalitzables.
• HTML5 <video controls> amb <track> de tipus captions, subtitles, descriptions i chapters en WebVTT, més una transcripció accessible al costat.
• Able Player és la referència en accessibilitat (AD en text amb pausa, transcripció interactiva, finestra de LSE); Plyr i Video.js són correctes per al que és bàsic.
• YouTube: subtítols pujats o corregits (mai els automàtics sense revisar), versió amb AD com a vídeo a part, title a l'iframe, sense reproducció automàtica. Vimeo admet pistes d'AD (segons el pla).
• A les xarxes socials: subtítols oberts corregits, descripció al text i enllaç a la versió accessible completa.