Un’altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l’accessibilità di questo tipo di contenuti.
| Prerequisiti: | Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di cosa è l'accessibilità. |
|---|---|
| Obiettivo: | Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli. |
Fino ad ora in questo modulo sull’accessibilità abbiamo preso in considerazione le procedure necessarie per rendere accessibili una varietà di contenuti: da semplice contenuto testuale a tabelle di dati, immagini, controlli nativi come campi di formulari e bottoni, e anche strutture e intefacce più complesse (con le quali si usano gli attributi WAI-ARIA).
Questo articolo si occupa di un’altra classe di contenuti per i quali solitamente non è facile garantire una buona accessibilità: i contenuti multimediali. Immagini, video, elementi <canvas>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.
Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.
Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo HTML: una buona base per l’accessibilità: fai riferimento all’articolo per maggiori dettagli. Riassumendo in poche parole l’articolo, per garantire l’accessibilità delle immagini devi assicurarti che al contenuto visuale sia associato un testo alternativo che descriva dettagliatamente l’immagine, e che tale contenuto possa essere letto dai lettori di schermo.
Per esempio:
<img src="dinosaur.png"
alt="Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.">
Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.
Gli elementi audio e video di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, codice sorgente e versione live):
<audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>Il tuo browser non supporta l’audio in HTML5. Puoi scaricare il file per ascoltarlo. Qui trovi il <a href="viper.mp3">link al file audio.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p> </video>
L’attributo controls fornisce il bottone play/pausa, uno slider di posizionamento e altri controlli basici di un lettore multimediale generico. In Firefox e Chrome i controlli HTML5 hanno questo aspetto:
Tuttavia, ci sono alcuni problemi associati a questi controlli:
Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.
Gli elementi audio e video di HTML5 hanno in comune una API, chiamata HTML Media Element, che permette di applicare funzionalità personalizzate ai bottoni e ad altri controlli definiti dallo sviluppatore.
Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.
Per prima cosa, salva una copia dei file controlli-custom-start.html, controlli-custom-controls.css, rabbit320.mp4 e rabbit320.webm in una cartella del tuo hard-disk.
Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.
Ora diamo un’occhiata al codice HTML del lettore video:
<section class="player">
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Il tuo browser non supporta i video in HTML5. Puoi scaricare il file per visualizzarlo. Qui trovi il <a href="rabbit320.mp4"> link al file video.</p>
</video>
<div class="controls">
<button class="playpause">Play</button>
<button class="stop">Stop</button>
<button class="rwd">Rwd</button>
<button class="fwd">Fwd</button>
<div class="time">00:00</div>
</div>
</section>
Abbiamo inserito alcuni bottoni nella barra dei controlli posizionata sotto al video. Tali controlli ovviamente non funzionano di default; è necessario usare JavaScript per assegnargli una funzionalità.
Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:
var playPauseBtn = document.querySelector('.playpause');
var stopBtn = document.querySelector('.stop');
var rwdBtn = document.querySelector('.rwd');
var fwdBtn = document.querySelector('.fwd');
var timeLabel = document.querySelector('.time');
In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:
var player = document.querySelector('video');
Questa variabile fa riferimento a un oggetto HTMLMediaElement, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.
Prima di procedere ad assegnare funzionalità ai nostri bottoni rimuoviamo i controlli nativi, di modo che non si possano verificare conflitti con i nostri controlli personalizzati. Aggiungi il seguente codice, al fondo del tuo file JavaScript:
player.removeAttribute('controls');
Usando questo metodo, anziché quello di evitare di includere l’attributo controls dal principio, ha il vantaggio che, se il nostro codice JavaScript smettesse di funzionare per una qualsiasi ragione, i controlli nativi si riattiveranno automaticamente, permettendo agli utenti di continuare a usare i contenuti multimediali.
Come primo passo, attiviamo il bottone Play/pausa. Possiamo alternare gli stati di play e pausa usando una semplice funzione condizionale, come la seguente. Aggiungila al fondo del tuo codice JavaScript:
playPauseBtn.onclick = function() {
if(player.paused) {
player.play();
playPauseBtn.textContent = 'Pause';
} else {
player.pause();
playPauseBtn.textContent = 'Play';
}
};
In seguito, aggiungi questo codice, che controlla il bottone Stop:
stopBtn.onclick = function() {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
};
Non esiste una funzione stop() nativa negli elementi HTMLMediaElement, dunque al suo posto usiamo pause(), e allo stesso tempo resettiamo a zero il tempo di riproduzione currentTime.
Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:
rwdBtn.onclick = function() {
player.currentTime -= 3;
};
fwdBtn.onclick = function() {
player.currentTime += 3;
if(player.currentTime >= player.duration || player.paused) {
player.pause();
player.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
};
Questi bottoni sono controlli molto basici, non fanno altro che far avanzare o tornare indietro il video di 3 secondi ogni volta che vengono cliccati. In una applicazione reale probabilmente vorrai aggiungere uno slider di posizionamento più elaborato o qualcosa di simile.
Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione currentTime è maggiore del tempo totale duration, o se la riproduzione è in pausa. Se una delle due condizioni è vera fermiamo la riproduzione del video, per evitare che si verifichino errori nel lettore multimediale se l’utente cerca di avanzare oltre la fine del video o quando il video si trova in stato di pausa.
Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:
player.ontimeupdate = function() {
var minutes = Math.floor(player.currentTime / 60);
var seconds = Math.floor(player.currentTime - minutes * 60);
var minuteValue;
var secondValue;
if (minutes<10) {
minuteValue = "0" + minutes;
} else {
minuteValue = minutes;
}
if (seconds<10) {
secondValue = "0" + seconds;
} else {
secondValue = seconds;
}
mediaTime = minuteValue + ":" + secondValue;
timeLabel.textContent = mediaTime;
};
Ogni volta che il tempo si aggiorna (ogni secondo), questa funzione viene eseguita. A partire dal valore di currentTime, che si esprime in secondi, la funzione calcola il numero di minuti e secondi trascorsi, aggiunge uno 0 davanti al numero di minuti o secondi se tale numero è inferiore a 10, dà al risultato il formato “minuti:secondi” e infine lo invia al display timeLabel perchè sia mostrato all’utente.
Quanto spiegato finora ti dà un’idea basica di come aggiungere funzionalità personalizzate ai lettori audio/video. Per maggiori informazioni su come aggiungere funzionalità più complesse, incluso come utilizzare Flash come fallback per i browser più vecchi, vedi gli articoli (in inglese):
Abbiamo inoltre creato un esempio avanzato che mostra come si può creare un sistema orientato ad oggetti che trova ogni lettore audio o video presente in una pagina e gli aggiunge i nostri controlli personalizzati. Vedi custom-controls-oojs (qui trovi il codice sorgente).
Per rendere i contenuti audio accessibili alle persone con difficoltà auditive devi ricorrere a trascrizioni testuali. Le trascrizioni possono includersi nella stessa pagina dove l’audio viene riprodotto, o in una pagina separata collegata ad essa con un link.
Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:
NON è una buona pratica quella di pubblicare del contenuto audio e promettere di pubblicare le trascrizioni in un secondo momento. Spesso tali promesse non vengono compiute, danneggiando la fiducia che gli utenti ripongono in chi pubblica il contenuto. Nel caso in cui l’audio che si pubblica sia un dialogo o un evento come una conferenza pubblica, è accettabile pubblicare note riassuntive del contenuto insieme all’audio.
Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video Audio Transcription Sample 1 e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su Apri trascrizione.
Se stai creando una interfaccia personalizzata per presentare il tuo contenuto audio e le relative trascrizioni, tieni in considerazione l’idea di includere un pannello-trascrizioni che appare/scompare; vedi il nostro esempio audio-transcript-iu (vedi anche il codice sorgente).
Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.
In molti casi si tratterà di contenuto video, e in tal caso puoi associargli didascalie usando le tecniche descritte nella prossima sezione di questo articolo.
Tuttavia ci sono dei casi limite. Per esempio, potresti dover pubblicare una registrazione audio di una conferenza durante la quale si fa riferimento a una risorsa visuale, come una tabella o un grafico. In tali casi, dovresti fare in modo che tali risorse vengano fornite insieme all’audio e alla trascrizione, avendo cura di porre un link alle risorse nel punto della trascrizione in cui si fa riferimento ad esse. Questo procedimento sarà di aiuto a tutti gli utenti, non solo alle persone con difficoltà auditive.
Nota: una trascrizione audio sarà utile a vari tipi di utente. Oltre a permettere alle persone con difficoltà auditive di accedere al contenuto audio, sarà molto utile anche agli utenti che navigano con una connessione lenta, che probabilmente preferiscono non scaricare il contenuto audio. Pensa inoltre a un utente che si trova in un ambiente rumoroso, come un pub, e non può udire il contenuto audio correttamente.
Per rendere i contenuti video accessibili a persone con difficoltà auditive o visive, e anche ad altri gruppi di utenti, come per esempio quelli che non capiscono la lingua che si parla nel video, devi associare al contenuto video una traccia testuale.
Nota: le tracce testuali sono utili ad ogni tipo di utente, non solo a chi ha una disabilità. Per esempio, un utente potrebbe non essere in grado di udire l’audio perchè si trova in un ambiente rumoroso, come un bar affollato, o un altro potrebbe decidere di togliere l’audio a un video per non disturbare chi gli sta vicino, se si trova per esempio in una biblioteca.
Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:
Molti paesi trasmettono i film in inglese con sottotitoli nella lingua del paese, e spesso nei film in DVD si trovano disponibili tracce testuali in varie lingue. Per esempio:
Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:
Le tracce testuali da mostrarsi associate a un video in HTML5 devono essere scritte in WebVTT, un formato che contiene stringhe di testo associate a metadati come il momento del video in cui si desidera mostrare ogni stringa, e anche informazioni sullo stile e il posizionamento della stringa. Tali stringhe di testo sono chiamate “cues”.
Un file WebVTT tipico è più o meno così:
WEBVTT 1 00:00:22.230 --> 00:00:24.606 Questo è il primo sottotitolo. 2 00:00:30.739 --> 00:00:34.074 Questo è il secondo. ...
To get this displayed along with the HTML media playback, you need to:
<track> deve essere inclusa dentro l’etichetta <audio> o <video>, e posizionata dopo tutte le etichette <source>. Usa l’attributo kind per specificare se le cues sono sottotitoli (subtitles), didascalie (captions) o descrizioni (descriptions).Usa l’attributo srclang per indicare al browser in quale lingua sono scritti i sottotitoli.
Un esempio:
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
Il risultato sarà un video sottotitolato, simile a questo:
Per maggiori dettagli leggi l’articolo (in inglese) Adding captions and subtitles to HTML5 video. Puoi trovare l’esempio che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il codice sorgente). Questo esempio, tramite l’uso di JavaScript, permette agli utenti di scegliere tra differenti sottotitoli. Nota che, per attivare i sottotitoli, devi premere il bottone “CC” e selezionare una opzione tra inglese, tedesco o spagnolo.
Nota: le tracce testuali e le trascrizioni contribuiscono anche al SEO, poichè i motori di ricerca danno molta importanza al contenuto testuale. Le tracce testuali possono perfino permettere ai motori di ricerca di ridirigere l’utente a un punto specifico del video.
Le sezioni precedenti non trattano tutti i tipi di contenuto multimediale che potresti voler usare sul tuo sito o applicazione. Potresti trovarti a dover gestire giochi, animazioni, slideshow, video inseriti da fonti esterne, o altro contenuto creato usando tecnologie come:
Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:
Tuttavia, ci sono altri tipi di contenuto multimediale per i quali non è facile implementare l’accessibilità. Per esempio, se stai lavorando su un gioco immersivo in 3D o una applicazione di realtà virtuale, è realmente difficile fornire alternative testuali per tale tipo di esperienza. D’altro canto si può obiettare che le persone con vista ridotta non sono parte del target di pubblico di tali applicazioni.
Dovresti comunque assicurarti che tale tipo di applicazioni abbiano un contrasto dei colori ottimale, di modo che siano più facilmente visualizzabili a persone con vista ridotta o daltonismo. Inoltre dovresti fare tutto il possibile per renderli accessibili da tastiera. Ricorda che è necessario cercare di fare sempre tutto il possibile invece di puntare al 100% dell’accessibilità in ogni situazione, un obiettivo spesso impossibile da raggiungere.
Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.
{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}