Confronto tra browser sull’accessibilità dei video in HTML5

Traduzione in italiano di “Comparison of Browsers on HTML5 Video Accessibility” di Terrill Thompson.

Il supporto dei browser per i video in HTML5 è in continua evoluzione, includendo anche supporto per le funzioni di accessibilità. Considerate quindi questo articolo una fotografia dello stato attuale del supporto di accessibilità al 14 giugno 2013, in quanto il supporto e le caratteristiche di accessibilità potrebbero già cambiare il giorno successivo.

Innanzi tutto, ecco il codice che si può utilizzare per aggiungere video tramite HTML5 in una pagina web con le didascalie, sottotitoli e audio descrizione testuale.


<video controls width="640" height="480" aria-label="Video Player"
poster="screenshot.jpg">
<source src="video.mp4">
<source src="video.webm">
<track kind="captions" src="captions.vtt" default label="English">
<track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="French">
<track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
<track kind="description" src="description.vtt" srclang="en" label="English Description">
</video>


Alcune spiegazioni:

• L’attributo controls visualizza i controlli del player multimediali predefiniti dal browser. Questo attributo è opzionale, in quanto alcuni sviluppatori possono voler creare i propri controlli.
• Sono presenti due elementi <source>, in quanto non tutti i browser supportano gli stessi formati video. Stanno migliorando, ma per ora WebM è un ripiego affidabile per i browser che non supportano H.264 (MP4).
• L’elemento <track> viene utilizzato per sincronizzare del testo temporizzato con il video. Ci sono diversi tipi di elementi di traccia, come indicato dall’attributo kind (io sono più interessato a didascalie, sottotitoli e descrizione).
• L’audiodescrizione non è supportata da tutti i browser, ma il riferimento è nella specifica HTML5 come possibile supporto futuro.
• L’attributo default è (secondo le specifiche) opzionale, ma se incluso ha lo scopo di abilitare la traccia predefinita, ad esempio, per fornire il video con i sottotitoli inglesi già attivati. I miei test dimostrano che l’attributo default è effettivamente necessario, altrimenti i sottotitoli non funzionano affatto in Chrome, Safari o Opera.

Inoltre, l’elemento <video> viene attivato mediante tastiera in tutti i browser, ma in alcuni browser l’indicatore di focus del video è molto inadeguato (una linea tratteggiata sottile) ed è praticamente impossibile dire quando il player ha il focus. Per questo motivo mi piace aggiungere un indicatore di attivazione visivo utilizzando i CSS, qualcosa di simile a questo:


video:focus {
border: thick solid yellow;
}


Le osservazioni di seguito descritte sono stati realizzate con variazioni su questo esempio di pagina video HTML5, che rappresenta il video di AccessComputing “Accessibilità IT: cosa hanno da dire i leader del Campus“.

Internet Explorer 10

IE è il più avanti di tutti sull’accessibilità dei video in HTML5. Ho testato specificamente 10.0.9200.16618 IE in Windows 7.

Gli utenti possono spostarsi per tutti i controlli all’interno della barra di controllo del lettore video, tra cui il pulsante a schermo intero. I controlli continuano ad essere accessibili da tastiera anche in modalità a schermo intero. I controlli sono relativamente grandi e in bianco su nero, che li rende facili da vedere. Quando il pulsante di disattivazione audio riceve il focus, appare uno slider verticale per il volume e il focus della tastiera viene trasferito al nuovo controllo volume, che può essere azionato con i tasti freccia su / giù.

Tutti i controlli del player video hanno nomi intuitivi (ad esempio, Riproduci, Vai avanti, Schermo intero) e descrizioni altamente informative (ad esempio, andare avanti di 30 secondi), che sono tutte esposte tramite MSAA. Ho provato con JAWS 14, che annuncia tutte queste informazioni e annuncia anche tasti di scelta rapida (ad esempio, la barra spaziatrice per passare tra Riproduci e pausa, shift + tasto freccia sinistra / destra per saltare indietro o avanti, ALT + INVIO per la modalità a schermo intero).

