Aprèn a implementar subtítols de vídeo accessibles segons WCAG 1.2. Guia pràctica amb eines com Amara, Rev.com i 3Play Media, formats WebVTT i SRT, i audiodescripció per complir amb l'accessibilitat web.
Per què els subtítols de vídeo són molt més que un «extra»?
Pensa en l'última vegada que vas veure un vídeo al metro, a una sala d'espera o al llit a les dues de la matinada amb la teva parella dormint al costat. Què vas fer? Activar els subtítols. Ara imagina que ets una persona sorda o amb hipoacúsia i que aquesta no és una opció de comoditat, sinó la teva única via d'accés al contingut. Aquesta és la diferència entre conveniència i dret fonamental.
Segons l'Organització Mundial de la Salut (OMS), més de 1.500 milions de persones al món viuen amb algun grau de pèrdua auditiva, i es preveu que per al 2050 aquesta xifra superi els 2.500 milions. A Catalunya, aproximadament 150.000 persones tenen discapacitat auditiva. Els subtítols no són un luxe: són una necessitat.
Personalment, crec que el major error que cometem els professionals del desenvolupament web és pensar en els subtítols com una cosa «que ja farem després». Aquest «després» no arriba mai, i mentrestant, estem excloent milions de persones.
WCAG 1.2: els criteris de conformitat per a mitjans temporitzats
Les Pautes d'Accessibilitat per al Contingut Web (WCAG), publicades pel W3C a través de la Web Accessibility Initiative (WAI), dediquen tot el criteri 1.2 als mitjans temporitzats: àudio, vídeo i multimèdia. Desglossem-ho perquè no et perdis.
Desglossament dels subcriteris SC 1.2.x
| Criteri | Nivell | Què exigeix? |
|---|---|---|
| SC 1.2.1 | A | Alternativa per a mitjans només àudio i només vídeo preenregistrats: transcripció o descripció textual |
| SC 1.2.2 | A | Subtítols (captions) per a vídeo preenregistrat amb àudio |
| SC 1.2.3 | A | Audiodescripció o alternativa textual per a vídeo preenregistrat |
| SC 1.2.4 | AA | Subtítols per a contingut en directe (live captions) |
| SC 1.2.5 | AA | Audiodescripció per a vídeo preenregistrat |
| SC 1.2.6 | AAA | Llengua de signes per a vídeo preenregistrat |
| SC 1.2.7 | AAA | Audiodescripció estesa (pausant el vídeo si cal) |
| SC 1.2.8 | AAA | Alternativa textual completa per a mitjans temporitzats preenregistrats |
| SC 1.2.9 | AAA | Alternativa per a contingut només àudio en directe |
Si el teu objectiu és complir amb el nivell AA —que és el que exigeixen la Directiva 2019/882 i la EN 301 549 a Europa—, necessites com a mínim els criteris 1.2.1 a 1.2.5. Sembla molt? Respira, que ho anirem pas a pas.
Subtítols vs. captions vs. closed captions: aclarim l'embolic
Aquí hi ha una confusió permanent que convé resoldre d'una vegada. En català usem «subtítols» per a gairebé tot, però en anglès hi ha matisos importants:
- Subtitles: traducció del diàleg a un altre idioma. No inclouen sons ambientals ni identificació del parlant.
- Captions (closed captions / CC): transcripció completa de l'àudio, incloent-hi efectes de so, música i identificació de qui parla. Pensats per a persones sordes o amb dificultats auditives.
- Open captions: estan incrustats al vídeo (no es poden desactivar).
- Closed captions: van en un fitxer separat (WebVTT, SRT) i l'usuari pot activar-los o desactivar-los.
Quan les WCAG parlen de «captions» al SC 1.2.2 i SC 1.2.4, es refereixen a closed captions: la transcripció completa de l'àudio, sincronitzada amb el vídeo.
Formats de subtítols: WebVTT, SRT i més enllà
No tots els formats de subtítols són iguals. Cadascun té els seus avantatges i el seu context d'ús.
| Format | Extensió | Avantatges principals | Ús recomanat |
|---|---|---|---|
| WebVTT | .vtt | Estàndard W3C, suporta estils CSS, posicionament, marcat de veus | HTML5 <track>, reproductors web moderns |
| SRT (SubRip) | .srt | Simple, universal, compatible amb gairebé tots els reproductors | YouTube, Vimeo, reproductors d'escriptori |
| TTML/DFXP | .ttml/.xml | Suport per a estils complexos, usat en broadcasting | Televisió, streaming professional (Netflix) |
| SSA/ASS | .ssa/.ass | Estils molt avançats, posicionament lliure | Anime, comunitats de fansubbing |
Per a la web, WebVTT és l'estàndard recomanat pel W3C i l'únic format suportat nativament per l'element <track> d'HTML5. La meva recomanació és clara: fes servir WebVTT per al teu web i exporta a SRT només si necessites compatibilitat amb plataformes externes com YouTube.
Eines professionals per crear subtítols accessibles
No cal que transcriguis tot manualment. Existeixen eines potents que combinen intel·ligència artificial amb revisió humana.
Comparativa d'eines de subtitulació
| Eina | Tipus | Precisió IA | Preu orientatiu | Ideal per a |
|---|---|---|---|---|
| Amara | Plataforma col·laborativa open source | Transcripció automàtica + edició humana | Gratuït (versió comunitat) | ONG, projectes educatius, equips col·laboratius |
| Rev.com | Servei professional | 99% amb revisió humana | Des de 1,50 USD/min (humà) | Empreses que necessiten precisió màxima |
| 3Play Media | Plataforma enterprise | 99%+ amb humans | Pressupost personalitzat | Grans corporacions, universitats |
| YouTube Auto-captions | IA integrada | 85-95% segons idioma | Gratuït | Primer esborrany, vídeos informals |
| Otter.ai | IA conversacional | 90-95% | Des de 16,99 USD/mes | Reunions, podcasts, contingut informal |
Personalment, el meu flux de treball favorit és: generar un primer esborrany amb la IA de YouTube o amb Otter.ai, exportar el fitxer SRT, importar-lo a Amara per a edició col·laborativa i després convertir-lo a WebVTT per al web. Perfecte? No. Eficient? Moltíssim.
Audiodescripció: el gran oblidat de l'accessibilitat en vídeo
Els subtítols cobreixen la part auditiva, però què passa amb la informació visual? Un gràfic que apareix a la pantalla, un gest significatiu, un canvi d'escena: tot això es perd per a una persona cega o amb baixa visió si no existeix audiodescripció.
L'audiodescripció (SC 1.2.3 i SC 1.2.5) consisteix en una pista d'àudio addicional que descriu els elements visuals rellevants durant les pauses naturals del diàleg. És com tenir un narrador que t'explica què està passant a la pantalla.
És obligatòria? Per al nivell AA, sí: el SC 1.2.5 exigeix audiodescripció per a vídeo preenregistrat. Per al nivell A, pots optar per una alternativa textual completa. Però siguem sincers: l'audiodescripció ofereix una experiència infinitament superior.
Consells pràctics per crear audiodescripció
- Planifica l'audiodescripció des de la preproducció: deixa pauses naturals al guió per inserir descripcions.
- Descriu només el rellevant: no narris cada detall, centra't en el que aporta informació essencial.
- Fes servir un to neutre i objectiu: l'audiodescripció informa, no interpreta.
- Contracta professionals o forma el teu equip: l'audiodescripció és una habilitat específica que requereix pràctica.
Implementació tècnica: l'element <track> a HTML5
Implementar subtítols al teu web és més senzill del que creus. L'element <track> dins de <video> és el teu millor aliat.
Dins de la teva etiqueta <video>, afegeixes un o diversos elements <track> amb els atributs: src (ruta al fitxer .vtt), kind (captions per a subtítols, descriptions per a audiodescripció), srclang (codi d'idioma) i label (nom que veurà l'usuari). L'atribut «default» indica quina pista s'activa per defecte.
Punts clau que no pots ignorar: assegura't que el fitxer WebVTT estigui correctament codificat en UTF-8, que els temps de sincronització siguin precisos (± 0,5 segons màxim) i que identifiquis els parlants quan hi ha més d'una persona.
Contrast de color en subtítols: la connexió amb WCAG 1.4.3 i 1.4.6
Sabies que els subtítols també han de complir amb els criteris de contrast de color? El SC 1.4.3 (nivell AA) exigeix un ràtio de contrast mínim de 4.5:1 per a text normal, i el SC 1.4.6 (nivell AAA, contrast millorat) puja aquesta exigència a 7:1.
Per a subtítols sobre vídeo, això significa: text blanc sobre fons negre semitransparent (o viceversa). Evita subtítols sense fons sobre imatges clares, perquè es tornen il·legibles. Plataformes com YouTube i Netflix ja apliquen fons foscos per defecte; tu hauries de fer el mateix al teu reproductor personalitzat.