WCAG 1.2.4: Sottotitoli (in diretta)

Cosa significa questa regola

\n

WCAG 1.2.4 (Sottotitoli — Contenuti in diretta) richiede che vengano forniti sottotitoli per tutti i contenuti audio in diretta all’interno di media sincronizzati. I media sincronizzati sono definiti come contenuti audio o video sincronizzati con un altro formato di presentazione delle informazioni o con componenti interattivi basati sul tempo, come un webcast, una diretta streaming o una trasmissione in tempo reale sul web.

\n

In termini pratici, questo significa che qualsiasi evento in diretta pubblicato su un sito web o un’applicazione web che includa audio — una conferenza stampa trasmessa su un sito di notizie, una riunione plenaria aziendale, un’audizione governativa, una lezione online in diretta o una telecronaca sportiva in streaming — deve mostrare sottotitoli in tempo reale che riflettano accuratamente ciò che viene detto mentre accade.

\n

Cosa è considerato conforme: Uno streaming in diretta soddisfa questo criterio quando sottotitoli sincronizzati, accurati e in tempo reale sono visibili all’utente durante la riproduzione. I sottotitoli devono rappresentare tutti i dialoghi e le informazioni audio non verbali rilevanti (come “[applausi]” o “[suono di allarme]”). Approcci comuni includono CART (Communication Access Realtime Translation) fornito da un professionista dei sottotitoli, sottotitoli generati tramite riconoscimento vocale automatico (ASR) da un servizio di sottotitolazione in diretta qualificato o integrazioni di terze parti come quelle offerte dalle piattaforme di streaming.

\n

Cosa è considerato non conforme: Uno streaming in diretta non soddisfa questo criterio quando non sono disponibili sottotitoli, quando i sottotitoli non sono sincronizzati con l’audio parlato, quando omettono porzioni significative del dialogo o quando l’accuratezza è talmente scarsa da compromettere gravemente la comprensione. Fornire una trascrizione a posteriori non soddisfa questo requisito — i sottotitoli devono essere disponibili in diretta, in tempo reale.

\n

Eccezioni ufficiali: WCAG definisce un’unica eccezione a questa regola: i media che sono essi stessi un’alternativa multimediale al testo, e che sono chiaramente etichettati come tali, sono esentati. Ad esempio, se pubblichi una trascrizione testuale dettagliata di un’intervista e poi fornisci anche una versione audio in diretta dello stesso contenuto, esplicitamente etichettata come alternativa audio al testo, i sottotitoli potrebbero non essere strettamente necessari. Tuttavia, questa eccezione è limitata e raramente applicabile nella pratica.

\n

Il criterio si applica a tutti i media sincronizzati pubblicati sul web — indipendentemente dal fatto che il video sia stato preprodotto o sia realmente in diretta. Il replay di un webinar preregistrato trasmesso come se fosse in diretta rientra comunque in 1.2.3 o 1.2.5, ma una vera trasmissione in tempo reale rientra pienamente in 1.2.4.

\n\n

Perché è importante

\n

Secondo l’Organizzazione Mondiale della Sanità, circa 430 milioni di persone nel mondo hanno una perdita uditiva invalidante, e si prevede che questo numero supererà i 700 milioni entro il 2050. Per le persone sorde o con ipoacusia, i sottotitoli in tempo reale non sono una comodità — sono il mezzo principale o unico per accedere ai contenuti audio in un contesto live. Senza sottotitoli, queste persone sono completamente escluse dalla partecipazione o dalla comprensione di qualsiasi evento multimediale in diretta.

\n

Oltre alla sordità e alla perdita uditiva, i sottotitoli in diretta avvantaggiano un pubblico molto più ampio. Gli utenti in ambienti rumorosi — aeroporti, uffici open space, mezzi pubblici — potrebbero non essere in grado di usare l’audio. Gli utenti che guardano in ambienti silenziosi senza cuffie, o che hanno disattivato l’audio dei loro dispositivi, si affidano ai sottotitoli per seguire il contenuto. Le persone non madrelingua spesso trovano i sottotitoli indispensabili per la comprensione, in particolare quando chi parla usa vocabolario complesso, accenti o gergo tecnico. Differenze cognitive e di elaborazione del linguaggio possono inoltre rendere i sottotitoli essenziali per una comprensione accurata.

