Accessibilità dei contenuti multimediali

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Questo articolo fornisce informazioni sul formato WebVTT (Web Video Text Track), che viene utilizzato per descrivere i dati di testo sincronizzati, ad esempio i sottotitoli per rendere i video più accessibili al pubblico.

L'accessibilità non è come la ciliegina su una torta. Non è nulla che metti su una con la speranza di introdurre il prodotto in un secondo momento. Sottotitoli codificati e screen reader le descrizioni sono l'unico modo in cui molti utenti possono fruire dei tuoi video e, in alcuni giurisdizioni, sono persino richiesti dalla legge o dai regolamenti.

Aggiungi <track> tag

Per aggiungere sottotitoli codificati o descrizioni dello screen reader a un video sul web, aggiungi una <track>. all'interno di un tag <video>. Oltre ai sottotitoli e allo screen reader descrizioni, <track> tag possono essere utilizzati anche per i sottotitoli e i titoli dei capitoli. Il tag <track> può anche aiutare i motori di ricerca a comprendere i contenuti di un video. Tuttavia, queste funzionalità non rientrano nell'ambito di questo articolo.

Screenshot che mostra i sottotitoli visualizzati utilizzando l&#39;elemento Traccia in Chrome su Android
Screenshot che mostra le didascalie visualizzate utilizzando il monitorare elemento in Chrome su Android

Il tag <track> è simile all'elemento <source> in quanto entrambi hanno un valore src che rimanda a contenuti di riferimento. Per un tag <track>, rimanda a un File WebVTT. L'attributo label specifica come sarà una determinata traccia. identificati nell'interfaccia.

Per fornire tracce in più lingue, aggiungi un tag <track> separato per ogni traccia Il file WebVTT che stai fornendo e indica la lingua utilizzando l'srclang .

Di seguito è riportato un esempio di tag <video> con due tag <track>. C'è anche un esempio che puoi visualizzare su Glitch (fonte).

Aggiungi un elemento <track> come elemento secondario dell'elemento <video>:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
  <track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
  <p>This browser does not support the video element.</p>
</video>

Struttura del file WebVTT

Di seguito è riportato un file WebVTT ipotetico per la demo collegata sopra. Il file è un un file di testo contenente una serie di indicazioni. Ogni segnale è un blocco di testo da visualizzare sullo schermo e l'intervallo di tempo durante il quale verrà visualizzata.

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Ogni elemento all'interno del file di traccia è chiamato cue. Ogni segnale ha un'ora di inizio ora di fine separate da una freccia, con il testo del suggerimento nella riga sottostante. I consigli possono facoltativamente hanno anche ID come railroad e manuscript nell'esempio riportato di seguito. I segnali sono separati da una linea vuota.

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

I tempi d'azione sono nel formato hours:minutes:seconds.milliseconds. L'analisi è rigorosa. In altre parole, i numeri devono essere riempiti da zero se necessario: ore, minuti e secondi deve avere due cifre (00 se il valore è zero) e i millisecondi devono avere tre cifre (000 per un valore zero). C'è un ottimo strumento di convalida WebVTT su Strumento di convalida di WebVTT dal vivo, che controlla la presenza di errori di formattazione dell'ora e come i tempi non sequenziali.

Puoi creare un file VTT a mano, pensando che ci siano molti servizi che a crearle per te.

Come puoi vedere negli esempi precedenti, il formato WebVTT è piuttosto semplice. Devi solo aggiungere i dati di testo insieme alle tempistiche.

Se però vuoi che i sottotitoli vengano visualizzati in una posizione diversa allineamento a destra o a sinistra? Magari per allineare i sottotitoli codificati a quelli dell'oratore o di non intralciare il testo ripreso dalla fotocamera. WebVTT definisce le impostazioni per farlo, e altro ancora, direttamente all'interno .vtt. Prendi nota di come viene definito il posizionamento dei sottotitoli codificati aggiungendo dopo le definizioni dell'intervallo di tempo.

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

Un'altra utile funzionalità è la possibilità di applicare stili ai segnali tramite CSS. Magari vuoi per utilizzare un gradiente lineare di grigio come sfondo, con il colore di primo piano papayawhip per tutte le didascalie e per tutto il testo in grassetto di colore peachpuff.

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

Se vuoi saperne di più sullo stile e sul tagging dei singoli la specifica WebVTT è una buona fonte per esempi avanzati.

Tipi di tracce di testo

Hai notato l'attributo kind dell'elemento <track>? È abituato a indicano la relazione tra la traccia di testo specifica e il video. La i possibili valori dell'attributo kind sono:

  • captions: per i sottotitoli codificati delle trascrizioni ed eventualmente delle traduzioni di qualsiasi tipo di audio. Adatti a persone con disabilità uditiva e nei casi in cui il video sia senza audio.
  • subtitles: per i sottotitoli, ovvero le traduzioni di testi e discorsi in un lingua diversa da quella principale del video.
  • descriptions: per le descrizioni delle parti visive dei contenuti video. Adatti a persone con disabilità visiva.
  • chapters: destinata a essere visualizzata quando l'utente naviga all'interno della video.
  • metadata: non visibile e potrebbe essere utilizzata dagli script.

Ora che hai compreso le basi per rendere un video disponibile e accessibile sulla tua pagina web, potresti chiederti casi d'uso più complessi. Il prossimo passo conoscere i framework multimediali e scoprire come possono aiutarti ad aggiungere video sulla tua pagina web, fornendo al contempo funzionalità avanzate.