NVDA non annuncia nessuna di queste informazioni, ma questo è un difetto NVDA, non un difetto di IE, in quanto le informazioni sono tutte esposte tramite MSAA.

IE supporta sottotitoli, sia in formato WebVTT che in formato TTML. Gestisce correttamente l’attributo default, quindi la traccia con sottotitoli è avviata automaticamente. Se ci sono tracce di sottotitolazione,  sono gestite assieme ai sottotitoli (caption) e sono disponibili come scelte che possono essere selezionate tramite il pulsante CC.

Il mio unico problema con IE è che i sottotitoli vengono visualizzati come testo ombreggiato, non come testo su sfondo nero traslucido. Conseguentemente il testo è difficile da leggere a meno che il terzo inferiore del video stesso non abbia un fondo scuro. Per quanto ho potuto cercare questo non è configurabile dall’utente.

IE è l’unico browser che ha un controllo per la velocità di riproduzione, disponibile dal menu contestuale facendo clic destro sul video. Ciò consente agli utenti di visualizzare il video a una gamma di velocità da 0,125 x (ultra lento) fino a 8.000X (ultra veloce). Rallentare il video è ottimo per le persone con disabilità cognitive e per i chitarristi che vogliono rallentare e studiare quel particolare riff di chitarra, e l’accelerazione video è ottima per le persone che hanno fretta.

Firefox 21.0 (Windows e Mac)

Firefox non supporta correttamente caption o sottotitoli.

In altri casi, è un player abbastanza accessibile. Gli utenti non possono muoversi per i vari controlli del lettore come possono invece in IE, ma tutti i controlli, tranne uno, sono accessibili tramite combinazioni di tasti. Questi sono abbastanza intuitivi e sono documentati nell’elenco ufficiale di Mozilla dei tasti di scelta rapida per i video in Firefox. Il singolo pulsante che non è accessibile da tastiera è il pulsante Schermo intero.

Per gli utenti di screen reader, tutti i pulsanti sono etichettati (ad esempio, Avvia, Pausa, Muto, Schermo intero), ma non hanno le descrizioni dettagliate che ha invece IE. Sia JAWS che NVDA annunciano queste etichette. Tuttavia, JAWS ha una stranezza in cui annuncia la percentuale di progresso con un po’ più di precisione rispetto a quanto necessitano la maggior parte delle persone  (arrotonda al decimale più vicino al quindicesimo posto). Non sono sicuro di chi sia la colpa di questo comportamento – NVDA non lo fa in Firefox, ma JAWS non lo fa in IE.

Va fatto anche presente che i controlli del player di Firefox grigio su grigio hanno il peggior contrasto di tutti i browser.

Chrome 27.0 (Windows e Mac)

In Chrome, il player video non può essere controllato tramite tastiera. Questo è n bug conosciuto di Chrome.

Il lettore video in Chrome è “mezzo accessibile” agli utenti di screen reader. Con l’estensione ChromeVox installato e abilitato, ChromeVox annuncia quando il video ha il focus, a quel punto posso eseguirlo con il tasto Invio (ho provato con ChromeVox 1.27). Si noti che premendo Invio funziona solo con ChromeVox abilitato. Altrimenti, ancora una volta nessuna accessibilità da tastiera. Anche se posso riprodurre il video con ChromeVox, non riesco ad utilizzare il video per accedere ai singoli controlli. L’esperienza con Jaws 14 è effettivamente migliore – tutti i comandi sono accessibili e etichettati intuitivamente. Descrivo questo browser come  “mezzo accessibile” perché i controlli scompaiono dopo pochi secondi, e quando ciò accade scompaiono anche per gli utenti di lettori di schermo, e non sono stato in grado di ripristinare il focus ai controlli del video in modo da poter mettere in pausa o fare altre azioni.

Anche per le didascalie, il supporto fa un po’ di confusione. Chrome supporta i sottotitoli WebVTT, ma ha molti bug.