\n

Considera uno scenario concreto: un comune in Turchia trasmette in diretta la riunione del consiglio comunale sul proprio sito ufficiale. Un residente sordo vuole seguire il dibattito sui cambiamenti di zonizzazione nel suo quartiere. Senza sottotitoli in tempo reale, quel residente è completamente escluso dalla partecipazione civica. Lo stesso vale per uno studente sordo che partecipa a una lezione online in diretta sulla piattaforma didattica di una scuola privata, o per un cliente che cerca di seguire il webinar in diretta di una banca per l’annuncio di un nuovo prodotto.

\n

Da un punto di vista pratico, l’infrastruttura per i sottotitoli in diretta produce anche una trascrizione che può essere indicizzata dai motori di ricerca, migliorando la reperibilità dei contenuti video. Le organizzazioni che investono nei sottotitoli in diretta spesso scoprono che la trascrizione risultante diventa una risorsa preziosa per la documentazione post-evento, i riepiloghi e la ricerca in archivio.

\n\n

Regole Axe-core correlate

\n

WCAG 1.2.4 richiede test manuali. Nessuna regola automatizzata di axe-core può rilevare in modo affidabile la presenza o la qualità dei sottotitoli in diretta, e questa è una distinzione importante da comprendere quando si pianifica la strategia di audit dell’accessibilità.

\n

\n
• Test manuale richiesto — presenza dei sottotitoli in diretta: Strumenti automatici come axe-core possono analizzare il DOM per verificare la presenza di un elemento <track> con kind='captions' su un elemento <video>, ma gli streaming in diretta quasi mai vengono erogati tramite un semplice elemento HTML <video> con un <track>. Di solito utilizzano formati a bitrate adattivo (HLS, DASH) erogati tramite player basati su JavaScript come Video.js, JW Player o player nativi della piattaforma. Questi player rendono i sottotitoli in modo dinamico, in modi che axe-core non può ispezionare. Uno strumento non può guardare uno streaming in diretta in tempo reale, valutare l’accuratezza dei sottotitoli, misurare il ritardo di sincronizzazione o determinare se una sovrimpressione di sottotitoli rifletta davvero il contenuto parlato o sia un segnaposto statico.
\n
• Test manuale richiesto — qualità e accuratezza dei sottotitoli: Anche se uno strumento automatico potesse rilevare l’esistenza di un flusso di sottotitoli, non avrebbe modo di valutare se i sottotitoli siano accurati, completi o sufficientemente sincronizzati. I sottotitoli prodotti tramite CART e quelli di bassa qualità generati automaticamente possono entrambi apparire come “sottotitoli presenti” per uno strumento, ma solo i primi soddisfano WCAG 1.2.4. La revisione umana durante un evento in diretta è l’unico modo affidabile per verificare la conformità.
\n
• Test manuale richiesto — accessibilità dei sottotitoli all’interno del player: Gli strumenti automatici generalmente non possono determinare se i controlli dei sottotitoli all’interno di un player multimediale personalizzato siano accessibili da tastiera, se la visualizzazione dei sottotitoli possa essere ridimensionata o personalizzata dall’utente o se lo stile dei sottotitoli soddisfi le esigenze degli utenti. Questi aspetti richiedono test pratici con la reale navigazione da tastiera e l’uso di screen reader.
\n

\n\n

Come testare

\n

