El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Contingut de Vídeo i Àudio Accessible

Següent ►
►

El cor de Cursalia és el reproductor de vídeo-lliçó: cada curs són hores de vídeo amb veu en off, captures de pantalla i demostracions. Un vídeo és, per naturalesa, una barrera doble: el Diego (sord/hipoacúsia) no sent la narració, i la Marta (cega) no veu el que es mostra a la pantalla. El Hugo, amb dislèxia i TDAH, necessita poder llegir i controlar el ritme. Fer accessible el multimèdia significa oferir el mateix contingut per diversos canals sensorials alhora. En aquesta lliçó implementem els criteris de la família 1.2.x de WCAG sobre el reproductor de Cursalia: distingirem els diferents tipus d'alternativa, veurem l'element <track> i el format WebVTT, i construirem controls operables per teclat (enllaçant amb 05-02).

Contingut

  1. Els quatre tipus d'alternativa multimèdia
  2. Què exigeix cada nivell WCAG (A i AA)
  3. L'element <track> i el format WebVTT
  4. Un reproductor accessible: controls reals i teclat
  5. No autoplay amb so i evitar destells
  6. Reproductors incrustats de tercers
  7. Errors comuns, exercicis i conclusió

  1. Els quatre tipus d'alternativa multimèdia

És fàcil confondre'ls, però cadascun resol una barrera diferent. Aquesta taula és la referència mental:

Alternativa Què és A qui beneficia sobretot
Subtítols (subtitles) Traducció del diàleg parlat a un altre idioma (assumeixen que sents l'àudio) Persones que no dominen l'idioma original
Subtítols per a sords (captions) Text sincronitzat del diàleg + sons rellevants (música, "[aplaudiments]", qui parla) Diego i qualsevol persona sorda o en entorn silenciós
Transcripció Text complet del contingut, no sincronitzat, llegible de cap a peu Hugo (segueix el seu ritme, rellegeix), Marta (amb lector de pantalla), SEO
Audiodescripció Narració de la informació visual (el que es veu però no es diu) en les pauses del diàleg Marta i persones cegues
Llengua de signes Intèrpret de signes superposat o en finestra Persones sordes la primera llengua de les quals és la llengua de signes

La distinció subtitles vs captions és la que més es confon: els subtitles assumeixen que sents (només tradueixen el diàleg); els captions assumeixen que no sents, i inclouen sons com "[música tensa]" o "[l'app emet un xiulet]". Per al Diego, els captions són imprescindibles; uns subtitles no li basten perquè es perd els sons que aporten informació.

  1. Què exigeix cada nivell WCAG (A i AA)

Els criteris de la Guia 1.2 escalen segons el nivell de conformitat al qual aspiris:

Criteri Nivell Exigeix
1.2.1 Només àudio / només vídeo (pregravat) A Alternativa textual per a àudio sol (transcripció); descripció per a vídeo sol
1.2.2 Subtítols (pregravat) A Captions per a tot vídeo amb àudio
1.2.3 Audiodescripció o alternativa (pregravat) A Audiodescripció o una transcripció completa que inclogui el visual
1.2.4 Subtítols (en directe) AA Captions en emissions en viu
1.2.5 Audiodescripció (pregravat) AA Audiodescripció pròpiament dita

A la pràctica, per a les vídeo-lliçons pregravades de Cursalia i un objectiu realista de nivell AA, el mínim és: captions (1.2.2), audiodescripció (1.2.5) i, com a reforç que a més cobreix 1.2.3 de sobres, una transcripció completa. La transcripció és l'alternativa de millor relació cost/benefici: barata de produir, beneficia molts perfils i millora el SEO.

  1. L'element <track> i el format WebVTT

L'HTML natiu ofereix l'element <track> per associar pistes de text temporitzades a un <video>. El seu atribut kind defineix el tipus:

<video controls>
  <source src="llico-01.mp4" type="video/mp4">

  <!-- Captions: diàleg + sons, en l'idioma del vídeo -->
  <track kind="captions" src="llico-01-ca.vtt" srclang="ca" label="Català (subtítols)" default>

  <!-- Subtitles: traducció del diàleg a un altre idioma -->
  <track kind="subtitles" src="llico-01-en.vtt" srclang="en" label="English">

  <!-- Descriptions: audiodescripció textual (la llegeix la TA) -->
  <track kind="descriptions" src="llico-01-desc.vtt" srclang="ca" label="Audiodescripció">
</video>

Punts clau:

  • kind="captions" per al Diego, kind="subtitles" per a traducció, kind="descriptions" per a la informació visual.
  • L'atribut default marca la pista que s'activa sense que l'usuari faci res.
  • label és el text que veurà l'usuari al menú de pistes: fes-lo descriptiu.

El format de les pistes és WebVTT (.vtt), un fitxer de text pla senzill: la capçalera WEBVTT, i blocs amb marca de temps inici --> fi i el text:

WEBVTT

00:00:00.000 --> 00:00:03.500
Benvingut a la lliçó d'accessibilitat web.

00:00:03.500 --> 00:00:06.000
[música suau d'introducció]

00:00:06.000 --> 00:00:10.200
Marta: avui veurem com construir un reproductor accessible.

Fixa't en el bloc [música suau d'introducció]: això és el que converteix uns subtitles en captions. S'anota entre claudàtors el so no verbal rellevant i, quan hi ha diversos interlocutors, s'indica qui parla.

  1. Un reproductor accessible: controls reals i teclat

Si fas servir <video controls>, el navegador et dona controls natius que ja són força accessibles. Però a Cursalia el reproductor és personalitzat (marca pròpia, velocitat, notes). Tan bon punt substitueixes els controls natius, tu et fas responsable de la seva accessibilitat. Regles:

<!-- MALAMENT: controls falsos, no operables per teclat ni amb nom -->
<div class="play" onclick="play()">▶</div>

<!-- BÉ: botó real, amb nom accessible, operable per teclat -->
<button type="button" id="play" aria-label="Reprodueix">
  <svg aria-hidden="true" focusable="false"><!-- icona ▶ --></svg>
</button>
  • Controls com a botons reals. Cada control (play/pausa, silenci, pantalla completa) és un <button>, no un <div>. Així és focusable i operable amb Enter/Espai sense JavaScript extra (vegeu 05-02).
  • Nom accessible. La icona ▶ no diu res a la Marta. Afegeix aria-label (o text amagat) i marca el <svg> decoratiu amb aria-hidden="true" (ho veurem a fons a 05-04).
  • Estat dinàmic. El botó play/pausa canvia de funció; reflecteix-ho actualitzant el seu nom: quan es reprodueix, aria-label="Pausa"; en pausar, aria-label="Reprodueix".
  • Focus visible. Els controls han de mostrar el focus (:focus-visible, Mòdul 4) perquè la Lucía sàpiga quin activarà.
const video = document.querySelector('video');
const btnPlay = document.getElementById('play');

btnPlay.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    btnPlay.setAttribute('aria-label', 'Pausa'); // sincronitza nom i estat
  } else {
    video.pause();
    btnPlay.setAttribute('aria-label', 'Reprodueix');
  }
});

