diff options
Diffstat (limited to 'files/it/learn/accessibilità/multimedia/index.html')
| -rw-r--r-- | files/it/learn/accessibilità/multimedia/index.html | 392 |
1 files changed, 392 insertions, 0 deletions
diff --git a/files/it/learn/accessibilità/multimedia/index.html b/files/it/learn/accessibilità/multimedia/index.html new file mode 100644 index 0000000000..f920e59050 --- /dev/null +++ b/files/it/learn/accessibilità/multimedia/index.html @@ -0,0 +1,392 @@ +--- +title: Accessibilità multimediale +slug: Learn/Accessibilità/Multimedia +tags: + - Accessibilità + - Articolo + - Audio + - Didascalie + - HTML + - Immagine + - JavaScript + - Multimedia + - Principiante + - Sottotitoli + - Tracce testuali + - Video +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td> + </tr> + <tr> + <th scope="row"><strong>Obiettivo</strong>:</th> + <td>Comprendere i problemi di accessibilità relativi agli elementi multimediali, e come risolverli.</td> + </tr> + </tbody> +</table> + +<h2 id="Multimedia_e_accessibilità"><strong>Multimedia e accessibilità</strong></h2> + +<p>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 <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a></u>).</p> + +<p>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 <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/canvas" title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><canvas></a>, filmati Flash ecc. non sono facili da interpretare per i lettori di schermo, né da navigare tramite tastiera.</p> + +<p>Ma non ti preoccupare, in questo articolo ti mostreremo le tecniche disponibili per rendere il contenuto multimediale accessibile.</p> + +<h2 id="Immagini"><strong>Immagini </strong></h2> + +<p>Abbiamo già discusso delle alternative testuali per le immagini in HTML nell’articolo <u><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l’accessibilità</a></u>: 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.</p> + +<p>Per esempio:</p> + +<pre class="brush: html"><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."> +</pre> + +<h2 id="Controlli_audio_e_video_accessibili"><strong>Controlli audio e video accessibili</strong></h2> + +<p>Implementare controlli di riproduzione per elementi audio e video non dovrebbe essere un problema no? Diamo un’occhiata.</p> + +<h3 id="Il_problema_con_i_controlli_nativi_in_HTML5">Il problema con i controlli nativi in HTML5</h3> + +<p>Gli elementi <code>audio</code> e <code>video</code> di HTML5 hanno un set di controlli nativi che permettono di gestire la riproduzione dei contenuti multimediali. Per esempio (vedi native-controls.html, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">codice sorgente</a></u> e <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">versione live</a></u>):</p> + +<pre class="brush: html"><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></pre> + +<p>L’attributo <code>controls</code> 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:</p> + +<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> + +<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p>Tuttavia, ci sono alcuni problemi associati a questi controlli:</p> + +<ul> + <li>Non sono accessibili da tastiera in nessun browser eccetto Opera</li> + <li>Ogni browser applica ai controllli uno stile e funzionalità differenti, che non sono facilmente modificabili per adattarsi allo stile particolare di un sito o applicazione.</li> +</ul> + +<p>Per porre rimedio a queste limitazioni, possiamo creare i nostri propri controlli personalizzati. Vediamo come fare.</p> + +<h3 id="Creare_controlli_audio_e_video_personalizzati">Creare controlli audio e video personalizzati</h3> + +<p>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.</p> + +<p>Aggiungiamo ora controlli personalizzati al video di esempio qui sopra.</p> + +<h4 id="Setup_basico"><strong>Setup basico</strong></h4> + +<p> </p> + +<p>Per prima cosa, salva una copia dei file <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">controlli-custom-start.html</a></u>, <u><a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">controlli-custom-controls.css</a></u>, <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a></u> e <u><a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a></u> in una cartella del tuo hard-disk.</p> + +<p>Crea un nuovo file chiamato main.js e salvalo nella stessa cartella.</p> + +<p>Ora diamo un’occhiata al codice HTML del lettore video:</p> + +<pre class="brush: html"><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></pre> + +<h4 id="Setup_basico_di_JavaScript"><strong>Setup basico di JavaScript</strong></h4> + +<p> </p> + +<p>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à.</p> + +<p>Innanzitutto dobbiamo creare variabli di riferimento per ognuno dei controlli. Aggiungi il seguente codice al tuo file JavaScript:</p> + +<p> </p> + +<pre class="brush: js">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');</pre> + +<p>In seguito dobbiamo creare una variabile di riferimento al lettore audio/video stesso. Aggiungi questa linea al codice aggiunto in precedenza:</p> + +<pre class="brush: js">var player = document.querySelector('video');</pre> + +<p> </p> + +<p>Questa variabile fa riferimento a un oggetto <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, che contiene numerosi metodi e proprietà che si possono usare per assegnare funzionalità ai nostri bottoni.</p> + +<p>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:</p> + +<p> </p> + +<pre class="brush: js">player.removeAttribute('controls');</pre> + +<p>Usando questo metodo, anziché quello di evitare di includere l’attributo <code>controls</code> 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.</p> + +<h4 id="Collegare_i_nostri_bottoni"><strong>Collegare i nostri bottoni</strong></h4> + +<p>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:</p> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>In seguito, aggiungi questo codice, che controlla il bottone Stop:</p> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; +};</pre> + +<p> </p> + +<p>Non esiste una funzione <code>stop()</code> nativa negli elementi <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a>, dunque al suo posto usiamo <code>pause()</code>, e allo stesso tempo resettiamo a zero il tempo di riproduzione <code>currentTime</code>.</p> + +<p>Aggiungiamo ora i bottoni Riavvolgimento e Avanzamento Rapido. Aggiungi i seguenti blocchi di codice in fondo al file:</p> + +<p> </p> + +<pre class="brush: js">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'; + } +};</pre> + +<p> </p> + +<p>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.</p> + +<p>Nota inoltre che ogni volta che il bottone di Avanzamento Rapido viene cliccato controlliamo se il momento attuale della riproduzione <code>currentTime</code> è maggiore del tempo totale <code>duration</code>, 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.</p> + +<p>Come ultimo passo, aggiungi questo codice al fondo del file, per controllare il display del tempo trascorso:</p> + +<pre class="brush: js">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; +};</pre> + +<p>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.</p> + +<h4 id="Ulteriori_letture"><strong>Ulteriori letture</strong></h4> + +<p>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):</p> + +<ul> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> +</ul> + +<p>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 <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a></u> (qui trovi il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">codice sorgente</a></u>).</p> + +<h2 id="Trascrizioni_audio"><strong>Trascrizioni audio</strong></h2> + +<p>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.</p> + +<p>Dal punto di vista pratico, le opzioni per la creazione delle trascrizioni sono:</p> + +<ul> + <li>Servizi commerciali: puoi assumere un trascrittore professionista tramite compagnie come <u><a href="https://scribie.com/">Scribie</a></u>, <u><a href="https://castingwords.com/">Casting Words</a></u>, o <u><a href="https://www.rev.com/">Rev</a></u>. Dedica un po’ di tempo a cercare un’azienda con buona reputazione, che compirà il lavoro con efficienza e serietà. In generale, un maggiore spesa comporterà un migliore risultato; la rapidità e accuratezza del servizio possono variare molto tra le diverse aziende che offrono tali servizi.</li> + <li>Comunità / fai da te: se sei parte di una comunità attiva puoi chiedere un aiuto per effettuare le trascrizioni, o puoi farle tu stesso.</li> + <li>Servizi automatici: esistono servizi di trascrizione automatica, per esempio quando carichi un video su Youtube puoi scegliere di generare sottotitoli/trascrizioni automatici. La qualità della trascrizione automatica è molto variabile, e dipende dalla qualità dell’audio.</li> +</ul> + +<p>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.</p> + +<h3 id="Esempi_di_trascrizioni">Esempi di trascrizioni</h3> + +<p>Se ricorri a un servizio di trascrizione automatico, probabilmente dovrai usare l’interfaccia utente fornita dal servizio. Per esempio, apri il video <u><a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a></u> e clicca sui tre puntini delle opzioni aggiuntive. In seguito clicca su <em>Apri trascrizione</em>.</p> + +<p>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 <u><a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-i</a>u</u> (vedi anche il <u><a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">codice sorgente</a></u>).</p> + +<h3 id="Descrizioni_audio">Descrizioni audio</h3> + +<p> </p> + +<p>Se al contenuto audio è associato anche un contenuto visuale, devi fornire descrizioni audio di tale contenuto visuale.</p> + +<p>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.</p> + +<p> </p> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h2 id="Tracce_testuali_nei_video"><strong>Tracce testuali nei video</strong></h2> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<p>Non si tratta certo di un concetto nuovo, le stazioni televisive usano le tracce testuali già da moltissimo tempo:</p> + +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> + +<p>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:</p> + +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> + +<p>Esistono diversi tipi di traccia testuale, con differenti scopi. I tipi principali sono:</p> + +<ul> + <li>Didascalie: sono pensate per persone con difficoltà auditive e includono una trascrizione delle parole che vengono pronunciate nei dialoghi e anche informazioni sul contesto, come per esempio chi sta parlando, lo stato d’animo delle persone, che tipo di musica sta suonando, gli effetti sonori (suono del telefono, passi, pioggia ecc.).</li> + <li>Sottotitoli: rivolti a un pubblico che non capisce la lingua dei dialoghi, sono traduzioni del contenuto audio da una lingua a un’altra. Possono anche contenere informazioni extra sulla scena rappresentata.</li> + <li>Descrizioni: sono descrizioni dettagliate delle scene rappresentate, pensate per persone che non possono vedere il video.</li> + <li>Titoli capitoli: titoli delle varie sezioni in cui si divide un video, per rendere la navigazione dello stesso più facile.</li> +</ul> + +<h3 id="Implementare_le_tracce_testuali_in_HTML5">Implementare le tracce testuali in HTML5</h3> + +<p>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”.</p> + +<p>Un file WebVTT tipico è più o meno così:</p> + +<pre>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. + + ...</pre> + +<p>To get this displayed along with the HTML media playback, you need to:</p> + +<ul> + <li>Salvare il file in formato .vtt in una cartella.</li> + <li>Associare il file .vtt al lettore usando l’elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track" title="The HTML <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web "><track></a>. L’etichetta <code><track></code> deve essere inclusa dentro l’etichetta <code><audio></code> o <code><video></code>, e posizionata dopo tutte le etichette <code><source></code>. Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-kind">kind</a></u> per specificare se le cues sono sottotitoli (subtitles), didascalie (captions) o descrizioni (descriptions).</li> + <li> + <p>Usa l’attributo <u><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track#attr-srclang">srclang</a></u> per indicare al browser in quale lingua sono scritti i sottotitoli.</p> + </li> +</ul> + +<p>Un esempio:</p> + +<pre class="brush: html"><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></pre> + +<p>Il risultato sarà un video sottotitolato, simile a questo: </p> + +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>Per maggiori dettagli leggi l’articolo (in inglese) <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">l’esempio</a> che appare nell’articolo su Github, scritto da Ian Devlin (vedi anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente</a>). 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.</p> + +<div class="note"> +<p><strong>Nota</strong>: le tracce testuali e le trascrizioni contribuiscono anche al <u><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO: SEO (Search Engine Optimization) is the process of making a website more visible in search results, also termed improving search rankings.">SEO</a></u>, 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.</p> +</div> + +<h2 id="Altro_contenuto_multimediale"><strong>Altro contenuto multimediale</strong></h2> + +<p>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:</p> + +<ul> + <li><a href="/it/docs/Web/HTML/Canvas">Canvas HTML5</a></li> + <li>Flash</li> + <li>Silverlight</li> +</ul> + +<p>Per tali contenuti è necessario gestire i problemi di accessibilità secondo ogni caso particolare. In alcuni casi non è particolarmente difficile, per esempio:</p> + +<ul> + <li>Se stai inserendo contenuto audio da fonti esterne tramite un plugin come Flash or Silverlight, probabilmente puoi fornire una trascrizione con lo stesso metodo mostrato qui sopra nella sezione <a href="/it/docs/Learn/Accessibilità/Multimedia#Esempi_di_trascrizioni">Esempi di trascrizioni</a>.</li> + <li>Se stai inserendo contenuto video da fonti esterne tramite un plugin come Flash or Silverlight, puoi ricorrere alle tecniche usate per inserire didascalie/sottotitoli in tali tecnologie. Per esempio vedi gli articoli in inglese <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, o <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> +</ul> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Riassunto"><strong>Riassunto</strong></h2> + +<p>Questo articolo ha fornito una sintesi dei problemi di accessibilità relativi ai contenuti multimediali, e inoltre alcune soluzioni pratiche a tali problemi.</p> + +<p>{{PreviousMenuNext("Learn/Accessibilità/WAI-ARIA_basics","Learn/Accessibilità/Mobile", "Learn/Accessibilità")}}</p> + +<p> </p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li> + <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li> + <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li> + <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li> +</ul> + +<p> </p> |