\n
1. Identifica tutti i media in diretta sulla pagina: Esamina la pagina per individuare eventuali flussi video o audio in diretta. Controlla la presenza di player incorporati, iframe o componenti multimediali caricati dinamicamente. Nota se il contenuto è realmente in diretta (trasmissione in tempo reale) o preregistrato. Solo il contenuto audio realmente in diretta all’interno di media sincronizzati rientra in 1.2.4.
\n
2. Esegui una scansione automatizzata con axe DevTools o Lighthouse: Apri axe DevTools in Chrome DevTools ed esegui una scansione dell’intera pagina. Sebbene axe non possa convalidare i sottotitoli in diretta, può segnalare problemi correlati come la mancanza di aria-label sui controlli del player, pulsanti play/pausa inaccessibili o gestione del focus mancante. Annota eventuali problemi segnalati come evidenze di supporto, ma tieni presente che un report axe pulito non conferma la conformità a 1.2.4.
\n
3. Verifica manualmente la disponibilità dei sottotitoli durante un evento in diretta: Accedi allo streaming in diretta durante una trasmissione attiva. Controlla se i sottotitoli vengono visualizzati. Se il player ha un interruttore per i sottotitoli (pulsante CC), attivalo e conferma che i sottotitoli compaiono e si aggiornano quasi in tempo reale mentre la persona parla. Conferma che il ritardo dei sottotitoli sia accettabile — in genere non più di pochi secondi per CART, o leggermente di più per ASR.
\n
4. Valuta l’accuratezza dei sottotitoli: Ascolta l’audio mentre leggi i sottotitoli. Controlla se ci sono parole mancanti, errori sistematici o omissioni significative. I sottotitoli non devono essere necessariamente verbatim, ma devono trasmettere il significato completo del contenuto parlato. Nota l’identificazione dei parlanti se sono presenti più persone — i sottotitoli dovrebbero indicare chi sta parlando quando non è ovvio.
\n
5. Test con NVDA + Firefox: Raggiungi il player multimediale usando il tasto Tab. Verifica che tutti i controlli del player, incluso l’interruttore dei sottotitoli, siano raggiungibili e azionabili tramite tastiera. Conferma che NVDA annunci lo stato del pulsante dei sottotitoli (attivo/disattivo). Attiva i sottotitoli e verifica che il testo dei sottotitoli compaia in un elemento DOM che NVDA possa leggere se l’utente si sposta con Tab sul player o intorno ad esso.
\n
6. Test con VoiceOver + Safari (macOS o iOS): Usa i gesti o i comandi da tastiera di VoiceOver per navigare nel player. Verifica che l’interruttore dei sottotitoli venga annunciato e sia azionabile. Conferma che le modifiche al testo dei sottotitoli vengano esposte correttamente all’interno della regione accessibile del player.
\n
7. Test con JAWS + Chrome: Naviga tra i controlli del player usando Tab. Verifica che JAWS legga tutte le etichette dei controlli. Conferma che l’interruttore dei sottotitoli sia identificato come pulsante con un’etichetta e uno stato appropriati. Attiva i sottotitoli e verifica che la visualizzazione dei sottotitoli si aggiorni come previsto.
\n
8. Verifica la personalizzazione della visualizzazione dei sottotitoli: Controlla se il player consente agli utenti di ridimensionare il testo dei sottotitoli, cambiare i colori o regolare il contrasto. Sebbene non sia strettamente richiesto da 1.2.4, questo è un punto di valutazione di buona prassi e rilevante per i criteri WCAG 1.4.
\n

\n\n

Come correggere

\n

Streaming in diretta senza traccia di sottotitoli — Non corretto

\n

<!-- Flusso HLS in diretta incorporato senza configurazione dei sottotitoli -->\n<video id='live-player' controls autoplay>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <!-- Nessun elemento <track> e nessuna configurazione dei sottotitoli nel player -->\n</video>

\n

Streaming in diretta con traccia di sottotitoli CART integrata — Corretto

\n