A més, ofereix la transcripció com a text a la pàgina, sota el reproductor o en un panell plegable (patró disclosure de 05-01). Al Hugo li permet llegir al seu ritme i a la Marta consultar-la amb NVDA sense dependre de la reproducció.

  1. No autoplay amb so i evitar destells

Dos criteris que afecten directament el reproductor:

  • 1.4.2 (Control de l'àudio). Si un àudio es reprodueix automàticament durant més de 3 segons, ha d'haver-hi un mecanisme per pausar-lo o silenciar-lo. La regla pràctica i respectuosa: no facis autoplay amb so. L'àudio inesperat tapa la veu sintètica de NVDA (la Marta no pot ni sentir el seu lector) i sobresalta qualsevol. Si autoreprodueixes un vídeo, que sigui silenciat per defecte.
<!-- Acceptable: autoplay NOMÉS si va silenciat -->
<video autoplay muted playsinline>…</video>
<!-- Evita: <video autoplay> amb so -->
  • 2.3.1 (Llindar de tres destells). El contingut no ha de destellar més de tres vegades per segon, per no provocar crisis a persones amb epilèpsia fotosensible. Revisa que cap vídeo-lliçó contingui seqüències amb parpelleigs ràpids o estroboscòpics; si el material original els té, edita'ls.

  1. Reproductors incrustats de tercers

Moltes plataformes incrusten vídeo de YouTube o Vimeo via <iframe> en lloc de servir-lo elles. Això té avantatges (amplada de banda, transcodificació) però també limitacions d'accessibilitat que has de conèixer:

  • Heretes la seva interfície. L'accessibilitat de teclat i de lector de pantalla depèn del reproductor de tercers, no de tu. Els de YouTube i Vimeo són raonables, però no controles els seus canvis.
  • Els captions depenen de la plataforma. Pots pujar el teu .vtt, però la qualitat dels subtítols automàtics és baixa: no hi confiïs per a conformitat. Revisa i corregeix sempre les pistes.
  • Dona nom a l'iframe. Un <iframe> sense títol és un forat negre per a la Marta. Afegeix sempre title:
<!-- El title descriu QUÈ conté l'iframe -->
<iframe src="https://www.youtube.com/embed/…"
        title="Vídeo-lliçó: introducció a l'accessibilitat"
        allowfullscreen></iframe>
  • Audiodescripció limitada. Els reproductors incrustats rarament admeten pistes d'audiodescripció; sol resoldre's amb una versió alternativa del vídeo o amb la transcripció ampliada amb el visual.

Conclusió pràctica: incrustar tercers és vàlid, però continues sent responsable que hi hagi captions correctes, un title a l'iframe i una transcripció pròpia.

Errors Comuns i Consells

  • Confondre subtitles amb captions. Publicar només subtitles (diàleg) creient que compleixes 1.2.2. El Diego necessita captions amb els sons.
  • Fiar-te dels subtítols automàtics. La transcripció automàtica de YouTube té errors; per a conformitat cal revisar-la i corregir-la.
  • Controls <div> amb onclick. No operables per teclat ni anunciats. Fes servir <button> amb nom accessible.
  • Icones sense nom. Un botó que només conté un ▶ no diu res a NVDA. Afegeix aria-label i amaga la icona amb aria-hidden.
  • Autoplay amb so. Tapa el lector de pantalla i molesta tothom. Silenciat o res.
  • Consell: produeix sempre la transcripció. És l'alternativa més barata, ajuda el Diego, la Marta i el Hugo alhora, compleix 1.2.3 i de propina millora el posicionament.

Exercicis

Exercici 1. Un company diu: "ja he posat subtítols, el vídeo compleix per a persones sordes". Ha fet servir kind="subtitles" amb només el diàleg. És correcte? Què canviaries?

Exercici 2. Escriu un fragment WebVTT de tres blocs per a l'inici d'una lliçó on sona una melodia, parla la instructora i sona una notificació de l'app. Anota els sons com correspon.

Exercici 3. Tens aquest control de play. Enumera tots els problemes d'accessibilitat i reescriu-lo.

<div class="btn-play" onclick="reproduir()">▶</div>

Solucions

Solució 1. No és correcte. kind="subtitles" amb només el diàleg són subtitles, no captions. Per a persones sordes es necessita kind="captions" que inclogui, a més del diàleg, els sons rellevants ("[música]", "[xiulet de l'app]") i identifiqui qui parla. El Diego es perdria tota la informació sonora no verbal amb uns simples subtitles.

Solució 2.

WEBVTT

00:00:00.000 --> 00:00:02.500
[melodia d'introducció]

00:00:02.500 --> 00:00:07.000
Instructora: comencem configurant el reproductor.

00:00:07.000 --> 00:00:08.200
[l'aplicació emet una notificació]

Els sons no verbals van entre claudàtors i l'interlocutor s'anomena abans del diàleg: això els converteix en captions vàlids per al Diego.

Solució 3. Problemes: (1) és un <div>, no focusable ni operable per teclat, la Lucía no el pot activar; (2) onclick sense gestió d'Enter/Espai; (3) el ▶ no té nom accessible, la Marta no sap què és; (4) no hi ha estat (no canvia a "pausa"). Reescriptura:

<button type="button" class="btn-play" id="play" aria-label="Reprodueix">
  <span aria-hidden="true">▶</span>
</button>

Amb un <button> és focusable i operable amb teclat de franc; l'aria-label li dona nom; el ▶ s'amaga a la TA amb aria-hidden. En JS s'actualitza aria-label a "Pausa" en reproduir.

Conclusió

Hem fet accessible el reproductor de Cursalia: distingim subtitles, captions, transcripció, audiodescripció i llengua de signes; sabem què exigeix cada nivell WCAG, com associar pistes amb <track> i WebVTT, com construir controls operables per teclat amb nom accessible, i les regles de l'autoplay i els destells. Ens queda un últim tipus de contingut no textual omnipresent a la plataforma: les imatges. Miniatures de curs, el logotip, icones de categoria, el gràfic de progrés… totes necessiten una alternativa textual. A la següent i última lliçó del mòdul, 05-04: Proporcionar Alternatives de Text per a Imatges, tancarem el criteri 1.1.1 amb un arbre de decisió complet.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2026. Tots els drets reservats