Se una traccia sottotitoli è disponibile, viene aggiunto un pulsante di CC al player. Tuttavia, questo pulsante non fa nulla a meno che una delle tracce includa l’attributo “default” (anche se c’è solo una traccia).

Se stai cercando di riprodurre un video con sottotitoli con file locali (non sul server Web),  i sottotitoli non funzioneranno. Chrome è l’unico browser con questo problema, quindi sono abbastanza sicuro che sia un bug piuttosto che una caratteristica di sicurezza. Il video in locale viene riprodotto mentre solo le didascalie non vengono riprodotte. In modo confusionale, se l’elemento track dei sottotitoli punta ad un file in locale e include l’attributo “default”, il lettore non visualizza il pulsante CC; ma se l’attributo “default” non è presente, il pulsante CC appare ma non opera nessuna funzionalità se selezionato.

Tutti questi comportamenti sono i medesimi se l’attributo kind è così valorizzato kind=”subtitles”.

Inoltre, l’esecuzione dei sottotitoli sembra avere qualche bug in Chrome. I sottotitoli occasionalmente si interrompono o spariscono del tutto, o si riversano volenti o nolenti sullo schermo nella schermata successiva.

Ho scoperto questo problema, mentre mostravo il video dei Campus Leader video durante la presentazione a Accessing Higher Ground. Devi amare sorprese come queste!

Secondo il  validatore WebVTT,  il file di sottotitoli di per sé è soddisfacente e in più lo stesso file funziona bene in IE (e altri browser, se l’attributo “default” è presente).

Safari 6 (Solo Mac)

Safari 6 è integrato in Mac OS X Mountain Lion, ed è disponibile per Lion in un aggiornamento software. Le versioni precedenti di Mac OS X, e tutte le versioni di Windows, sono bloccate con Safari 5 che non supporta le didascalie e non funziona i lettori di schermo di di Windows. Io non ho quindi nemmeno testato Safari 5.

Safari 6 è come Chrome sotto molti aspetti. Supporta i sottotitoli WebVTT se l’attributo “default” è presente, altrimenti non lo fa. Non vi è alcun pulsante CC per attivare o disattivare le didascalie. Il player non può essere controllato totalmente con tastiera.

Differentemente da Chrome, Safari supporta i sottotitoli su file locali.

Trovo anche interessante il fatto che il primo pulsante sulla barra di controllo Safari è il bottone “Vai indietro di 30 secondi”, non il pulsante Riproduci / Pausa. Questo non è necessariamente una cattiva scelta, ma non proprio una che avrei personalmente fatto. Inoltre non c’è il tasto “Vai avanti di 30 secondi.” Anche in questo caso, non è male, solo interessante.

Opera 12.15 (Windows e Mac)

Opera ha sempre avuto un buon supporto per gli utenti tramite tastiera, e l’elemento video non fa eccezione. Gli utenti possono muoversi tra tutti i controlli del lettore, così come avviene con IE. Quando un controllo è attivo può essere azionato con i soliti tasti (Invio o spazio per passare da riproduci a pausa, le frecce sinistra / destra per scorrere avanti e indietro, su / giù per regolare il volume).

Sfortunatamente Opera non è accessibile agli utenti con lettori di schermo.

Opera supporta i sottotitoli in formato WebVTT. Tuttavia, come Chrome e Safari, Opera visualizza solo i sottotitoli se la traccia voce comprende l’attributo “default”. In caso contrario, i sottotitoli non sono visualizzati, e non c’è nessun pulsante CC per attivare il tutto.

Sommario

E’ bello vedere che l’accessibilità dei video è supportata a qualche livello da ciascuno di questi browser, ma è chiaro che c’è spazio per migliorare. Ciò che mi fa pensare è che ci sia ancora una necessità impellente di lettori multimediali cross-browser personalizzati sviluppati per utilizzare il supporto API di HTML5. Restate sintonizzati per maggiori informazioni su questo…