<!-- Streaming in diretta che utilizza Video.js con una traccia di sottotitoli WebVTT in diretta fornita da un servizio CART.\n     L'attributo src della traccia punta a un endpoint di sottotitoli in diretta che si aggiorna in tempo reale. -->\n<video\n  id='live-player'\n  class='video-js vjs-default-skin'\n  controls\n  autoplay\n  aria-label='Streaming della conferenza in diretta con sottotitoli in tempo reale'>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <track\n    kind='captions'\n    src='https://captions.example.com/live/event.vtt'\n    srclang='tr'\n    label='Sottotitoli in turco'\n    default>\n</video>\n<script>\n  var player = videojs('live-player');\n  // Abilita i sottotitoli per impostazione predefinita per l'accessibilità\n  player.ready(function() {\n    player.textTracks()[0].mode = 'showing';\n  });\n</script>

\n

Streaming in diretta incorporato da una piattaforma con sottotitoli disabilitati nell’embed — Non corretto

\n

<!-- Embed di una diretta YouTube con sottotitoli chiusi esplicitamente disabilitati tramite cc_load_policy=0.\n     Questo rimuove la possibilità per l'utente di abilitare i sottotitoli, causando una non conformità a 1.2.4. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=0'\n  title='Streaming in diretta della riunione plenaria aziendale'\n  allowfullscreen>\n</iframe>

\n

Streaming in diretta incorporato da una piattaforma con sottotitoli abilitati — Corretto

\n

<!-- Embed di una diretta YouTube con sottotitoli chiusi abilitati per impostazione predefinita (cc_load_policy=1).\n     Viene utilizzata l'infrastruttura nativa di sottotitolazione della piattaforma, che supporta sottotitoli automatici in diretta\n     e CART revisionato da persone quando configurato nelle impostazioni di YouTube Studio.\n     La pagina host fornisce anche un link diretto allo streaming sottotitolato per gli utenti\n     che non possono interagire con l'iframe. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=1'\n  title='Streaming in diretta della riunione plenaria aziendale con sottotitoli abilitati'\n  allowfullscreen>\n</iframe>\n<p>\n  <a href='https://www.youtube.com/watch?v=LIVE_VIDEO_ID'>\n    Guarda con sottotitoli direttamente su YouTube\n  </a>\n</p>

\n

Player personalizzato con interruttore dei sottotitoli non accessibile da tastiera — Non corretto

\n

<!-- Interruttore dei sottotitoli implementato come <div> non interattivo.\n     Gli utenti da tastiera e gli utenti di screen reader non possono attivare questo controllo. -->\n<div class='player-controls'>\n  <div class='cc-button' onclick='toggleCaptions()'>CC</div>\n</div>

\n

Player personalizzato con interruttore dei sottotitoli accessibile — Corretto

\n

<!-- Interruttore dei sottotitoli implementato come <button> con un'etichetta esplicita e\n     stato ARIA pressed, in modo che gli utenti da tastiera e gli utenti di screen reader possano individuarlo\n     e utilizzarlo. Lo stato viene aggiornato dinamicamente quando i sottotitoli vengono attivati/disattivati. -->\n<div class='player-controls'>\n  <button\n    class='cc-button'\n    id='captions-toggle'\n    aria-pressed='false'\n    aria-label='Attiva o disattiva i sottotitoli'\n    onclick='toggleCaptions(this)'>\n    CC\n  </button>\n</div>\n<script>\n  function toggleCaptions(btn) {\n    var isActive = btn.getAttribute('aria-pressed') === 'true';\n    btn.setAttribute('aria-pressed', String(!isActive));\n    // logica per mostrare/nascondere la traccia dei sottotitoli\n  }\n</script>

\n\n

Errori comuni

\n

\n
• Fornire una trascrizione post-evento invece di sottotitoli in tempo reale: Pubblicare una trascrizione testuale di un evento in diretta dopo la sua conclusione non soddisfa 1.2.4. I sottotitoli devono essere disponibili contemporaneamente all’audio in diretta, consentendo alle persone sorde di seguire il contenuto in tempo reale insieme alle persone udenti vedenti.

(Contenuto troncato a causa del limite di token — riprova a caricare questo articolo.)