diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/learn/accessibility | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/learn/accessibility')
| -rw-r--r-- | files/it/learn/accessibility/accessibility_troubleshooting/index.html | 114 | ||||
| -rw-r--r-- | files/it/learn/accessibility/css_and_javascript/index.html | 360 | ||||
| -rw-r--r-- | files/it/learn/accessibility/html/index.html | 539 | ||||
| -rw-r--r-- | files/it/learn/accessibility/index.html | 68 | ||||
| -rw-r--r-- | files/it/learn/accessibility/mobile/index.html | 337 | ||||
| -rw-r--r-- | files/it/learn/accessibility/multimedia/index.html | 393 | ||||
| -rw-r--r-- | files/it/learn/accessibility/wai-aria_basics/index.html | 423 | ||||
| -rw-r--r-- | files/it/learn/accessibility/what_is_accessibility/index.html | 197 |
8 files changed, 0 insertions, 2431 deletions
diff --git a/files/it/learn/accessibility/accessibility_troubleshooting/index.html b/files/it/learn/accessibility/accessibility_troubleshooting/index.html deleted file mode 100644 index 0721747f72..0000000000 --- a/files/it/learn/accessibility/accessibility_troubleshooting/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: 'Test di valutazione: risoluzione di problemi di accessibilità' -slug: Learn/Accessibility/Accessibility_troubleshooting -tags: - - Accessibilità - - CSS - - HTML - - JavaScript - - Principiante - - Test di valutazione - - WAI-ARIA -translation_of: Learn/Accessibility/Accessibility_troubleshooting -original_slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}</div> - -<p class="summary">Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</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 aver letto i <a href="it/docs/Learn/Accessibilità">precedenti articoli del corso</a>.</td> - </tr> - <tr> - <th scope="row"><strong>Obiettivo</strong>:</th> - <td>Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.</td> - </tr> - </tbody> -</table> - -<h2 id="Punto_di_partenza"><strong>Punto di partenza</strong></h2> - -<p> </p> - -<p>Come primo passo, dovresti scaricare l’<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivio ZIP contenente i file che compongono il sito di esempio</a>. Decomprimi l’archivio in una cartella locale sul tuo computer.</p> - -<p>Il risultato finale del test dovrebbe apparire così:</p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> - -<p>Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.</p> - -<h2 id="Schema_del_progetto"><strong>Schema del progetto</strong></h2> - -<p>Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.</p> - -<h3 id="Colori">Colori</h3> - -<p>Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?</p> - -<h3 id="HTML_semantico">HTML semantico</h3> - -<ol> - <li>Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.</li> - <li>Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?</li> - <li>Il menu di navigazione (racchiuso tra le etichette <code><div class="nav"></code> e <code></div></code>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.</li> -</ol> - -<div class="note"> -<p><strong>Nota</strong>: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione<font>.</font></p> -</div> - -<h3 id="Le_immagini">Le immagini</h3> - -<p>Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema<font>?</font></p> - -<h3 id="Il_lettore_audio">Il lettore audio<font> </font></h3> - -<ol> - <li>Il lettore <code><audio></code> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti<font>?</font></li> - <li>Il lettore <code><audio></code> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio<font>?</font></li> -</ol> - -<h3 id="I_formulari">I formulari</h3> - -<ol> - <li>Sarebbe utile aggiungere un’etichetta all’elemento <code><input></code> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo<font>?</font></li> - <li>I due elementi <code><input></code> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS<font>.</font></li> -</ol> - -<h3 id="Il_bottone_mostranascondi_commenti">Il bottone mostra/nascondi commenti</h3> - -<p>Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO<font>?</font></p> - -<h3 id="La_tabella">La tabella</h3> - -<p>La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi<font>?</font></p> - -<h3 id="Altre_considerazioni">Altre considerazioni<font>?</font></h3> - -<p>Puoi indicare due ulteriori idee per rendere il sito più accessibile<font>?</font></p> - -<h2 id="Valutazione"><strong>Valutazione</strong></h2> - -<p>Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">forum di discussione su questo esercizio</a><font>, </font>o nel canale IRC<font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> su <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font>In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.</p> - -<p><font>{{PreviousMenu("Learn/Accessibilità/</font>Accessibilità_dispositivi_mobili<font>", "Learn/Accessibilità")}}</font></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> diff --git a/files/it/learn/accessibility/css_and_javascript/index.html b/files/it/learn/accessibility/css_and_javascript/index.html deleted file mode 100644 index b1677cac9f..0000000000 --- a/files/it/learn/accessibility/css_and_javascript/index.html +++ /dev/null @@ -1,360 +0,0 @@ ---- -title: Linee guida di accessibilità per CSS e JavaScript -slug: Learn/Accessibility/CSS_and_JavaScript -tags: - - Accessibilità - - Articolo - - CSS - - Guida - - JavaScript - - colore - - contrasto - - imparare - - nascondere - - non intrusivo -translation_of: Learn/Accessibility/CSS_and_JavaScript -original_slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibilità")}}</div> - -<p class="summary">CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</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="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/Cosa_%C3%A8_accessibilit%C3%A0">cosa è l'accessibilità</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Imparare le basi di come utilizzare CSS e JavaScript correttamente per massimizzare l'accessibilità dei propri siti e allo stesso tempo evitare errori che potrebbero ridurla.</td> - </tr> - </tbody> -</table> - -<h2 id="CSS_e_JavaScript_sono_accessibili">CSS e JavaScript sono accessibili?</h2> - -<p>CSS e JavaScript non hanno per l'accessibilità lo stesso livello di importanza che ha HTML, ma possono comunque arrecare grandi danni se usati impropriamente. Per dirlo in un'altra maniera, è importante che tu apprenda alcune linee guida sull'uso di CSS e JavaScript, per evitare di rovinare l'accessibilità dei tuoi documenti web.</p> - -<h2 id="CSS">CSS</h2> - -<p>Cominciamo col dare un'occhiata a CSS.</p> - -<h3 id="Semantiche_corrette_e_aspettative_dell'utente">Semantiche corrette e aspettative dell'utente</h3> - -<p>È possibile usare CSS per modificare <em>in qualsiasi modo</em> l'aspetto di qualsiasi elemento HTML, ma questo non significa che lo devi fare obbligatoriamente. Come abbiamo detto più volte nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, dovresti utilizzare sempre l'elemento semantico più appropriato per ogni situazione, a meno che sia davvero impossibile. Se non lo fai, puoi causare confusione e problemi di usabilità a tutti gli utenti, e in particolare a quelli con disabilità. Usare le semantiche corrette significa soprattutto venire incontro alle aspettative degli utenti: gli elementi devono apparire e funzionare secondo certi criteri, a seconda della loro funzione, e gli utenti si aspettano che queste convenzioni siano rispettate. </p> - -<p>Per esempio, un utente che usa lettore di schermo non può navigare una pagina attraverso gli elementi di heading se lo sviluppatore del sito non ha usato gli heading appropriati per etichettare il contenuto. Allo stesso modo, un heading perde la sua funzione visuale se lo hai modificato fino al punto in cui non appare più come un heading.</p> - -<p>La regola generale è che puoi modificare lo stile di un elemento perchè sia congruente con lo stile generale del tuo sito, ma non modificarlo tanto da far si che non appaia o agisca come ci si aspetterebbe. Le sezioni seguenti riassumono i principali elementi HTML da prendere in considerazione.</p> - -<h4 id="Struttura_del_contenuto_testuale_standard">Struttura del contenuto testuale "standard"</h4> - -<p>Heading, paragrafi, liste... Il contenuto testuale principale della tua pagina:</p> - -<pre class="brush: html"><h1>Heading</h1> - -<p>Paragrafo</p> - -<ul> - <li>Lista</li> - <li>Lista di due elementi.</li> -</ul></pre> - -<p>Un codice CSS tipico potrebbe essere il seguente:</p> - -<pre class="brush: css">h1 { - font-size: 5rem; -} - -p, li { - line-height: 1.5; - font-size: 1.6rem; -}</pre> - -<p>Dovresti:</p> - -<ul> - <li>Selezionare dimensioni dei caratteri, altezza delle linee, spazio tra le lettere ecc. con lo scopo di rendere il tuo testo logico, comprensibile e facile da leggere. </li> - <li>Assicurarti che i tuoi headings risaltino rispetto al corpo del testo, tipicamente apparendo in grassetto e con dimensioni del testo maggiori, come è il loro stile di default. Le liste dovrebbero apparire chiaramente come liste. </li> - <li>Assicurarti che il tuo testo abbia un buon contrasto con il colore di fondo.</li> -</ul> - -<p>Vedi gli articoli in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti di testo in HTML </a>e <a href="/en-US/docs/Learn/CSS/Styling_text">Modificare lo stile del testo</a> per maggiori informazioni.</p> - -<h4 id="Testo_enfatizzato">Testo enfatizzato</h4> - -<p>L'etichetta <code><em></code> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <code><strong> </code>ha lo stesso scopo, ma mostra il testo in grassetto:</p> - -<pre class="brush: html"><p>L'acqua è <em>molto calda</em>.</p> - -<p>Le gocce d'acqua che si formano su una suoerficie sono chiamate <strong>condensa</strong>.</p></pre> - -<p>Potresti aggiungere un colore particolare per il testo in evidenza:</p> - -<pre class="brush: css">strong, em { - color: #a60000; -}</pre> - -<p>Ad ogni modo, raramente avrai bisogno di modificare lo stile di elementi enfatizzati. Gli stili standard grassetto e corsivo sono molto riconoscibili, e modificarli potrebbe creare confusione. Per maggiori informazioni sull'enfasi vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Enfasi e importanza</a>.</p> - -<h4 id="Abbreviazioni">Abbreviazioni</h4> - -<p>l'etichetta <code><abbr></code> indica una abbreviazione o un acronimo, e permette, tramite l'attributo <code>title</code>, di fornire la versione estesa della frase o parola abbreviata:</p> - -<pre class="brush: html"><p>Il contenuto di un sito è codificato tramite <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> - -<p>Anche in questo caso potresti voler apportare qualche semplice modifica allo stile:</p> - -<pre class="brush: css">abbr { - color: #a60000; -}</pre> - -<p>Lo standard riconosciuto per indicare le abbreviazioni è una sottolineatura punteggiata, ed è raccomandabile non modificarlo significativamente. Per maggiori dettagli sulle abbreviazioni, vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Abbreviazioni</a>.</p> - -<h4 id="Link">Link</h4> - -<p>I link sono il mezzo con cui ti muovi da un punto all'altro della rete:</p> - -<pre class="brush: html"><p>Visita la <a href="https://www.mozilla.org">homepage di Mozilla</a>.</p></pre> - -<p>Qui sotto sono riportate alcune semplici modifiche allo stile dei link:</p> - -<pre class="brush: css">a { - color: #ff0000; -} - -a:hover, a:visited, a:focus { - color: #a60000; - text-decoration: none; -} - -a:active { - color: #000000; - background-color: #a60000; -}</pre> - -<p>Lo stile di default per i link è la sottolineatura, inoltre si presentano in diversi colori a seconda del loro stato: blu è il colore nello stato di default, viola nel caso il link sia stato visitato, rosso quando si "attiva" cliccandoci sopra. Oltre a ciò, il puntatore del mouse cambia forma quando lo si passa su un link, e il link viene messo in evidenza quando riceve focus (per esempio tramite tast TAB). Nell'immagine qui sotto possiamo vedere l'evidenziazione di un link in Firefox (cornice punteggiata) e Chrome (cornice azzurra):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> - -<p>Puoi modificare lo stile dei link come più ti piace, ma facendo attenzione a fornire agli utenti un feedback quando interagiscono coi link. Quando un link cambia di stato si dovrebbe notare. Inoltre, evita di rimuovere stili di default come il cambio di puntatore del mouse o l'evidenziazione quando un link riceve focus: entrambi sono molto importanti per l'accessibilità degli utenti che usano tastiera.</p> - -<h4 id="Formulari">Formulari</h4> - -<p>I formulari sono elementi che permettono agli utenti di introdurre dati in un sito web:</p> - -<pre class="brush: html"><div> - <label for="nome">Introduci il tuo nome</label> - <input type="text" id="nome" name="nome"> -</div></pre> - -<p>Puoi vedere un buon esempio di uso di CSS in un formulario qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">edi anche la versione live</a>).</p> - -<p>La maggior parte del codice CSS che scriverai per i formulari sarà per modificare le dimensioni degli elementi, allineare elementi <code>label</code> e <code>input</code> e migliorarne l'aspetto esteriore.</p> - -<p>Non dovresti comunque modificare troppo il feedback visuale che gli elementi di un formulario mostrano quando ricevono focus, che è in pratica lo stesso dei link (vedi sopra). Puoi modificare l'aspetto delle evidenziazioni applicate agli elementi del formulario quando ricevono focus o hover del puntatore del mouse per far si che lo stile del tuo sito sia consistente sui diversi browser, ma evita di rimuoverle. Come già detto, alcuni utenti contano su tali "segnali" per poter interpretare ciò che sta accadendo mentre navigano un sito.</p> - -<h4 id="Tabelle">Tabelle</h4> - -<p>Prendiamo ora in considerazione le tabelle che si usano per presentare dati.</p> - -<p>Puoi vedere un buon esempio di tabella costruita con HTML e CSS qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (v<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">edi anche la versione live</a>).</p> - -<p>Il codice CSS applicato alle tabelle serve in genere a uniformarle allo stile generale del sito e a migliorarle esteticamente. Alcune buone pratiche sono ad esempio far si che gli header(intestazioni di file o colonne) della tabella siano in risalto, per esempio usando il grassetto, e far uso di una alternanza di sfondo chiaro e scuro per rendere più facile la distinzione tra le varie file della tabella.</p> - -<h3 id="Colore_e_contrasto">Colore e contrasto</h3> - -<p>Quando scegli uno schema di colori per il tuo sito, assicurati che il testo abbia un colore che contrasta bene con lo sfondo. Un basso contrasto dei colori può produrre un effetto interessante dal punto di vista estetico, ma renderà molto difficile poter leggere il tuo contenuto alle persone con problemi visivi come il daltonismo.</p> - -<p>C'è un modo molto facile per verificare se il contrasto che hai scelto è abbastanza alto da non causare problemi. Ci sono numerosi siti che ti permettono di introdurre il colore del testo e quello dello sfondo, per verificarne il contrasto. Per esempio il sito <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> è facile da usare, e fornisce una spiegazione (in inglese) dei criteri WCAG (<a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti Web</a>) sul contrasto dei colori.</p> - -<div class="note"> -<p><strong>Nota</strong>: un contrasto alto sarà d'aiuto per poter leggere con maggiore facilità anche a chi si connette tramite telefono o tablet in ambienti con molta luce, come un parco o una piazza. </p> -</div> - -<p>Un altro consiglio è di non fare affidamento solo sul colore per fornire un certo tipo di informazioni o segnali, in quanto tali informazioni non potranno essere interpretate da chi non vede i colori. Per esempio, invece di limitarti a marcare in rosso i campi di un formulario che sono da compilare obbligatoriamente, marcali anche con un asterisco.</p> - -<h3 id="Nascondere_elementi">Nascondere elementi</h3> - -<p>Ci sono molte situazioni nelle quali è necessario che non tutto il contenuto sia mostrato allo stesso tempo. Per esempio nel nostro <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info box a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>) abbiamo tre schede con informazioni posizionate una sopra l'altra, e ci sono tre bottoni cliccabili per passare da una scheda all'altra (il box è accessibile anche da tastiera, usando il tasto TAB per spostarsi tra i bottoni e INVIO per selezionare una scheda).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> - -<p>Gli utenti che usano lettori di schermo non avranno problemi a leggere tutte le schede, l'importante è che l'ordine del contenuto sia sensato. Usare <code>position: absolute</code> (come nel nostro esempio) è in generale considerato come uno dei migliori metodi per nascondere contenuto, perchè non impedisce ai lettori di schermo di leggerlo.</p> - -<p>D'altro canto, non dovresti usare {{cssxref("visibility")}}<code>:hidden</code> o {{cssxref("display")}}<code>:none</code>, perchè nascondono il contenuto ai lettori di schermo. A meno che, ovviamente, ci sia una buona ragione per nascondere questo contenuto ai lettori di schermo.</p> - -<div class="note"> -<p><strong>Nota</strong>: l'articolo in inglese <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Contenuto visibile solo ai lettori di schermo</a> fornisce molti più dettagli su questo argomento.</span></p> -</div> - -<h3 id="È_possibile_che_gli_utenti_modifichino_lo_stile_dei_tuoi_elementi">È possibile che gli utenti modifichino lo stile dei tuoi elementi</h3> - -<p id="Accept_that_users_can_override_your_styles">A volte gli utenti alterano gli stili che hai impostato sostituendoli con stili personalizzati. Per esempio:</p> - -<ul> - <li>Vedi gli articoli in inglese <a href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-google-chrome/">Come cambiare manualmente il CSS in Chrome</a>, <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/">Firefox</a> e <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Internet Explorer</a>.</li> - <li>Probabilmente è più facile farlo con una estensione, per esempio Stylish, disponibile per <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, e <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> -</ul> - -<p>Gli utenti modificano il CSS per differenti ragioni: un utente con problemi di vista potrebbe voler ingrandire automaticamente il testo su tutti i siti che visita, un utente con daltonismo potrebbe voler aumentare il contrasto dei colori per facilitare la lettura. Qualunque sia la ragione, dovresti tenere in considerazione questa possibilità, e usare un disegno del tuo sito che sia sufficientemente flessibile per poter gestire tali cambi. Per esempio, dovresti assicurarti che l'area dove è situato il tuo contenuto principale può supportare un ingrandimento del testo, mantenendone il formato base e senza farne scomparire parti.</p> - -<h2 id="JavaScript">JavaScript</h2> - -<p> </p> - -<p>Anche JavaScript può causare problemi di accessibilità, dipendendo da come si utilizza.</p> - -<p>JavaScript è un linguaggio molto potente, e possiamo usarlo per compiere un'infinità di funzioni, da semplici aggiornamenti del contenuto o della IU a giochi completi in 2D o 3D. Nessuna regola dice che tutto il contenuto deve essere accessibile al 100% a tutti, ma devi fare tutto il possibile, e cercare di rendere le tue applicazioni il più accessibili possibile.</p> - -<p>Il contenuto e gli elementi funzionali semplici sono relativamente facili da rendere accessibili: per esempio testo, immagini, tabelle, formulari e bottoni. Come abbiamo visto nell'articolo <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a>, le considerazioni chiave sono:</p> - -<ul> - <li>Buone semantiche: usare l'elemento più appropriato per ogni funzione specifica. Per esempio, assicurarsi di usare heading e paragrafi, ed elementi {{htmlelement("button")}} e{{htmlelement("a")}}.</li> - <li>Assicurarsi che il contenuto sia disponibile in forma testuale, o direttamente o tramite <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Alternative_testuali">alternative testuali</a>, come per esempio il testo alternativo per le immagini.</li> -</ul> - -<p>Abbiamo inoltre visto un esempio di uso di JavaScript per migliorare l'accessibilità aggiungendo una funzionalità che mancava (vedi <a href="/it/docs/Learn/Accessibilit%C3%A0/HTML_accessibilit%C3%A0#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>). Questo procedimento non è ideale, visto che si dovrebbe usare l'elemento più appropriato per ogni funzione sin dall'inizio, ma dimostra che è possibile intervenire sul codice in situazioni in cui è necessario modificarlo dopo la sua creazione. Un altro modo per migliorare l'accessibilità degli elementi che usano JavaScript non semantico è usare la tecnologia WAI-ARIA per fornire valore semantico extra per gli utenti che usano lettori di schermo. Il prossimo articolo spiegherà in dettaglio come farlo.</p> - -<p>Funzionalità complesse come i giochi in 3D non sono tanto facili da rendere accessibili. Un gioco 3D creato usando <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> si svilupperà su un elemento {{htmlelement("canvas")}} , che al momento non permette di fornire alternative testuali o altre informazioni utili per persone con disabilità visiva. Si può ragionevolmente obbiettare che un tale tipo di gioco non ha nel suo target di utenza persone non vedenti, e in effetti sarebbe esagerato pretendere di renderlo accessibile al 100%. Ma ad ogni modo è consigliabile implementare alcuni elementi di accessibilità come i controlli da tastiera, che permettono di giocare anche a utenti senza mouse, e assicurarsi che lo schema dei colori abbia un contrasto sufficientemente alto per essere usabile da persone con daltonismo.</p> - -<h3 id="Il_problema_di_un_uso_eccessivo_di_JavaScript">Il problema di un uso eccessivo di JavaScript</h3> - -<p>Spesso gli sviluppatori di siti fanno un uso eccessivo di JavaScript. A volte si trovano siti in cui tutto è stato fatto con JavaScript, perfino HTML e CSS sono stati generati con JavaScript. Questo tipo di siti presentano grossi problemi di accessibilità e non solo, ed è sconsigliato sviluppare siti in questo modo.</p> - -<p>Così come devi usare il giusto elemento per ogni funzione, assicurati anche di star usando la giusta tecnologia! Pensa bene se vale davvero la pena ricorrere a JavaScript per creare un pannello informazioni in 3D, mentre un semplice pannello testuale potrebbe essere sufficiente. Chiediti se hai davvero bisogno di un formulario basato su un widget super complesso, quando magari un semplice campo di input testuale andrebbe bene. E non generare tutto il tuo contenuto HTML con JavaScript. </p> - -<h3 id="Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</h3> - -<p>Dovresti usare JavaScript con discrezione quando crei il tuo contenuto. L'idea di base è che JavaScript dovrebbe essere usato quando possibile per migliorare una funzionalità, ma non per costruirla. Le funzioni più basiche del sito dovrebbero essere indipendenti da JavaScript, anche se a volte ciò non è possibile. Una buona pratica è usare funzionalità già presenti nei browser quando è possibile.</p> - -<p>Buoni esempi di uso non intrusivo di JavaScript sono:</p> - -<ul> - <li>Eseguire la validazione dei formulari dal lato cliente, che avvisa istantaneamente l'utente di errori o problemi nei campi che ha riempito, senza dover aspettare che il server controlli i dati e invii una risposta. Senza validazione dal lato cliente, il formulario funzionerà comunque, ma con maggiore lentezza. </li> - <li>Fornire controlli personalizzati per i <code><video></code> HTML5 perchè siano accessibili agli utenti che navigano tramite tastiera, insieme a un link diretto al video da usare se JavaScript non è disponibile (nella maggior parte dei browser i controlli <code><video></code> di default non sono accessibili tramite tastiera).</li> -</ul> - -<p>Per fare un esempio abbiamo creato un semplice formulario con validazione dal lato cliente, vedi: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">versione live</a>). Nella pagina vedrai un formulario, e, quando provi a inviarlo, se avrai lasciato uno o entrambi i campi vuoti apparirà un messaggio di errore per spiegarti qual è il problema.</p> - -<p>Questo tipo di validazione di un formulario è non intrusiva, puoi infatti usare il formulario anche con JavaScript disabilitato, e inoltre il formulario dovrà comunque essere validato anche dal lato server, poichè sarebbe troppo facile per un utente con cattive intenzioni bypassare la validazione dal lato cliente (per esempio disattivando JavaScript nel browser). La validazione dal lato cliente è utile per segnalare istantaneamente eventuali errori all'utente, senza dover attendere la risposta del server, migliorando così l'usabilità del formulario.</p> - -<div class="note"> -<p><strong>Nota</strong>: nel nostro esempio la validazione dal lato server non è stata implementata. </p> -</div> - -<p>Abbiamo inoltre reso la validazione di questo formulario accessibile, usando l'elemento {{htmlelement("label")}} per assicurarci che ogni campo di input abbia associata una etichetta senza alcuna ambiguità, di modo che i lettori di schermo possano leggere il blocco input+etichetta come una sola unità: </p> - -<pre class="brush: html"><label for="nome">Inserisci il tuo nome:</label> -<input type="text" name="nome" id="nome"></pre> - -<p>La validazione avviene solo al momento dell'invio del formulario. In questo modo la IU non viene aggiornata troppo spesso potendo causare confusione negli utenti che usano lettori di schermo (e anche in quelli che non li usano):</p> - -<pre class="brush: js">form.onsubmit = validate; - -function validate(e) { - errorList.innerHTML = ''; - for(var i = 0; i < formItems.length; i++) { - var testItem = formItems[i]; - if(testItem.input.value === '') { - errorField.style.left = '360px'; - createLink(testItem); - } - } - - if(errorList.innerHTML !== '') { - e.preventDefault(); - } -}</pre> - -<div class="note"> -<p><strong>Nota</strong>: in questo esempio stiamo nascondendo e mostrando il messaggio di errore usando <code>position: absolute </code>invece che un altro metodo come <code>visibility: hidden</code> o <code>display: none</code>, perchè in questo modo il lettore di schermo potrà leggerlo senza problemi. </p> -</div> - -<p>Una validazione reale sarebbe molto più complessa, dovremmo controllare che il nome introdotto sembri effettivamente un nome, che l'età sia un numero e che sia realistica (per esempio non può essere un numero negativo, o di 4 cifre). Nell'esempio abbiamo implementato solo un sistema di verifica che controlla se i campi sono stati riempiti o no (<code>if(testItem.input.value === '')</code>).</p> - -<p>Quando la validazione ha terminato con esito positivo, il formulario viene inviato. Se ci sono errori (<code>if(errorList.innerHTML !== '')</code>) l'invio viene bloccato (usando <code><a href="/it/docs/Web/API/Event/preventDefault">preventDefault()</a></code>), e si mostra il messaggio di errore (vedi sotto). Con questo meccanismo gli errori saranno mostrati solo se ci saranno effettivamente errori, migliorando l'usabilità. </p> - -<p>Per ogni campo del formulario che è vuoto al momento dell'invio creiamo un item con un link e lo inseriamo nella lista errori (<code>errorList</code>).</p> - -<pre class="brush: js">function createLink(testItem) { - var listItem = document.createElement('li'); - var anchor = document.createElement('a'); - anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; - anchor.href = '#' + testItem.input.name; - anchor.onclick = function() { - testItem.input.focus(); - }; - listItem.appendChild(anchor); - errorList.appendChild(listItem); -}</pre> - -<p>Ogni link ha una doppia funzionalità: segnala il tipo di errore e inoltre cliccandoci sopra sposta il focus automaticamente sul campo vuoto da riempire.</p> - -<div class="note"> -<p><strong>Nota</strong>: il metodo <code>focus()</code> dell'esempio può creare confusione. Chrome e Edge (e le ultime versioni di IE) sposteranno il focus al campo relativo quando si clicca sul link, senza bisogno della funzione <code>onclick</code>/<code>focus()</code>. Safari si limiterà a evidenziare il campo, ma ha bisogno di <code>onclick</code>/<code>focus()</code> per spostare effettivamente il focus su di esso. Firefox al momento non è in grado di spostare il focus su un campo specifico, quindi il metodo non funzionerà su Firefox. Il problema dovrebbe essere risolto in futuro.</p> -</div> - -<p> </p> - -<p>Inoltre, il messaggio di errore è stato posto in cima nel codice HTML (anche se poi viene visualizzato in un altro punto della pagina usando CSS per posizionarlo), di modo che l'utente, tornando in cima alla pagina, può sapere che errore c'è nel suo formulario e andare direttamente al campo in questione.</p> - -<p>Come annotazione finale, si noti che abbiamo usato alcuni attributi WAI-ARIA nel nostro esempio, per aiutare a risolvere problemi di accessibilità causati da aree del contenuto che si aggiornano costantemente senza che la pagina si ricarichi (di default i lettori di schermo non segnaleranno ciò agli utenti):</p> - -<p> </p> - -<pre><div class="errors" role="alert" aria-relevant="all"> - <ul> - </ul> -</div></pre> - -<p>Torneremo a occuparci più dettagliatamente di questo tipo di attributi nel prossimo articolo sulla tecnologia <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p> - -<div class="note"> -<p><strong>Nota</strong>: forse starai pensando che HTML5 include già alcuni meccanismi di validazione come gli attributi <code>required</code>, <code>min</code>/<code>minlength</code>, e <code>max</code>/<code>maxlength</code>. Non abbiamo fatto uso di tali attributi nell'esempio, perchè non presentano ancora un livello accettabile di compatibilità nei differenti browser (per esempio Safari non li supporta, Internet Explorer solo a partire dalla versione 10).</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: l'articolo in inglese <a href="http://webaim.org/techniques/formvalidation/">Forme usabili ed accessibili di validazione di formulari e risoluzione di errori</a> fornisce ulteriori utili informazioni su come creare un processo di validazione acessibile.</p> -</div> - -<h3 id="Altri_problemi_di_accessibilità_con_JavaScript">Altri problemi di accessibilità con JavaScript</h3> - -<p>Ci sono altri aspetti relativi all'accessibilità da tenere in conto quando si usa JavaScript. Ne aggiungeremo altri all'articolo in futuro.</p> - -<h4 id="Eventi_specifici_del_mouse">Eventi specifici del mouse</h4> - -<p>Come forse già saprai, le interazioni dell'utente con il sito tramite mouse sono gestite in JavaScript usando i gestori di eventi (event handlers), che ci permettono di eseguire funzioni in risposta a determinati eventi attivati dalle azioni compiute dall’utente con il mouse. Alcuni esempi di eventi specificamente relativi al mouse sono <a href="/en-US/docs/Web/Events/mouseover">mouseover</a>, <a href="/en-US/docs/Web/Events/mouseout">mouseout</a>, <a href="/en-US/docs/Web/Events/dblclick">dblclick</a>, ecc. Le funzionalità associate a tali eventi non sono accessibili usando altri dispositivi, come per esempio la tastiera. </p> - -<p>Per attenuare i problemi di accessibilità che ne derivano, dovresti associare a tali eventi altri eventi simili ma che sono attivati in altra maniera (i cosiddetti gestori di eventi indipendenti dal dispositivo). Per esempio <a href="/en-US/docs/Web/Events/focus">focus</a> e <a href="/en-US/docs/Web/Events/blur">blur</a> forniscono accessibilità per gli utenti che navigano con la tastiera.</p> - -<p>Vediamo ora un esempio che dimostra questo tipo di situazione. Supponiamo che in una pagina del nostro sito ci sia una immagine in miniatura, che si espande quando ci si passa sopra con il puntatore del mouse, oppure quando riceve focus (per esempio pensiamo al catalogo di un sito di e-commerce).</p> - -<p>Abbiamo creato un esempio molto semplice, che puoi trovare qui: <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">codice sorgente</a>). Il codice ha due funzioni per mostrare o nascondere l'immagine ingrandita; qui sotto vediamo il codice dei gestori degli eventi:</p> - -<pre class="brush: js">imgThumb.onmouseover = showImg; -imgThumb.onmouseout = hideImg; - -imgThumb.onfocus = showImg; -imgThumb.onblur = hideImg;</pre> - -<p>Le prime due linee di codice riguardano il mouse: la prima funzione si attiva al passare il puntatore del mouse sulla miniatura, mentre la seconda si attiva al togliere il puntatore dall'area della miniatura. Questo codice però non permette di vedere l'immagine ingrandita tramite tastiera. Per poterlo fare, abbiamo aggiunto le atre due linee di codice, che attivano le stesse funzioni quando la miniatura riceve focus o lo perde. Si può spostare il focus sulla miniatura usando il tasto TAB, perchè al codice HTML dell'elemento abbiamo aggiunto l'attributo <code>tabindex="0"</code>.</p> - -<p>L'evento <a href="/en-US/docs/Web/Events/click">click</a> è interessante, a prima vista potrebbe sembrare un evento esclusivamente relativo al mouse, ma nella maggior parte dei browser il gestore di eventi <a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> si attiverà anche premendo il tasto INVIO su un link o un elemento di formulario con focus, o quando si clicca sull'elemento con il dito se si usa un dispositivo con touchscreen.</p> - -<p>Tieni presente comunque che questo non funziona nel caso in cui si usi <code>tabindex </code>per dare il focus a un elemento che di default non lo potrebbe avere. In casi come questo devi rilevare quando il tasto specifico è premuto (vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>).</p> - -<h2 id="Riassunto">Riassunto</h2> - -<p> </p> - -<p>Speriamo che questo articolo ti sia servito a capire meglio i problemi di accessibilità relativi all'uso di CSS e JavaScript sui tuoi siti o applicazioni.</p> - -<p>E ora, WAI-ARIA!</p> - -<div>{{PreviousMenuNext("Learn/Accessibilità/HTML_accessibilità","Learn/Accessibilità/WAI-ARIA_basics", "Learn/Accessibilità")}}</div> diff --git a/files/it/learn/accessibility/html/index.html b/files/it/learn/accessibility/html/index.html deleted file mode 100644 index 45d39505ef..0000000000 --- a/files/it/learn/accessibility/html/index.html +++ /dev/null @@ -1,539 +0,0 @@ ---- -title: 'HTML: una buona base per l''accessibilità' -slug: Learn/Accessibility/HTML -tags: - - Accessibilità - - Articolo - - Bottoni - - Formulari - - HTML semantico - - Lettore di schermo - - Link - - Principiante - - TA - - Testo Alternativo - - tastiera - - tecnologie assistive -translation_of: Learn/Accessibility/HTML -original_slug: Learn/Accessibilità/HTML_accessibilità ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</div> - -<p class="summary">Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</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 e una idea chiara di <a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">cosa è l'accessibilità</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Acquisire familiarità con le caratteristiche di HTML che hanno effetti positivi sull'accessibilità, e imparare a usarle correttamente nello sviluppo dei propri siti e applicazioni. </td> - </tr> - </tbody> -</table> - -<h2 id="HTML_e_accessibilità">HTML e accessibilità</h2> - -<p> </p> - -<p>Man mano che impari cose nuove su HTML (leggendo nuove risorse, analizzando esempi di codice, ecc.), ti accorgerai sicuramente di un tema ricorrente: l'importanza di usare HTML semantico (a volte chiamato POSH, Plain Old Semantic HTML). Ciò significa utilizzare il più possibile gli elementi HTML più corretti per il proprio scopo.</p> - -<p>Forse ti chiederai perché è tanto importante. Dopotutto, puoi usare un combinazione di CSS e JavaScript per far sì che qualsiasi elemento HTML si comporti esattamente come tu vuoi. Per esempio, un bottone che controlla la riproduzione di un video sul tuo sito si potrebbe codificare così:</p> - -<p> </p> - -<pre class="brush: html"><div>Play video</div></pre> - -<p>Ma, come vedrai in dettaglio più avanti, ha molto più senso usare un elemento più specifico:</p> - -<pre class="brush: html"><button>Play video</button></pre> - -<p>Non solo l'elemento <code><button> </code>presenta di default uno stile più appropriato alla sua funzione (anche se probabilmente in seguito modificherai tale stile), ma è anche perfettamente accessibile con la tastiera. Ciò significa che un utente che usa la tastiera per navigare potrà spostarsi da un bottone all'altro del sito usando il tasto TAB, e premere i bottoni usando INVIO.</p> - -<p>L'HTML semantico non richiede più tempo per essere scritto del codice non-semantico se lo utilizzi con consistenza sin dal principio del progetto, e inoltre presenta numerosi altri benefici che vanno al di là dell'accessibilità:</p> - -<p> </p> - -<ol> - <li><strong>Maggior facilità nello sviluppo</strong> — come già detto in precedenza, gli elementi HTML semantici hanno già integrate in sè alcune funzionalità aggiuntive. inoltre rendono il codice più facile da leggere e interpretare.</li> - <li><strong>Miglior rendimento su dispositivi mobili </strong>— l'HTML semantico è più leggero del non-semantico, e più facile da rendere responsivo.</li> - <li><strong>Utile per il SEO</strong> — i motori di ricerca danno maggior importanza alle parole chiave contenute in heading, link, ecc. rispetto a quelle contenute in generici <code><div></code> non-semantici, dunque i tuoi siti saranno più facili da trovare. </li> -</ol> - -<p>Ora vedremo più in dettaglio come produrre un codice HTML accessibile.</p> - -<div class="note"> -<p><strong>Nota</strong>: È una buona idea installare un lettore di schermo sul tuo computer, così che tu possa testare gli esempi mostrati più avanti. Vedi la guida in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida ai lettori di schermo</a> per maggiori dettagli.</p> -</div> - -<h2 id="Semantiche_corrette"><strong>Semantiche corrette</strong></h2> - -<p> </p> - -<p>Abbiamo già parlato dell'importanza di usare la giusta semantica, e perchè è importante usare i corretti elementi HTML per ogni situazione. Questa pratica non può essere ignorata, visto che è una delle principali situazioni in cui l'accessibilità viene compromessa se non si agisce propriamente.</p> - -<p>Se si analizzano i siti presenti in rete, si noterà che ci sono casi di utilizzo molto poco ortodosso del codice HTML. Alcuni errori sono dovuti a pratiche ormai in disuso che non sono state debitamente aggiornate, altri semplicemente a ignoranza. In ogni caso, ogni volta che trovi del codice erroneo, dovresti fare il possibile per sistemarlo.</p> - -<p>A volte non sei nella posizione di poter correggere del codice mal scritto, per esempio se le tue pagine si basano su un framework esterno su cui non hai controllo, o se sul tuo sito è presente contenuto di terze parti (come ad esempio banners pubblicitari) che non puoi modificare.</p> - -<p>Comunque, tieni a mente che l'obiettivo non è "tutto o niente". Ogni piccolo miglioramento che riuscirai a implementare sarà utile alla causa dell'accessibilità.</p> - -<h3 id="Contenuto_testuale">Contenuto testuale</h3> - -<p>Uno dei più grandi aiuti per un utente che usa un lettore di schermo è una buona struttura del contenuto, diviso in headings, paragrafi, liste ecc. Un buon esempio può essere il seguente codice:</p> - -<pre class="brush: html example-good line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Questa è la prima sezione del mio documento.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Ecco qui un altro paragrafo.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> - -<ol> - <li>Questa è</li> - <li>una lista</li> - <li>composta da</li> - <li>vari elementi</li> -</ol></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla!</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> - -<p>Abbiamo preparato un'altra versione più lunga che puoi provare a navigare con un lettore di schermo (vedi: <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">buone-semantiche.html</a>). Se provi a leggere tale pagina, ti renderai conto che è facile da navigare:</p> - -<ol> - <li>Il lettore di schermo legge ogni etichetta man mano che avanza nella lettura del contenuto, facendoti sapere quale è un heading, quale un paragrafo ecc.</li> - <li>Il lettore si ferma dopo ogni elemento, permettendoti di procedere al ritmo di lettura che ti è più comodo.</li> - <li>Nella maggior parte dei lettori di schermo, puoi saltare al precedente o seguente heading.</li> - <li>Molti lettori di schermo inoltre ti forniscono una lista di tutti gli heading presenti, permettendoti di avere un utile indice per trovare contenuti specifici. </li> -</ol> - -<p>A volte si scrivono headings e paragrafi usando HTML non semantico e salti di linea, come nel caso seguente:</p> - -<pre class="brush: html example-bad line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Titolo<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -Questa è la prima sezione del mio documento. -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -Ecco qui un altro paragrafo. -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> -1. Questa è -</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> -2. una lista -</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> -3. composta da -</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> -4. vari elementi -</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="punctuation token">Questa è la prima sottosezione del mio documento. Dovrebbe essere facile trovarla</span></span>! -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Seconda sottosezione<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="punctuation token">Questa è la seconda sottosezione del mio documento</span></span>.</code></pre> - -<p>Se provi a leggere questa versione con un lettore di schermo (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">cattive-semantiche.html</a>), l’esperienza non ti risulterà positiva. Il lettore di schermo non avrà riferimenti che lo guidino, e non potrà fornirti un sommario dei contenuti. L'intera pagina gli apparirà come un blocco unico, e la leggerà tutta in una volta.</p> - -<p>Ci sono inoltre altri problemi che vanno al di là dell'accessibilità: per esempio è difficile applicare stile al contenuto usando CSS, o manipolarlo con JavaScript, perchè non ci sono elementi da usare come selettori.</p> - -<h4 id="Usare_un_linguaggio_chiaro">Usare un linguaggio chiaro</h4> - -<p>Anche il linguaggio che usi può avere un effetto sull'accessibilità. In generale dovresti usare un linguaggio chiaro e non troppo complesso, privo di termini gergali o eccessivamente tecnici. Ciò non è d'aiuto solo alle persone con disabilità cognitive o di altro tipo; è anche utile ad utenti per i quali il testo è scritto in una lingua che non conoscono bene, a utenti di età molto giovane... Di fatto, è utile a tutti! A parte ciò, dovresti anche fare attenzione a non usare termini e caratteri che risultino poco chiari se letti con un lettore di schermo. Per esempio:</p> - -<ul> - <li>Non usare trattini se puoi evitarli. Invece di scrivere "5-7", scrivi "da 5 a 7".</li> - <li>Espandi le abbreviazioni: invece di "gen", scrivi "gennaio".</li> - <li>Cerca di scrivere la forma completa degli acronimi, almeno la prima volta che li usi. Per esempio quando scrivi "HTML" per la prima volta in una pagina, scrivi "Hypertext Markup Language, o HTML".</li> -</ul> - -<h3 id="Layout_di_pagina">Layout di pagina</h3> - -<p>Molto tempo fa, era pratica abituale creare layout di pagina con tabelle HTML, usando le celle di una tabella per contenere header, footer, barra laterale, la colonna del contenuto principale ecc. Questa non è una buona pratica, visto che un lettore di schermo molto probabilmente darà una lettura confusa delle celle, soprattutto se il layout è complesso e presenta sottotabelle secondarie.</p> - -<p>Prova questo esempio: <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">layout-tabella.html</a>, che corrisponde al seguente codice:</p> - -<pre class="brush: html"><table width="1200"> - <!-- fila del titolo della tabella --> - <tr id="titolo"> - <td colspan="6"> - - <h1 align="center">Header</h1> - - </td> - </tr> - <!-- fila del menu di navigazione --> - <tr id="nav" bgcolor="#ffffff"> - <td width="200"> - <a href="#" align="center">Home</a> - </td> - <td width="200"> - <a href="#" align="center">Our team</a> - </td> - <td width="200"> - <a href="#" align="center">Projects</a> - </td> - <td width="200"> - <a href="#" align="center">Contact</a> - </td> - <td width="300"> - <form width="300"> - <input type="search" name="q" placeholder="Search query" width="300"> - </form> - </td> - <td width="100"> - <button width="100">Go!</button> - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- fila del contenuto principale e sezione laterale --> - <tr id="main"> - <td id="content" colspan="4" bgcolor="#ffffff"> - - <!-- contenuto principale --> - </td> - <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> - <h2>Related</h2> - - <!-- sezione laterale --> - - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- fila del footer --> - <tr id="footer" bgcolor="#ffffff"> - <td colspan="6"> - <p>©Copyright 2050 by nobody. All rights reversed.</p> - </td> - </tr> - </table></pre> - -<p> </p> - -<p>Se provi a navigare la pagina con un lettore di schermo, probabilmente ti dirà che c'è una tabella (anche se alcuni lettori di schermo riescono a differenziare i layout a tabella dalle tabelle di dati). Poi dovrai (a seconda del lettore di schermo che stai usando) esplorare la tabella cella per cella, e infine uscirne per poter navigare il contenuto.</p> - -<p>I layout a tabella son una reliquia del passato, avevano senso in un'epoca in cui non tutti i browser supportavano CSS, ma creano confusione per gli utenti che usano lettori di schermo, e inoltre sono una cattiva pratica per molte altre ragioni (per esempio richiedono una quantità maggiore di codice e rendono il disegno meno flessibile). Non usarli!</p> - -<p>Puoi verificare queste affermazioni comparando le tue esperienze precedenti con un <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">esempio di struttura più moderna del sito</a>, che corrisponde al seguente codice:</p> - -<pre class="brush: html"><header> - <h1>Header</h1> -</header> - -<nav> - <!-- navigazione principale --> -</nav> - -<!-- contenuto principale --> -<main> - - <!-- articolo --> - <article> - <h2>Article heading</h2> - - <!-- contenuto dell'articolo --> - </article> - - <aside> - <h2>Related</h2> - - <!-- contenuto della sezione laterale --> - </aside> - -</main> - -<!-- footer, usato in tutte le pagine del sito --> - -<footer> - <!-- contenuto del footer --> -</footer></pre> - -<p>Se provi questa nuova versione del sito con un lettore di schermo, vedrai che il layout del codice non è più un ostacolo alla lettura del contenuto. Inoltre puoi notare come sia molto più agile e leggero in termini di quantità di codice, cosa che implica una maggior facilità di gestione e mantenimento, e minor utilizzo di banda da parte dell'utente (molto utile per chi ha una connessione lenta).</p> - -<p>Un'altro aspetto da tenere presente quando si creano layout è quello di usare HTML5 semantico, come visto nell'esempio precedente (vedi il compendio in inglese <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">sezioni del contenuto</a>). Potresti creare un layout usando solo elementi annidati {{htmlelement("div")}}, ma è molto meglio usare elementi specifici appropriati per distinguere le varie sezioni della pagina, come la sezione con gli elementi di navigazione ({{htmlelement("nav")}}), il footer ({{htmlelement("footer")}}), unità di contenuto che si ripetono ({{htmlelement("article")}}), ecc. Questi elementi forniscono un ulteriore contenuto semantico per i lettori di schermo (e per altri strumenti) per dare agli utenti indicazioni extra riguardo il contenuto che stanno navigando (vedi l'articolo in inglese <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Supporto dei nuovi elementi HTML5 di sezione nei lettori di schermo </a>per farti un'idea dello stato del supporto nei lettori di schermo).</p> - -<div class="note"> -<p><strong>Nota</strong>: oltre ad una buona semantica ed un layout esteticamente apprezzabile, il tuo contenuto dovrebbe essere organizzato in un ordine logico. Puoi sempre muoverlo in seguito utilizzando CSS, ma il codice sorgente dovrebbe essere nel giusto ordine, di modo che gli utenti che usano lettori di schermo lo possano interpretare correttamente. </p> -</div> - -<h3 id="Controlli_di_Interfaccia_Utente">Controlli di Interfaccia Utente</h3> - -<p>Con il termine “controlli IU” intendiamo i componenti di un sito con cui gli utenti interagiscono. I più comuni sono bottoni, link e formulari. In questa sezione analizzeremo gli aspetti basici da tenere in considerazione quando si creano tali elementi. Più avanti gli articoli su WAI-ARIA e multimedia prenderanno in considerazione altri aspetti dell'accessibilità IU.</p> - -<p>Un aspetto chiave dell'accessibilità dei controlli IU è che di default i browser permettono di interagire con essi tramite tastiera. Puoi fare una prova usando il nostro esempio <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilità-tastiera-nativa.html</a> (vedi il <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">codice sorgente</a>): apri la pagina in una nuova scheda e prova a premere il bottone TAB; dopo averlo premuto qualche volta, dovresti vedere il focus muoversi da un elemento all'altro della pagina. Gli elementi con focus hanno un sistema di evidenziazione per rendere chiaro quale elemento è selezionato al momento. Questo sistema varia leggermente da browser a browser.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> - -<p>Dopo averlo selezionato tramite TAB, puoi usare il tasto INVIO per premere un bottone (nell'esempio i bottoni quando premuti producono un messaggio di avviso); allo stesso modo, premendo INVIO puoi aprire un link che hai selezionato. Inoltre, dopo averlo selezionato con il tasto TAB, puoi scrivere in un campo del formulario, o selezionare un elemento dal menu a tendina usando i tasti freccia della tastiera.</p> - -<div class="note"> -<p><strong>Nota</strong>: i vari browser possono presentare differenti opzioni di controllo da tastiera. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Accessibilità con la tastiera</a> per maggiori dettagli.</p> -</div> - -<p>In ogni caso tutti i browser sono già preconfigurati per la navigazione con tastiera, l'unica cosa di cui devi preoccuparti è usare gli elementi HTML correttamente. Per esempio:</p> - -<pre class="brush: html example-good"><h1>Links</h1> - -<p>Questo è un link a <a href="https://www.mozilla.org">Mozilla</a>.</p> - -<p>Un altro link, a <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> - -<h2>Bottoni</h2> - -<p> - <button data-message="Questo messaggio viene dal primo bottone">Cliccami!</button> - <button data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</button> - <button data-message="Questo messaggio viene dal terzo bottone">E me!</button> -</p> - -<h2>Formulario</h2> - -<form> - <div> - <label for="name">Inserisci il tuo nome:</label> - <input type="text" id="name" name="name"> - </div> - <div> - <label for="age">Inserisci la tua età:</label> - <input type="text" id="age" name="age"> - </div> - <div> - <label for="mood">Come ti senti?</label> - <select id="mood" name="mood"> - <option>Felice</option> - <option>Triste</option> - <option>Arrabbiato</option> - <option>Preoccupato</option> - </select> - </div> -</form></pre> - -<p>Questo significa usare link, bottoni, elementi del formulario ed etichette appropriatamente (includendo l'elemento {{htmlelement("label")}} nei campi del formulario).</p> - -<p>Purtroppo a volte queste buone pratiche non sono rispettate. Ad esempio, a volte si trovano bottoni codificati usando elementi {{htmlelement("div")}}:</p> - -<pre class="brush: html example-bad"><div data-message="Questo messaggio viene dal primo bottone">Cliccami!</div> -<div data-message="Questo messaggio viene dal secondo bottone">Clicca anche me!</div> -<div data-message="Questo messaggio viene dal terzo bottone">E me!</div></pre> - -<p>Questo modo di scrivere codice è altamente sconsigliato: non solo perdi l'accessibilità da tastiera che avresti avuto automaticamente usando l'etichetta {{htmlelement("button")}}, ma perdi anche gli stili CSS di default che l'etichetta {{htmlelement("button")}} contiene.</p> - -<h4 id="Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</h4> - -<p>Risolvere problemi di accessibilità da tastiera in un sito già ultimato può richiedere un certo sforzo (per un esempio vedi la pagina <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">falsi-bottoni-usando-div.html</a> e il suo <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">codice sorgente</a>). In questo esempio abbiamo dato ad alcuni bottoni, erroneamente creati con una etichetta <code><div></code>, la possibilità di ricevere focus tramite tasto TAB fornendo a ognuno l'attributo <code>tabindex="0"</code>:</p> - -<pre class="brush: html"><div data-message="Questo messaggio viene dal primo bottone" tabindex="0">Cliccami!</div> -<div data-message="Questo messaggio viene dal secondo bottone" tabindex="0">Clicca anche me!</div> -<div data-message="Questo messaggio viene dal terzo bottone" tabindex="0">E me!</div></pre> - -<p>L'attributo {{htmlattrxref("tabindex")}} è stato creato per dare agli elementi selezionabili tramite tasto TAB un ordine di focus personalizzato (specificato con numeri positivi in ordine crescente), differente dall'ordine standard con cui sono presenti nel codice sorgente. In generale questa non è una buona pratica, e può causare confusione nell'utente. Questo attributo sarebbe da usare solo in casi particolari, per esempio se il layout mostra gli elementi in una forma molto diversa dal codice sorgente. Ma ci sono altri due possibili usi di <code>tabindex</code> che sono utili per l'accessibilità:</p> - -<ul> - <li><code>tabindex="0"</code>: come mostrato nell'esempio sopra, attribuire un valore di <code>tabindex="0"</code> a un elemento HTML lo rende selezionabile tramite tasto TAB. Questo è l'utilizzo più utile di <code>tabindex</code> per l’accessibilità.</li> - <li><code>tabindex="-1"</code>: questo valore, di per sè nullo, da la possibilità di far sì che un elemento riceva focus programmaticamente, per esempio tramite JavaScript o come destinazione di un link. </li> -</ul> - -<p>L'uso di <code>tabindex </code>rende i bottoni creati erroneamente usando <div> selezionabili tramite tasto TAB, ma non ci permette di cliccarli usando INVIO. Per renderli cliccabili, dobbiamo ricorrere a Javascript: </p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Il tasto ENTER</span> - document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">onclick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p>Spiegazione del codice: abbiamo aggiunto un listener al documento, di modo che il codice rileva ogni occasione in cui un tasto della tastiera viene premuto. Tramite la proprietà <code>KeyCode</code> il codice individua quale tasto è stato premuto. Se il tasto premuto è INVIO, la funzione associata tramite <code>onclick</code> al bottone attualmente selezionato viene eseguita. La linea <code>document.activeElement.onclick()</code> serve proprio a rilevare l'elemento che attualmente sta ricevendo focus nella pagina, in questo caso il bottone che abbiamo selezionato tramite tasto TAB. </p> - -<div class="note"> -<p><strong>Nota</strong>: Tieni presente che questa tecnica funzionerà solo se usi <code>onclick</code>. Usare <code>addEventListener</code> non funzionerà.</p> -</div> - -<p>Come vedi, implementare l'uso della tastiera in un secondo momento non è un lavoro semplice né veloce, e inoltre può causare malfunzionamenti del sito. <strong>È molto meglio utilizzare l'elemento più appropriato per ogni funzionalità del sito sin dal principio.</strong></p> - -<h4 id="Usare_testi_con_significato">Usare testi con significato</h4> - -<p>Una interfaccia utente che presenta une nomenclatura chiara ed esplicativa è utile a tutti, ma avere testi ed etichette curati nei dettagli è particolarmente importante per gli utenti che hanno una disabilità.</p> - -<p>Assicurati che i tuoi bottoni e i tuoi link presentino testi facilmente comprensibili e che distinguano bene un elemento dall'altro. Non usare frasi come "Clicca qui", perchè gli utenti che usano lettori di schermo possono avere difficoltà a distinguere la funzione o destinazione del bottone o link, soprattutto se ce ne sono molti nella pagina. La seguente immagine mostra alcuni campi di un formulario così come sono letti da VoiceOver.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> - -<p>Assicurati che i nomi che assegni agli elementi abbiano senso anche se letti fuori dal loro contesto, allo stesso modo in cui hanno senso nel contesto del paragrafo in cui sono contenuti. Il seguente esempio mostra un esempio di costruzione corretta del testo di un link:</p> - -<pre class="brush: html example-good"><p>Le balene sono creature davvero straordinarie. <a href="balene.html">Scopri di più sulle balene</a>.</p></pre> - -<p>Mentre questo è un esempio di cattivo uso:</p> - -<pre class="brush: html example-bad"><p>Le balene sono creature davvero straordinarie. Per saperne di più sulle balene, <a href="balene.html">clicca qui</a>.</p></pre> - -<div class="note"> -<p><strong>Nota</strong>: Puoi saperne di più sulle migliori pratiche di implementazione di link nel nostro articolo (in inglese) <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creazione di link</a>. Puoi inoltre vedere esempi di buona costruzione di link nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">buoni-link.html</a> ed esempi di link mal costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">cattivi-link.html</a>.</p> -</div> - -<p>Un altro elemento importante sono le etichette <code><label></code> dei formulari, che forniscono una indicazione su cosa l'utente deve inserire nel campo del formulario. Il seguente esempio può sembrare una maniera corretta di implementare un campo di formulario:</p> - -<pre class="brush: html example-bad">Scrivi il tuo nome: <input type="text" id="nome" name="nome"></pre> - -<p>Tuttavia, questo campo non sarebbe utile a utenti con disabilità visiva. Non c'è nessuna indicazione non visuale che associ chiaramente il campo di input con il testo "Scrivi il tuo nome:". Se navighi questo elemento con un lettore di schermo, potresti ricevere una descrizione generica tipo "scrivi testo qui".</p> - -<p>Il seguente è un esempio molto migliore:</p> - -<pre class="brush: html example-good"><div> - <label for="nome">Scrivi il tuo nome:</label> - <input type="text" id="nome" name="nome"> -</div></pre> - -<p>Con questo codice, il testo sarà chiaramente associato al campo di input; il lettore di schermo pronuncerà una frase come: "Scrivi il tuo nome: scrivi testo qui". </p> - -<p>Inoltre, nella maggior parte dei browser associare un testo a un campo di input tramite etichetta <code><label></code> permette di selezionare/attivare il campo input cliccando anche sul testo oltre che sul campo stesso. Ciò rende molto più facile selezionare il campo in cui scrivere.</p> - -<div class="note"> -<p><strong>Nota</strong>: Puoi vedere esempi di formulari ben costruiti nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">esempi-di-buoni-form.html</a> ed esempi di formulari poco accessibili nella pagina <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">esempi-di-cattivi-form.html</a>.</p> -</div> - -<h2 id="Tabelle_dati_accessibili">Tabelle dati accessibili</h2> - -<p>Una tabella dati basica si può scrivere in modo molto semplice, come per esempio:</p> - -<pre class="brush: html"><table> - <tr> - <td>Nome</td> - <td>Età</td> - <td>Genere</td> - </tr> - <tr> - <td>Gabriel</td> - <td>13</td> - <td>Maschio</td> - </tr> - <tr> - <td>Elva</td> - <td>8</td> - <td>Femmina</td> - </tr> - <tr> - <td>Freida</td> - <td>5</td> - <td>Femmina</td> - </tr> -</table></pre> - -<p>Ma questo codice può causare problemi: non dà agli utenti che usano lettori di schermo la possibilità di associare file e colonne in gruppi di dati relazionati tra loro. Per rendere ciò possibile devi sapere quali elementi della tabella sono header di file o colonne. Nel caso della tabella qui sopra ciò è possibile solo visualizzandola (vedi <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">tabella-incorretta.html</a>).</p> - -<p>Ora invece considera l'esempio <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">tabella gruppi punk</a>. Puoi notare alcune aggiunte nel codice che migliorano l'accessibilità:</p> - -<ul> - <li>Gli header della tabella sono stati definiti usando elementi {{htmlelement("th")}}. Inoltre è stato specificato se sono header di file o colonne, tramite l'uso dell'attributo <code>scope</code>. Questo procedimento permette al lettore di schermo di rilevare gruppi di dati separati e leggerli come contenuto specifico di una fila o colonna.</li> - <li>L'elemento {{htmlelement("caption")}} e l'attributo <code>summary </code>di <code><table></code> hanno funzioni simili. Entrambi si possono definire come un testo alternativo per tabelle, come l’attributo <code>alt text</code> per le immagini, utile per fornire all'utente che usa lettore di schermo un sommario del contenuto della tabella. In genere è preferibile usare <code><caption></code>, perchè è utilizzabile anche da utenti che non navigano con lettore di schermo. Ad ogni modo non è necessario usare entrambi. </li> -</ul> - -<div class="note"> -<p><strong>Nota</strong>: vedi l'articolo in inglese <a href="/en-US/docs/Learn/HTML/Tables/Advanced">Caratteristiche avanzate delle tabelle HTML e accessibilità</a> per maggiori dettagli sull'accessibilità delle tabelle dati.</p> -</div> - -<h2 id="Alternative_testuali">Alternative testuali</h2> - -<p>Mentre il contenuto testuale è per sua natura accessibile, non si può dire lo stesso per il contenuto multimediale: immagini e video non possono essere visualizzati da persone con disabilità visiva grave, e il contenuto audio è difficile o impossibile da ascoltare per persone con disabilità auditiva. Ci occuperemo dell’accessibilità del contenuto audio e video in un altro articolo, in questa sezione tratteremo il tema dell'accessibilità per gli elementi {{htmlelement("img")}}.</p> - -<p>Proponiamo qui un semplice esempio, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">immagine-accessibile.html</a>, nel quale possiamo vedere 4 copie della stessa immagine.</p> - -<p>Riportiamo qui sotto il relativo codice HTML tradotto all'italiano (nella pagina del link sarà in inglese):</p> - -<pre><img src="dinosauro.png"> - -<img src="dinosauro.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."> - -<img src="dinosauro.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." - title="Il dinosauro rosso di Mozilla"> - - -<img src="dinosauro.png" aria-labelledby="dino-label"> - -<p id="dino-label">Il Tirannosauro Rex rosso di Mozilla: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</p> -</pre> - -<p>La prima immagine, se si usa un lettore di schermo, non è molto accessibile. Per esempio VoiceOver leggerebbe il nome del file come "dinosauro.png, immagine". L'utente saprebbe almeno che nell'immagine è rappresentato un dinosauro di qualche tipo. Ma spesso le immagini che si trovano su internet non hanno neanche un titolo minimamente descrittivo come “dinosauro.png”, e usano invece come titoli codici alfanumerici o nomi generati automaticamente (per esempio da una macchina fotografica), che non forniscono alcun tipo di contesto riguardo al contenuto dell'immagine.</p> - -<div class="note"> -<p><strong>Nota</strong>: non dovresti mai includere contenuto testuale in una immagine. I lettori di schermo non lo possono leggere. Ci sono inoltre altri svantaggi, per esempio non è possibile selezionarlo e copiarlo. Non farlo! </p> -</div> - -<p>Nel caso della seconda immagine, un lettore di schermo leggerà tutto l'attributo <code>alt</code>: "Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.".</p> - -<p>Dunque è importante fornire alle immagini nomi descrittivi, e anche assicurarsi di fornire testo alternativo ogni volta che è possibile. Fai attenzione a fornire nell'attributo <code>alt</code> un testo che sia una rappresentazione il più possible diretta del contenuto dell'immagine. Evita di includere informazioni extra che non riguardano direttamente l'immagine.</p> - -<p>Un altro aspetto da considerare è se un'immagine ha un significato importante nel contesto del contenuto in cui si trova, o se si tratta solo di un'immagine decorativa. Se un’immagine è solo decorativa, è meglio includerla nella pagina con la proprietà background-image di CSS piuttosto che con l’etichetta <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/img" title="L'elemento HTML <img> incorpora un'immagine nel documento."><img></a>.</p> - -<div class="note"> -<p><strong>Nota</strong>: Leggi <a href="/it/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a> e I<a href="/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">mmagini reattive</a> per saperne di più sulle pratiche ottimali per l'implementazione delle immagini.</p> -</div> - -<p>Se desideri fornire informazioni contestuali extra, dovresti includerle nel testo vicino all'immagine, o usare un attributo <code>title</code>, come mostrato nel codice della terza immagine. La maggior parte dei lettori di schermo leggerà il testo alternativo, il testo dell'attributo <code>title</code>, e il nome del file. Inoltre, i browser mostrano il testo contenuto in <code>title</code> quando un utente passa sopra l'immagine con il puntatore del mouse.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> - -<p>Diamo ora un'occhiata al codice della quarta immagine:</p> - -<pre class="brush: html"><img src="dinosauro.png" aria-labelledby="dino-label"> <p id="dino-label">Il Tirannosauro...</p></pre> - -<p>In questo caso non stiamo usando l'attributo <code>alt</code>. Invece, abbiamo presentato la descrizione dell'immagine come un normale paragrafo, le abbiamo assegnato un <code>id</code>, e poi abbiamo usato l'attributo <code>aria-labelledby</code> associandolo all'<code>id</code>. In questo modo i lettori di schermo useranno il paragrafo come testo alternativo per l'immagine. Questo metodo è utile nel caso in cui si voglia usare lo stesso testo alternativo per multiple immagini, procedimento che è sconsigliabile implementare usando l’attributo <code>alt</code></p> - -<div class="note"> -<p><strong>Nota</strong>: <code>aria-labelledby</code> è parte della specificazione <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, che permette agli sviluppatori di aggiungere valore semantico extra al loro codice e migliorare l'accessiblità per i lettori di schermo. Per saperne di più su come funziona, leggi l'articolo <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p> -</div> - -<h3 id="Altri_metodi_di_testo_alternativo">Altri metodi di testo alternativo</h3> - -<p>Ci sono anche altri metodi per associare alle immagini un testo che le descriva. Per esempio, c'è un attributo chiamato <code>longdesc</code> che permette di richiamare descrizioni dettagliate delle immagini presenti in una pagina da un documento HTML esterno. Per esempio:</p> - -<pre class="brush: html"><img src="dinosauro.png" longdesc="dino-info.html"></pre> - -<p>Questa può sembrare una soluzione ottimale, soprattutto per immagini con grandi contenuti informativi come grafici che rappresentano statistiche o risultati. Ma purtroppo l'attributo <code>longdesc</code> non è supportato con consistenza dai lettori di schermo, e inoltre il suo contenuto è totalmente inaccessibile agli utenti che non usano lettori di schermo. Si raccomanda dunque di includere la descrizione testuale nella stessa pagina in cui si trova l'immagine, o rimandare alla descrizione con un link standard.</p> - -<p>In HTML5 sono inclusi inoltre altri due elementi, {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, che servono ad associare un elemento figurativo (non necessariamente un'immagine) ad una didascalia: </p> - -<pre class="brush: html"><figure> - <img src="dinosauro.png" alt="Il Tirannosauro di Mozilla"> - <figcaption>Un Tirannosauro Rex: un dinosauro bipede che sta in piedi come un umano, con braccia piccole e una grande testa con denti aguzzi.</figcaption> -</figure></pre> - -<p>Purtroppo anche in questo caso la maggior parte dei lettori di schermo non è ancora in grado di interpretare correttamente gli elementi {{htmlelement("figure")}} e {{htmlelement("figcaption")}}, ma l'uso di questi elementi può essere comunque utile per effettuare modifiche allo stile tramite CSS; inoltre questi elementi danno la possibilità di collocare la descrizione di una immagine nello stesso punto in cui l'immagine è inserita nel codice.</p> - -<h3 id="Attributi_alt_vuoti">Attributi alt vuoti</h3> - -<pre class="brush: html"><h3> - <img src="icona-articolo.png" alt=""> - Tirannosauro Rex: il re dei dinosauti -</h3></pre> - -<p>In alcuni casi un'immagine viene inclusa in una pagina con uno scopo puramente decorativo. Come puoi notare nel codice qui sopra, l'attributo alt dell'immagine è lasciato vuoto. Questo procedimento permette ai lettori di schermo di riconoscere la presenza di un'immagine, evitando però di fornirne una descrizione (pronuncerebbero solo una frase come "immagine").</p> - -<p>La ragione per cui è buona pratica usare un attributo <code>alt</code> vuoto invece di non includerlo del tutto è perchè molti lettori di schermo, nel caso in cui non incontrino nessun attributo <code>alt</code> associato a un'immagine, leggono al suo posto l'URL dell'immagine. Nell'esempio qui sopra, l'immagine ha una funzione decorativa dell'heading a cui è associata. In casi come questo, e in tutti i casi in cui un'immagine ha una funzione puramente decorativa e nessun valore di contenuto, dovresti associarle un attributo <code>alt</code> vuoto (<code>alt=""</code>). Un'alternativa è usare l'attributo ARIA <code>role</code> (con forma: <code>role="presentation"</code>), che indica ai lettori di schermo di non leggere il testo alternativo.</p> - -<div class="note"> -<p><strong>Nota</strong>: se possibile è meglio usare CSS per mostrare immagini con funzione puramente decorativa.</p> -</div> - -<h2 id="Riassunto">Riassunto</h2> - -<p>Dopo aver letto questo articolo dovresti avere un’idea piuttosto chiara di come scrivere HTML accessibile nella maggior parte delle situazioni. Il nostro articolo su WAI-ARIA ti darà informazioni più approfondite, ma con quanto hai già letto e imparato sei in possesso di una buona base. Nei prossimi articoli esploreremo CSS e JavaScript, e come l'accessibilità è influenzata dal loro corretto o incorretto utilizzo.</p> - -<p>{{PreviousMenuNext("Learn/Accessibilità/Cosa_è_accessibilità","Learn/Accessibilità/CSS_e_JavaScript_accessibilità", "Learn/Accessibilità")}}</p> diff --git a/files/it/learn/accessibility/index.html b/files/it/learn/accessibility/index.html deleted file mode 100644 index 83765a8317..0000000000 --- a/files/it/learn/accessibility/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Accessibilità -slug: Learn/Accessibility -tags: - - ARIA - - Accessibilità - - Articoli - - CSS - - Guida accessibilità - - HTML - - Imparare accessibilità - - JavaScript - - Lezioni accessibilità - - Manuale accessibiltà - - Moduli - - Principiante - - Sviluppo Web - - imparare -translation_of: Learn/Accessibility -original_slug: Learn/Accessibilità ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Imparare HTML, CSS e Javascript è fondamentale se vuoi diventare uno sviluppatore web, ma la tua preparazione deve andare al di là del semplice utilizzo delle tecnologie di programmazione web: devi imparare ad utilizzarle in modo responsabile, in maniera tale da massimizzare il numero di utenti che possano usufruire pienamente dei tuoi siti, senza lasciare nessuno chiuso fuori. Per ottenere questi risultati devi seguire con attenzione alcune linee guida (che sono indicate nelle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>), praticare <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">test su differenti browser</a> e prendere in considerazione l'accessibilità sin dal principio dei tuoi progetti di sviluppo web. In questo modulo ci occuperemo in dettaglio di quest'ultimo aspetto.</p> - -<h2 id="Prerequisiti">Prerequisiti</h2> - -<p>Per ottenere il massimo da questo modulo, è consigliabile aver seguito almeno i primi due moduli delle sezioni <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>, oppure, ancor meglio, seguire le varie parti del modulo sull'accessibilità mentre studi (o rivedi) le relative sezioni di <a href="/it/docs/Learn/HTML">HTML</a>, <a href="/it/docs/Learn/CSS">CSS</a>, e <a href="/it/docs/Learn/JavaScript">JavaScript</a>. </p> - -<div class="note"> -<p><strong>Nota</strong>: Se stai usando un computer, tablet o altro dispositivo sul quale non hai la possibilità di creare files, puoi testare la maggior parte degli esempi di codice che troverai in questo modulo usando un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guide">Guide</h2> - -<dl> - <dt><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibilità?</a></dt> - <dd>Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</dd> - <dt><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></dt> - <dd>Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.</dd> - <dt><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></dt> - <dd>CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.</dd> - <dt><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></dt> - <dd>Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</dd> - <dt><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></dt> - <dd> - <div> - <p>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> - </div> - </dd> - <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></dt> - <dd>L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili.</dd> -</dl> - -<h2 id="Test_di_valutazione">Test di valutazione</h2> - -<dl> - <dt><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </dt> - <dd>Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</dd> -</dl> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — un'eccellente serie di video tutorials di Marcy Sutton (in inglese).</li> - <li><a href="https://dequeuniversity.com/resources/">Risorse della Deque University</a> — sono inclusi esempi di codice, punti di riferimento sui lettori di schermo e altre risorse utili (in inglese). </li> - <li><a href="http://webaim.org/resources/">Risorse WebAIM</a> — sono incluse guide, checklist, strumenti e molto altro (in inglese).</li> -</ul> diff --git a/files/it/learn/accessibility/mobile/index.html b/files/it/learn/accessibility/mobile/index.html deleted file mode 100644 index 923ae82ae1..0000000000 --- a/files/it/learn/accessibility/mobile/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Accessibilità per dispositivi mobili -slug: Learn/Accessibility/Mobile -tags: - - Accessibilità - - Articolo - - Mobile - - Principiante - - Responsivo - - Touchscreen - - imparare - - screenreader - - touch -translation_of: Learn/Accessibility/Mobile -original_slug: Learn/Accessibilità/Accessibilità_dispositivi_mobili ---- -<div> -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div> - -<p class="summary">L’uso di internet tramite dispositivi mobili è sempre più diffuso, e i sistemi operativi per dispositivi mobili più popolari, Android e iOS, sono dotati di strumenti nativi per l’accessibilità. È dunque importante prendere in considerazione l’accessibilità dei tuoi contenuti su tali piattaforme. Questo articolo tratta specificamente dell’accessibilità per dispositivi mobili.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row"><strong>Prerequisiti</strong>:</th> - <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i <a href="/it/docs/Learn/Accessibilità">precedenti articoli del corso</a><u>.</u></td> - </tr> - <tr> - <th scope="row"><strong>Obiettivo</strong>:</th> - <td>Comprendere i problemi di accessibilità relativi ai dispositivi mobili, e come risolverli.</td> - </tr> - </tbody> -</table> - -<h2 id="Accessibilità_per_dispositivi_mobili"><strong>Accessibilità per dispositivi mobili </strong></h2> - -<p>Lo stato attuale dell’accessibilità, e del supporto degli standard web in generale, è buono nei dispositivi mobili moderni. Sono lontani i giorni in cui i dispositivi mobili utilizzavano tecnologie web completamente differenti dai browser per pc, obbligando gli sviluppatori a fornire siti completamente separati per le due piattaforme (anche se comunque molte aziende continuano a fornire un sito specifico per dispositivi mobili, di solito contenente la parola “mobile” nel dominio).</p> - -<p> </p> - -<p>Oggigiorno, in generale, i dispositivi mobili non hanno problemi a visualizzare correttamente tutti i tipi di siti, e i principali sistemi operativi mobili hanno lettori di schermo nativi. I browser moderni per dispositivi mobili hanno anche un buon supporto per <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">WAI-ARIA</a>.</p> - -<p>Per rendere un sito accessibile e usabile su dispositivi mobili devi solo rispettare le buone pratiche generali di disegno e accessibilità web.</p> - -<p> </p> - -<p>Ci sono però alcune eccezioni che richiedono una attenzione particolare; le principali sono:</p> - -<ul> - <li>Meccanismi di controllo: assicurati che i controlli di interfaccia utente, come per esempio i bottoni, siano accessibili sui touchscreen dei dispositivi mobili allo stesso modo in cui lo sono tramite mouse o tastiera su pc o laptop.</li> - <li>Input dell’utente: assicurati che i campi di input richiedano all’utente il minor sforzo possibile (per esempio, nei formulari fai in modo che l’utente debba scrivere il meno possibile).</li> - <li>Disegno responsivo: assicurati che il layout del tuo sito si adatti allo schermo dei dispositivi mobili, mantieni le dimensini delle immagini il più possibile ridotte, e pensa a come ottimizzare le immagini per gli schermi ad alta risouzione. </li> -</ul> - -<h2 id="Riassunto_dei_test_sui_lettori_di_schermo_per_Android_e_iOS"><strong>Riassunto dei test sui lettori di schermo per Android e iOS</strong></h2> - -<p>I più comuni sistemi operativi per dispositivi mobili hanno installati lettori di schermo nativi pienamente funzionanti. Questi funzionano praticamente alla stessa maniera dei lettori di schermo per pc, ma si usano con gesti touch invece che con combinazioni di tasti.</p> - -<p>Prendiamo in considerazione i due principali lettori di schermo per dispositivi mobili: TalkBack per Android e VoiceOver per iOS.</p> - -<h3 id="Android_TalkBack">Android TalkBack</h3> - -<p> </p> - -<p>TalkBack è il lettore di schermo presente di default su Android.</p> - -<p>Per attivarlo, seleziona<em>Impostazioni > Accessibilità > TalkBack</em>, e premi lo switch di attivazione/disattivazione. Inoltre segui qualsiasi altra indicazione che il sistema ti fornisca.</p> - -<p><strong>Nota:</strong> versioni anteriori di TalkBack si attivano con <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">metodi leggermente differenti</a>.</p> - -<p>Quando TalkBack è attivato, i controlli basici del tuo dispositivo Android presenteranno alcune differenze rispetto alla modalità normale. Per esempio:</p> - -<p> </p> - -<ol> - <li>Fare click sull’icona di una app la selezionerà senza aprirla, e il lettore pronuncerà il nome della app.</li> - <li>Fare swipe a destra o a sinistra farà selezionare un’altra app, oppure, se stai navigando un menu, un altro bottone/controllo. Il dispositivo leggerà ogni opzione man mano che le selezioni.</li> - <li>Fare doppio click aprirà la app selezionata o attiverà/disattiverà la opzione selezionata.</li> - <li>Puoi anche “esplorare col dito“: mantieni premuto il dito sullo schermo e fallo scorrere lungo la superficie dello stesso. Il dispositivo leggerà il nome delle varie app o oggetti su cui passerai il dito.</li> -</ol> - -<p>Se vuoi disattivare TalkBack:</p> - -<ol> - <li>Naviga alle <em>Impostazioni</em></li> - <li>Naviga a <em>Accessibilità > TalkBack</em>.</li> - <li>Naviga allo switch di attivazione/disattivazione e disattivalo.</li> -</ol> - -<p><strong>Nota:</strong> puoi navigare alla schermata di inizio in qualsiasi momento facendo swipe in alto e a sinistra lentamente. Se hai più di una schermata di inizio, puoi muoverti da una all’altra facendo swipe con due dita a destra e sinistra.</p> - -<p>Per una lista più completa dei gesti che puoi usare con TalkBack, vedi <a href="https://support.google.com/accessibility/android/answer/6151827?hl=it">Utilizzare i gesti TalkBack</a>.</p> - -<h4 id="Sbloccare_il_telefono"><strong>Sbloccare il telefono</strong></h4> - -<p>Quando TalkBack è attivato, la procedura per sbloccare il telefono cambia leggermente.</p> - -<p>Devi fare swipe con due dita dal basso verso l’alto. Se ci sono una password o un codice impostati, sarai reindirizzato allo schermo dove inserirli.</p> - -<p>Puoi anche esplorare con il dito, troverai il bottone di sblocco nel centro della parte bassa dello schermo. Fai doppio click sul bottone per sbloccare lo schermo.</p> - -<h4 id="Menu_globali_e_locali"><strong>Menu globali e locali</strong></h4> - -<p>TalkBack ti permette di accedere ai menu contestuali locali e globali del dispositivo da qualunque punto del sistema operativo. I menu globali sono quelli che permettono di accedere ai controlli e alle opzioni generali del dispositivo, mentre i menu locali sono relativi alla applicazione o schermata in cui ti trovi al momento.</p> - -<p>Per accedere ai menu:</p> - -<ol> - <li>Per accedere al menu globale, fai swipe veloce verso il basso e poi a destra.</li> - <li>Per accedere al menu locale, fai swipe veloce verso l’alto e poi a destra.</li> - <li>Fai swipe a sinistra o a destra per muoverti da una opzione all’altra.</li> - <li>Quando l’opzione che ti interessa è selezionata, fai doppio click per attivarla o disattivarla.</li> -</ol> - -<p>Per maggiori dettagli su tutte le opzioni disponibili nei menu locali e globali, vedi <a href="https://support.google.com/accessibility/android/answer/6007066?hl=it">Menu contestuali locali e globali</a>.</p> - -<h4 id="Navigare_pagine_web"><strong>Navigare pagine web</strong></h4> - -<p>Puoi usare il menu contestuale locale del browser per trovare le opzioni per navigare le pagine web usando gli headings, i campi dei formulari, i link, ecc., oppure navigare linea per linea.</p> - -<p>Per esempio, con TalkBack attivato:</p> - -<ol> - <li>Apri il tuo web browser.</li> - <li>Attiva la barra URL.</li> - <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: - <ul> - <li>Seleziona la barra URL facendo swipe a destra/sinistra fino a trovarla, e poi fai doppio click.</li> - <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per introdurlo. Ripeti il procedimento per ogni carattere.</li> - <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li> - </ul> - </li> - <li>Fai swipe a sinistra o destra per muoverti tra i differenti oggetti presenti sulla pagina.</li> - <li>Fai swipe in alto e a destra per aprire il menu contestuale locale.</li> - <li>Fai swipe a destra fino a trovare la opzione "Headings e punti di riferimento".</li> - <li>Fai doppio click per selezionarla. Ora puoi fare swipe a destra o sinistra per muoverti tra headings e punti di riferimento ARIA.</li> - <li>Per ritornare al modo di default, apri il menu contestuale locale facendo swipe in alto a destra, seleziona l’opzione “Default” e fai doppio click per attivarla.</li> -</ol> - -<p><strong>Nota:</strong> Vedi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=it&ref_topic=3529932">Guida introduttiva a TalkBack su Android</a> per una documentazione più completa.</p> - -<h3 id="iOS_VoiceOver">iOS VoiceOver</h3> - -<p> </p> - -<p>Una versione di VoiceOver per dispositivi mobili è inclusa in tutti i sistemi operativi iOS.</p> - -<p>Per attivarlo, vai alla tua app<em>Impostazioni</em>e seleziona<em>Generale>Accessibilità>VoiceOver</em>. Premi lo switch<em>VoiceOver</em>per attivarlo (vedrai anche alcune altre opzioni relative a VoiceOver in questa pagina).</p> - -<p>Quando VoiceOver sarà attivato, i controlli basici del sistema saranno leggermente diversi:</p> - -<p> </p> - -<ol> - <li>Un click singolo selezionerà l’oggetto su cui premi; il dispositivo pronuncerà il nome dell’oggetto selezionato.</li> - <li>Puoi inoltre navigare tra gli oggeti presenti sullo schermo facendo swipe a destra o sinistra per muoverti dall’uno all’altro, o facendo scorrere il dito per lo schermo. Quando troverai l’oggetto che vuoi attivare, rimuovi il dito dallo schermo per selezionarlo.</li> - <li>Per attivare l’oggetto dopo averlo selezionato, per esempio se vuoi aprire una applicazione, fai doppio click in qualsiasi punto dello schermo.</li> - <li>Fai swipe con tre dita per scorrere attraverso una pagina.</li> - <li>Fai click con due dita per eseguire una azione relativa al contesto corrente, come per esempio scattare una foto con la applicazione fotocamera aperta.</li> -</ol> - -<p>Per disattivare VoiceOver, naviga a<em>Impostazioni</em>><em>Generale</em>><em>Accessibilità</em>><em>VoiceOver</em> e premi lo switch<em>VoiceOver</em>.</p> - -<h4 id="Come_usare_il_Rotore"><strong>Come usare il Rotore</strong></h4> - -<p>Quando VoiceOver è attivo, avrai a tua disposizione una funzionalità dei navigazione chiamata Rotore, che ti permette di accedere rapidamente ad alcune opzioni di uso comune. Per usarlo:</p> - -<h4 id="Using_the_Rotor">Using the Rotor</h4> - -<p>When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:</p> - -<ol> - <li>Muovi due dita in circolo per lo schermo, come se stessi usando un vecchio telefono a disco. Il dispositivo pronuncerà il nome delle varie opzioni una dopo l’altra man mano che vai muovendo le dita. Puoi andare avanti e indietro mentre il dispositivo passa da un’opzione all’altra ciclicamente.</li> - <li>Quando hai trovato l’opzione che ti interessa: - <ul> - <li>Rimuovi le dita dallo schermo per selezionarla.</li> - <li>Se si tratta di una opzione il cui valore è aumentabile/diminuibile, come per esempio il Volume o la Velocità di Locuzione, puoi fare swipe verso l’alto o verso il basso per aumentare o diminuire il valore dell’opzione selezionata.</li> - </ul> - </li> -</ol> - -<p>Le opzioni disponibili tramite il Rotore dipendono dal contesto: quando apri il Rotore le opzioni che troverai saranno relative all’applicazione o alla schermata in cui ti trovi (vedi qui sotto per un esempio).</p> - -<h4 id="Navigare_pagine_web_2"><strong>Navigare pagine web</strong></h4> - -<p>Vediamo come navigare in internet usando VoiceOver:</p> - -<ol> - <li>Apri il tuo browser.</li> - <li>Attiva la barra URL.</li> - <li>Introduci l’url di una pagina web che ha una serie di headings, come per esempio la pagina bbc.co.uk. Per introdurre il testo dell’URL: - <ul> - <li>Seleziona la barra URL facendo swipe a destra o a sinistra fino a trovarla, e poi fai doppio click.</li> - <li>Mantieni il dito premuto sulla tastiera virtuale fino a quando trovi il carattere che vuoi scrivere, e rilascia il dito per selezionarlo. Fai doppio click per introdurlo. Ripeti il procedimento per ogni carattere.</li> - <li>Quando hai terminato, seleziona il tasto INVIO e premilo.</li> - </ul> - </li> - <li>Fai swipe a sinistra e a destra per muoverti tra i differenti oggetti presenti sulla pagina. Fai doppio click su un oggetto per selezionarlo (per esempio, per seguire un link).</li> - <li>L’opzione del Rotore selzionata per default è la Velocità di Locuzione; puoi fare swipe in su o in giù per aumentare o diminuire la velocità di locuzione del lettore di schermo.</li> - <li>Ora muovi due dita in circolo per lo schermo per aprire il Rotore e far scorrere le sue opzioni. Riportiamo qui alcuni esempi delle opzioni disponibili nel Rotore: - <ul> - <li><em>Velocità di locuzione</em>: cambia la velocità di locuzione del dispositivo.</li> - <li><em>Contenitori</em>: il lettore di schermo si muove per i vari contenitori semantici presenti nella pagina.</li> - <li><em>Headings</em>: il lettore di schermo si muove per i vari heading presenti nella pagina.</li> - <li><em>Links</em>: il lettore di schermo si muove per i vari link presenti nella pagina.</li> - <li><em>Controlli formulario</em>: il lettore di schermo si muove per i vari campi dei formulari presenti nella pagina.</li> - <li><em>Lingue</em>: cambia la lingua della pagina, se sono disponibili differenti traduzioni.</li> - </ul> - </li> - <li>Seleziona <em>Headings</em>. Ora potrai fare swipe in su e in giù per muoverti da un heading all’altro della pagina.</li> -</ol> - -<p><strong>Nota:</strong> per un riferimento più completo sui gesti disponibili in VoiceOver e altri suggerimenti sul testing dell’accessibilità in iOS, vedi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> - -<h2 id="Meccanismi_di_controllo"><strong>Meccanismi di controllo</strong></h2> - -<p>Nel nostro articolo sull’accessibilità in CSS e JavaScript abbiamo preso in considerazione eventi che sono associati a specifici meccanismi di controllo (vedi <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">eventi specifici del mouse</a><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Altri_problemi_di_accessibilità_con_JavaScript">del mouse</a>). Per ricapitolare, tali eventi causano problemi di accessibilità, perchè altri meccanismi di controllo non possono attivare le funzionalità ad essi associate.</p> - -<p>Ad esempio, l’evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> è ottimale in termini di accessibilità: un gestore di eventi associato ad esso può essere attivato cliccando con il mouse sull’elemento su cui l’evento è impostato, oppure selezionandolo tramite tasto TAB e premendo INVIO, oppure facendo click con un dito su un touchscreen. Prova il nostro <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">esempio-di-bottone-semplice.html</a> (<a href="https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">vedi la versione live</a>) per capire di cosa parliamo.</p> - -<p>Altri eventi simili, come <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> e <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> possono creare problemi, in quanto i loro gestori di eventi non possono essere attivati usando controli alternativi al mouse.</p> - -<p>Se provi a controllare il nostro esempio di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">vedi la versione live</a>) tramite tastiera o touchscreen, capirai qual è il problema. Ciò succede perchè stiamo usando un codice come il seguente:</p> - -<pre><code>div.onmousedown = function() { - initialBoxX = div.offsetLeft; - initialBoxY = div.offsetTop; - movePanel(); -} - -document.onmouseup = stopMove;</code></pre> - -<p>Per abilitare altre forme di controllo, devi usare eventi alternativi equivalenti. Per esempio, gli eventi touch sono pensati specificamente per i dispositivi con touchscreen:</p> - -<pre><code>div.ontouchstart = function(e) { - initialBoxX = div.offsetLeft; - initialBoxY = div.offsetTop; - positionHandler(e); - movePanel(); -} - -panel.ontouchend = stopMove;</code></pre> - -<p>Presentiamo qui un semplice esempio che mostra come usare gli eventi mouse e touch insieme. Vedi <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">vedi la versione liveee the example live</a>).</p> - -<p><strong>Nota:</strong> puoi vedere esempi di come implementare differenti meccanismi di controllo nell’articolo in inglese <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> - -<h2 id="Disegno_responsivo"><strong>Disegno responsivo</strong></h2> - -<p> </p> - -<p>Il disegno responsivo è la pratica di realizzare layout e altre caratteristiche delle applicazioni in una forma che cambia dinamicamente secondo alcuni fattori come le dimensioni dello schermo e la risoluzione dello stesso, di modo che le applicazioni siano usabili e accessibili a utenti che usano differenti tipi di dispositivi.</p> - -<p>In particolare, gli aspetti più comuni del disegno responsivo che si devono prendere in considerazione per i dispositivi mobili sono:</p> - -<p> </p> - -<ul> - <li>Idoneità dei layout per dispositivi mobili. Un layout a colonne multiple, per esempio, solitamente non funzionerà molto bene in schermi di dimensioni ridotte. Inoltre potrebbe essere necessario incrementare le le dimensioni dei caratteri perchè siano leggibili. Tali problemi possono essere risolti creando un layout responsivo, facendo uso di tecnologie come <a href="https://developer.mozilla.org/it/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, e <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> - <li>Dimensioni delle immagini. In generale, i dispositivi con schermi di dimensioni ridotte non necessitano di immagini grandi come quelle che si usano per i monitor dei pc, e inoltre spesso navigano usando connessioni lente. È dunque opportuno fare in modo che la nostra applicazione usi immagini più piccole quando viene visualizzata su schermi di dimensioni ridotte. Per sapere come ottenere ciò, usa <a href="https://developer.mozilla.org/it/docs/Learn/HTML/Multimedia_and_embedding/immagini_reattive">tecniche responsive per immagini</a>.</li> - <li>Schermi ad alta risoluzione. Molti dispositivi mobili hanno schermi ad alta risoluzione, e per fare in modo che su tali schermi le immagini si visualizzino senza sfocature è necessario usare immagini ad alta risoluzione. Ancora una volta, puoi fare ricorso a tecniche responsive per immagini. Inoltre, puoi ricorrere a immagini vettoriali in SVG, un formato che ha un supporto molto ampio nei browser moderni. Gli SVG hanno un peso ridotto e mantengono invariata la qualità dell’immagine, a prescindere dalle dimensioni in cui vengono visualizzati. Vedi l'articolo in inglese <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Usare immagini vettoriali sul web</a> per maggiori dettagli.</li> -</ul> - -<p><strong>Nota:</strong> non forniremo una spiegazione dettagliata delle tecniche di disegno responsivo qui, dato che sono già trattate in altri articoli presenti su questo sito (vedi i link qui sopra).</p> - -<h3 id="Considerazioni_specifiche_per_dispositivi_mobili">Considerazioni specifiche per dispositivi mobili</h3> - -<p>Ci sono altri importanti aspetti da prendere in considerazione per ottimizzare l’accessibilità dei siti sui dispositivi mobili. Riportiamo due esempi qui sotto, e in futuro speriamo di riuscire ad aggiungerne altri.</p> - -<h4 id="Non_disabilitare_lo_zoom"><strong>Non disabilitare lo zoom</strong></h4> - -<p>Utilizzando <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, è possibile disabilitare la funzionalità di zoom, ponendo il seguente codice nella <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/head" title="The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets."><head></a>:</p> - -<pre><code><meta name="viewport" content="user-scalable=no"></code></pre> - -<p>Non dovresti mai farlo, a meno che sia strettamente necessario. Molte persone infatti usano lo zoom per migliorare la visibilità e leggibilità del contenuto, e privare i tuoi utenti di tale possibilità non è una buona pratica. Ci sono alcune situazioni in cui l’uso dello zoom può effettivamente danneggiare la struttura dell’interfaccia utente; in tali casi, se davvero ritieni necessario disabilitare lo zoom, dovresti fornire una funzionalità equivalente, come per esempio dei controlli per aumentare le dimensioni del testo senza alterare altri elementi dell’interfaccia utente.</p> - -<h4 id="Accessibilità_dei_menu"><strong>Accessibilità dei menu</strong></h4> - -<p>È una pratica molto comune, quando un sito viene visualizzato su un dispositivo con schermo di dimensioni ridotte, usare media queries per ridurre il menu di navigazione a un semplice bottone o una icona, che quando vengono premuti si espandono mostrando gli elementi del menu in forma di menu drop-down, o menu a tendina. Di solito si utilizza una icona con tre linee orizzontali, nota come "menu ad hamburger".</p> - -<p> </p> - -<p>Quando implementi un menu di questo tipo, devi assicurarti che l’”hamburger” sia accessibile con gli appropriati meccanismi di controllo (normalmente su dispositivo mobile vi si accede tramite touch), come discusso in {{anch("Meccanismi di controllo")}} più sopra, e che il resto della pagina sia nascosto o comunque disabilitato mentre il menu sia attivo, per evitare confusione durante l’utilizzo dello stesso.</p> - -<p>Qui puoi trovare <a href="http://fritz-weisshart.de/meg_men/">un buon esempio di menu ad hamburger</a>.</p> - -<h2 id="Input_dell’utente"><strong>Input dell’utente</strong></h2> - -<p>Quando si usano dispositivi mobili, inserire dati è di solito un’esperienza più lenta e tediosa che il suo equivalente su pc o laptop. È molto più facile scrivere con una tastiera normale che con una virtuale o una di dimensioni ridotte.</p> - -<p>Per tale ragione, vale la pena cercare di minimizzare il più possibile la quantità di dati da introdurre manualmente sui dispositivi mobili. Per esempio, se vuoi che gli utenti specifichino qual è il loro lavoro, invece di usare un campo di testo aperto puoi usare un menu a selezione {{htmlelement("select")}} contenente le opzioni più comuni (cosa che tra l’altro aiuta anche a migliorare la consistenza dei dati), e offrire tra le opzioni una categoria “Altro” che, se selezionata, fa comparire un campo di testo dove l’utente può scrivere liberamente per specificare la sua occupazione. Puoi vedere un esempio di questa idea alla pagina <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">tipi-di-lavoro-comuni</a> (vedi la <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">versione live</a>).</p> - -<p>Inoltre, vale la pena prendere in considerazione l’uso di tipi di input HTML5 nativi, come per esempio il tipo “date”, che su dispositivi mobili Androd e iOS vengono gestiti automaticamente da widget nativi integrati all’interfaccia che l’utente è già abituato a usare sul dispositivo. Vedi <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">esempi-formulari-html5.html</a> per alcuni esempi (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">versione live</a>). Prova a visualizzare e usare questi esempi su un dispositivo mobile.</p> - -<p> </p> - -<p>Alcuni esempi di tipi di input HTML5 e come appaiono quando sono usati da dispositivo mobile:</p> - -<p> </p> - -<ul> - <li>I tipi <code>number</code>, <code>tel</code>, e <code>email </code>quando selezionati fanno apparire una tastiera virtuale adatta all’inserimento di numeri o numeri di telefono.</li> - <li>I tipi <code>time </code>e <code>date </code>fanno apparire widget di tipo orologio o calendario per la selezione rapida di una ora o una data.</li> -</ul> - -<p>Se vuoi fornire una versione della tua applicazione specifica per dispositivi mobili e diversa da quella per pc e laptop, puoi usare una tecnologia di feature detection per rilevare il tipo di dispositivo su cui l’applicazione viene visualizzata. Vedi l’articolo in inglese <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> per maggiori informazioni sui differenti tipi di input, e anche il nostro articolo in inglese sulla <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection</a>.</p> - -<h2 id="Riassunto"><strong>Riassunto</strong></h2> - -<p>In questo articolo abbiamo riportato alcuni dettagli sui più comuni problemi di accessibilità su dispositivi mobili, e alcune linee guida su come superarli. Abbiamo inoltre fornito indicazioni sull’uso dei più comuni lettori di schermo per dispositivi mobili, per aiutarti nella realizzazione di test di accessibilità.</p> - -<h2 id="Vedi_anche"><strong>Vedi anche</strong></h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Linee guida per lo sviluppo web mobile</a> (in inglese) — Una lista di articoli in inglese presenti sul sito <em>Smashing Magazine</em> che illustrano differenti tecniche di disegno web per dispositivi mobili.</li> - <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Fai funzionare il tuo sito sui dispositivi touch</a> (in inglese) — Utile articolo in inglese sull’utilizzo degli eventi touch per il corretto funzionamento delle interazioni dell’utente con l’applicazione sui dispositivi mobili.</li> -</ul> - -<div>{{PreviousMenuNext("Learn/Accessibilità/Multimedia","Learn/Accessibilità/Accessibility_troubleshooting", "Learn/Accessibilità")}}</div> - -<div> -<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> -</div> -</div> diff --git a/files/it/learn/accessibility/multimedia/index.html b/files/it/learn/accessibility/multimedia/index.html deleted file mode 100644 index fe0f6d872e..0000000000 --- a/files/it/learn/accessibility/multimedia/index.html +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: Accessibilità multimediale -slug: Learn/Accessibility/Multimedia -tags: - - Accessibilità - - Articolo - - Audio - - Didascalie - - HTML - - Immagine - - JavaScript - - Multimedia - - Principiante - - Sottotitoli - - Tracce testuali - - Video -translation_of: Learn/Accessibility/Multimedia -original_slug: Learn/Accessibilità/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> diff --git a/files/it/learn/accessibility/wai-aria_basics/index.html b/files/it/learn/accessibility/wai-aria_basics/index.html deleted file mode 100644 index 05a7ea4b5f..0000000000 --- a/files/it/learn/accessibility/wai-aria_basics/index.html +++ /dev/null @@ -1,423 +0,0 @@ ---- -title: Basi della tecnologia WAI-ARIA -slug: Learn/Accessibility/WAI-ARIA_basics -tags: - - ARIA - - Accessibilità - - Articolo - - Guida - - HTML - - HTML semantico - - JavaScript - - Principiante - - WAI-ARIA -translation_of: Learn/Accessibility/WAI-ARIA_basics -original_slug: Learn/Accessibilità/WAI-ARIA_basics ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</div> - -<p class="summary">Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.</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, aver letto <a href="/it/docs/Learn/Accessibilità">i precedenti articoli del corso</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Acquisire familiarità con la tecnologia WAI-ARIA e imparare a usarla dove necessario per fornire valore semantico addizionale che migliori l'accessibilità.</td> - </tr> - </tbody> -</table> - -<h2 id="Cosa_è_WAI-ARIA">Cosa è WAI-ARIA?</h2> - -<p>Cominciamo col dare un'occhiata a cosa è WAI-ARIA, e in che modo ci può essere utile.</p> - -<h3 id="Un_nuovo_set_di_problemi">Un nuovo set di problemi</h3> - -<p>Man mano che le applicazioni web cominciarono ad essere sempre più complesse e dinamiche, nuovi problemi di accessibilità iniziarono a manifestarsi.</p> - -<p>Per esempio, HTML5 ha introdotto alcuni elementi semantici per definire componenti di uso comune nelle pagine ({{htmlelement("nav")}}, {{htmlelement("footer")}}, ecc.). Prima dell'arrivo di questi elementi, gli sviluppatori si limitavano a usare {{htmlelement("div")}} con ID o classi, per esempio <code><div class="nav"></code>. Ma questi elementi erano problematici, perchè non fornivano un sistema standard per individuare programmaticamente i componenti di una pagina, dunque i lettori di schermo non potevano distinguere chiaramente le varie sezioni da cui la pagina era composta. </p> - -<p>La soluzione inizialmente consisteva nell’aggiungere uno o più link nascosti nella parte alta della pagina. Tali link reindirizzavano alle varie sezioni della pagina, come per esempio la barra di navigazione:</p> - -<pre class="brush: html"><a href="#hidden" class="hidden">Vai alla barra di navigazione</a></pre> - -<p> </p> - -<p>Ma questo sistema non è molto preciso, e può essere usato solo quando il lettore di schermo comincia a leggere dalla parte alta della pagina.</p> - -<p>Per fare un altro esempio, ad un certo punto le applicazioni cominciarono a includere controlli complessi come selezionatori di data o slider per selezionare valori. HTML5 mette a disposizione alcuni tipi speciali di input nativi, specifici per tali controlli:</p> - -<pre class="brush: html"><input type="date"> -<input type="range"></pre> - -<p>Ma questi elementi non sono supportati da tutti i browser, ed inoltre sono molto difficili da personalizzare, rendendoli complicati da integrare nel disegno di un sito. Di conseguenza, gli sviluppatori spesso fanno uso di librerie JavaScript e creano tali controlli come una serie di {{htmlelement("div")}} annidati o elementi di una tabella a cui assegnano classi, e in seguito li personalizzano con CSS e li controllano con funzioni di JavaScript.</p> - -<p>Il problema di questo metodo è che i lettori di schermo non riescono ad interpretare di cosa si tratta, e riportano solo la presenza di una serie di elementi dei quali non possono descrivere la funzione.</p> - -<h3 id="E_arrivò_WAI-ARIA">E arrivò WAI-ARIA</h3> - -<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi per fornire maggior valore semantico e migliorare l'accessibilità dovunque sia necessario. Ci sono tre caratteristiche principali definite nella raccolta: </p> - -<ul> - <li><strong>Ruoli </strong>— I ruoli (role) definiscono cosa un elemento è e qual è la sua funzione. Molti sono cosiddetti ruoli di riferimento, che in sostanza replicano il valore semantico degli elementi HTML5. Per esempio<code> role="navigation" </code>({{htmlelement("nav")}}) che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/nav" title="L'elemento HTML nav (<nav>) rappresenta una sezione della pagina che contiene link ad altre pagine o a parti della pagina corrente: una sezione di navigazione."><nav></a>, o <code>role="complementary"</code> ({{htmlelement("aside")}}), che corrisponde a <a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/aside" title="L'elemento HTML <aside> rappresenta una sezione della pagina il cui contenuto è connesso solo marginalmente al resto della pagina, e che dovrebbe essere considerato separato dal resto del contenuto. Queste sezioni sono spesso usate come sidebar. Spesso co"><aside></a>. Ma ce ne sono anche altri che definiscono diverse strutture della pagina che si trovano comunemente nelle IU (Interfacce Utente), come <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, ecc.</li> - <li><strong>Proprietà </strong>— Si tratta delle proprietà degli elementi, che si possono usare per dare agli stessi un significato extra. Per esempio, <code>aria-required="true"</code> specifica che il campo di un formulario deve essere obbligatoriamente compilato per essere valido, mentre <code>aria-labelledby="label"</code> permette di assegnare una ID a un elemento e in seguito usare l'elemento come etichetta per qualsiasi altro elemento nella pagina, anche per multipli elementi allo stesso tempo, cosa che non è possibile con <code><label for="input"></code>. Per esempio, potresti usare aria-labelledby per specificare che una descrizione contenuta in un {{htmlelement("div")}} si usi come etichetta per multiple celle di una tabella, o come testo alternativo di una immagine, senza doverlo ripetere nell'attributo <code>alt</code>. Puoi vedere un esempio d'uso nella sezione Alternative testuali.</li> - <li><strong>Stati</strong> — GLi stati sono proprietà speciali che definiscono le condizioni correnti degli elementi, come per esempio <code>aria-disabled="true"</code>, che specifica a un lettore di schermo che un campo di input di un formulario è al momento disabilitato. Gli stati si distinguono dalle proprietà per il fatto che le proprietà non cambiano durante il ciclo vitale di un'applicazione, mentre gli stati possono essere cambiati, in genere tramite l'uso di JavaScript.</li> -</ul> - -<p>Un punto importante da tenere in considerazione riguardo gli attributi WAI-ARIA è che non influiscono in alcun modo sulla pagina, eccetto che sulle informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di schermo prendono le informazioni). WAI-ARIA non cambia la struttura della pagina, il DOM o altro, anche se i suoi attributi possono essere utili per selezionare gli elementi in CSS.</p> - -<div class="note"> -<p><strong>Nota</strong>: puoi trovare una utile lista di tutti i ruoli ARIA e i loro usi, con link a informazioni più approfondite, nella specifica WAI-ARIA: vedi <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definizione di Ruoli </a>(in inglese).</p> - -<p>La specifica contiene anche una lista delle proprietà e degli stati, con link ad ulteriori informazioni. Vedi <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definizioni di Stati e Proprietà</a> (in inglese).</p> -</div> - -<h3 id="Dove_è_supportata_WAI-ARIA">Dove è supportata WAI-ARIA?</h3> - -<p>A questa domanda non è facile rispondere. È difficile trovare una risorsa che indichi in maniera completa quali funzionalità di WAI-ARIA sono supportate e dove, perchè:</p> - -<ol> - <li>Ci sono molte funzionalità nella specifica WAI-ARIA.</li> - <li>Ci sono moltissime combinazioni possibili di sistemi operativi, browser e lettori di schermo.</li> -</ol> - -<p>L'ultimo punto è fondamentale: per poter usare un lettore di schermo il tuo sistema operativo deve avere installato almeno un browser con la necessaria API di accessibilità, che fornisca ai lettori di schermo le informazioni necessarie perchè funzionino. La maggior parte dei sistemi operativi ha di serie uno o due browser che funzionano con i lettori di schermo. Sul sito di Paciello Group si può trovare una guida aggiornata costantemente che fornisce dati sul supporto dei lettori di schermo nei vari sistemi operativi. Vedi l'articolo (in inglese) <a href="https://developer.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Guida: browser, sistemi operativi e supporto per i lettori di schermo</a>.</p> - -<p>Il seguente passo è assicurarsi che i browser usati supportino la tecnologia ARIA e la trasmettano tramite le loro API, ma anche che i lettori di schermo riconoscano le informazioni che ricevono e le presentino agli utenti in una forma ottimale.</p> - -<ol> - <li>Il supporto dei browser in generale è molto buono. Al momento della stesura di questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-ARIA nei vari browser di circa l'88%.</li> - <li>Il supporto di ARIA nei lettori di schermo non è al momento a un livello comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per migliorare la compatibilità con WAI-ARIA. Puoi farti un'idea del livello di supporto leggendo l'articolo (in inglese) <a href="https://www.powermapper.com/tests/screen-readers/aria/">Compatibilità dei lettori di schermo con WAI-ARIA</a> .</li> -</ol> - -<p>In questo articolo non spiegheremo tutte le funzionalità di WAI-ARIA e i dettagli sul supporto che hanno. Cercheremo invece di presentare le funzionalità più importanti e utili agli sviluppatori web; in generale se non facciamo riferimento al livello di supporto di una funzionalità, puoi considerare che il supporto è ragionevolmente buono. In caso di eccezioni lo indicheremo esplicitamente.</p> - -<div class="note"> -<p><strong>Nota</strong>: alcune librerie JavaScript supportano WAI-ARIA. Ciò significa che quando generano elementi IU, come per esempio formulari complessi, aggiungono automaticamente attributi ARIA per migliorarne l'accessibilità. Se stai valutando l'utilizzo di una libreria Javascript per sviluppare elementi IU più rapidamente, dovresti tenere in conto il livello di accessibilità della libreria quando scegli quale usare. Buoni esempi sono jQuery UI (vedi l'articolo in inglese <a href="https://jqueryui.com/about/#deep-accessibility-support">jQuery UI: supporto all'accessibilità</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, e <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> -</div> - -<h3 id="Quando_dovresti_usare_WAI-ARIA">Quando dovresti usare WAI-ARIA?</h3> - -<p>Abbiamo già discusso di alcuni dei problemi che hanno spinto alla creazione di WAI-ARIA, dovuti soprattutto alla crescente complessità delle moderne applicazioni web. Essenzialmente ci sono 4 grandi aree in cui WAI-ARIA è utile: </p> - -<ol> - <li><strong>Indicatori/riferimenti</strong>: gli attributi <code>role</code> possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio {{htmlelement("nav")}}), oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, ecc.</li> - <li><strong>Aggiornamento dinamico del contenuto</strong>: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare <code>aria-live</code> per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a> .</li> - <li><strong>Migliorare l'accessibilità da tastiera</strong>: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano" in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali elementi (usando <code>tabindex</code>).</li> - <li><strong>Accessibilità dei controlli non semantici</strong>: quando si usano una serie di <code><div></code> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire le indicazioni necessarie tramite una combinazione di ruoli come <code>button</code>, <code>listbox</code>, o <code>tabgroup</code>, e proprietà come <code>aria-required</code> o <code>aria-posinset</code>.</li> -</ol> - -<p>Ricorda: <strong>dovresti ricorrere a WAI-ARIA solo quando è necessario!</strong> Idealmente, dovresti usare <em>sempre</em> <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">funzionalità HTML native</a> per fornire le indicazioni semantiche necessarie ai lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità. </p> - -<p>Ma ricorda, usala solo quando è necessario!</p> - -<div class="note"> -<p><strong>Nota</strong>: cerca di testare il tuo sito con la maggior varietà possibile di utenti reali: persone non disabili, persone che usano lettori di schermo, persone che navigano con la tastiera, ecc. Queste persone sapranno indicarti cosa funziona e cosa no in maniera molto più accurata di ciò che può emergere se ti limiti ad effettuare test di utilizzo in prima persona.</p> -</div> - -<h2 id="Esempi_di_uso_pratico_di_WAI-ARIA">Esempi di uso pratico di WAI-ARIA </h2> - -<p>Nella prossima sezione analizzeremo le 4 aree di utilizzo di WAI-ARIA più dettagliatamente, e forniremo alcuni esempi pratici. Prima di continuare però, dovresti attivare un lettore di schermo, per poter testare alcuni degli esempi.</p> - -<p>Vedi la sezione (in inglese) sul <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing con lettori di schermo</a> per maggiori informazioni.</p> - -<h3 id="Indicatoririferimenti">Indicatori/riferimenti</h3> - -<p>WAI-ARIA trasmette ai browser l'attributo <code>role</code>, che permette di aggiungere valore semantico extra agli elementi del tuo sito dovunque sia necessario. La principale utilità di questo attributo è che permette agli utenti che usano lettori di schermo di individuare più facilmente gli elementi più comuni delle pagine. Vediamo un esempio: il nostro <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">sito senza attributi role</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">versione live</a>) ha la seguente struttura:</p> - -<pre class="brush: html"><header> - <h1>...</h1> - <nav> - <ul>...</ul> - <form> - <!-- search form --> - </form> - </nav> -</header> - -<main> - <article>...</article> - <aside>...</aside> -</main> - -<footer>...</footer></pre> - -<p>Se provi a navigare il sito con un lettore di schermo in un browser moderno, riceverai diverse informazioni utili. Per esempio, VoiceOver fornisce le seguenti indicazioni:</p> - -<ul> - <li>Riguardo l'elemento <code><header></code> — "banner, 2 oggetti" (contiene un heading h1 e la barra di navigazione <code><nav></code>).</li> - <li>Riguardo l'elemento <code><nav></code> — "navigazione, 2 oggetti" (contiene una lista e un formulario).</li> - <li>Riguardo l'elemento <code><main></code> — "principale, 2 oggetti" (contiene un articolo e una barra di navigazione laterale).</li> - <li>Riguardo l'elemento <code><aside> </code>— "complementario, 2 oggetti" (contiene un heading h2 e una lista).</li> - <li>Riguardo il campo di ricerca — "Funzione ricerca, casella di testo".</li> - <li>Riguardo l'elemento <code><footer></code> — "pié di pagina 1 oggetto".</li> -</ul> - -<p>Se ti rechi nella sezione Rotore di VoiceOver (premendo VO-U), vedrai che la maggior parte degli elementi più importanti sono elencati ordinatamente e si può accedere ad essi rapidamente.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> - -<p>Ma in realtà, la situazione è migliorabile. Il campo di ricerca è un punto di riferimento importante che gli utenti vorranno trovare, ma non compare nella lista degli elementi e non è trattato come un elemento di riferimento, a parte l'indicazione che si tratta di una casella di ricerca (<code><input type="search"></code>). Inoltre, alcuni browser più vecchi (per esempio IE8), non riconoscono le indicazioni semantiche degli elementi HTML5. </p> - -<p>Possiamo migliorare il tutto usando alcune funzionalità ARIA. Per prima cosa aggiungiamo alcuni attributi role alla nostra struttura HTML. Il nostro <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">esempio di sito con ruoli aria</a> (vedi la <a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">versione live</a>) ha la seguente struttura:</p> - -<pre class="brush: html"><header> - <h1>...</h1> - <nav role="navigation"> - <ul>...</ul> - <form role="search"> - <!-- search form --> - </form> - </nav> -</header> - -<main> - <article role="article">...</article> - <aside role="complementary">...</aside> -</main> - -<footer>...</footer></pre> - -<p>C'è anche una funzionalità bonus in questo esempio: all'elemento {{htmlelement("input")}} è stato assegnato l'attributo <code>aria-label</code>, che fornisce ai lettori di schermo un’etichetta descrittiva, anche se non abbiamo incluso un elemento {{htmlelement("label")}}. In casi come questo è molto utile usare l’attributo ARIA. Un campo di ricerca è infatti un elemento molto comune e facilmente riconoscibile, e aggiungere una etichetta visuale potrebbe danneggiare il disegno della pagina.</p> - -<pre class="brush: html"><input type="search" name="q" placeholder="Scrivi qui ciò che vuoi cercare" aria-label="Campo per cercare nel contenuto del sito"></pre> - -<p>Se ora usiamo VoiceOver per navigare il sito d'esempio, notiamo alcuni miglioramenti:</p> - -<ul> - <li>Il campo di ricerca viene indicato come un elemento separato, sia mentre si naviga la pagina sia nella sezione Rotore.</li> - <li>Il testo contenuto nell'attributo <code>aria-label</code> viene letto quando il campo riceve focus.</li> -</ul> - -<p>Inoltre, il sito è ora maggiormente accessibile per utenti che navigano con browser antiquati come IE8; vale la pena includere ruoli ARIA anche per questo. E se per caso il tuo sito è stato costruito usando solo elementi <code><div></code>, dovresti decisamente includere i ruoli ARIA per fornire le necessarie semantiche!</p> - -<p>Il valore semantico migliorato del campo di ricerca ha mostrato cosa è possibile fare quando ARIA va oltre le semantiche disponibili con HTML5. Potrai sapere molto di più sulle semantiche e il potere delle proprietà/attributi ARIA qui sotto, specialmente nella sezione {{anch("Accessibilità dei controlli non semantici")}}. Per ora, vediamo come ARIA ci può aiutare a gestire gli aggiornamenti del contenuto dinamico.</p> - -<h3 id="Aggiornamenti_del_contenuto_dinamico">Aggiornamenti del contenuto dinamico</h3> - -<p>In generale tutto il contenuto caricato nel DOM può essere facilmente interpretato usando un lettore di schermo, dal contenuto testuale fino al testo alternativo delle immagini. I tradizionali siti statici con contenuto largamente testuale sono dunque facili da rendere accessibili alle persone con deficit visivo.</p> - -<p>Il problema è che le applicazioni web moderne spesso non sono composte da testo statico, di solito hanno una gran quantità di contenuto che si aggiorna dinamicamente, cioè contenuto che si agigorna senza che l'intera pagina si ricarichi, tramite meccanismi come <a href="/it/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/it/docs/Web/API/Fetch_API">Fetch</a>, o <a href="/it/docs/Web/API/Document_Object_Model">DOM APIs</a>. Queste aree del contenuto sono talvolta chiamate “aree vive”, o <strong>live regions</strong>.</p> - -<p>Consideriamo un esempio: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (vedi anche la <a href="https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">versione live</a>). In questo esempio troviamo un paragrafo contenente una citazione selezionata casualmente:</p> - -<pre class="brush: html"><section> - <h1>Citazione casuale</h1> - <blockquote> - <p></p> - </blockquote> -</section></pre> - -<p>JavaScript riceve tramite <code>XMLHttpRequest</code> un file JSON contenente una serie di citazioni con il rispettivo autore. Dopo che la prima citazone tratta dal file è stata caricata nel paragrafo si attiva un loop <code>setInterval()</code> che carica una nuova citazione nel paragrafo ogni 10 secondi:</p> - -<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> - -<p>Questo sistema funziona correttamente , ma non è ottimale in termini di accessibilità. Gli aggiornamenti del contenuto non sono rilevati dai lettori di schermo, e gli utenti che li usano non possono rendersi conto di ciò che sta succedendo. Questo esempio è molto basico, ma prova a immaginare cosa succederebbe se stessi creando una interfaccia utente più complessa, con molte aree del contenutto che si aggiornano costantemente, come una chat room, un gioco strategico o magari un sito di e-commerce con un carrello della spesa che si aggiorna con i prodotti selezionati dall'utente. Sarebbe impossibile utilizzare l'applicazione con un lettore di schermo, in assenza di un sistema che avverta gli utenti degli aggiornamenti del contenuto.</p> - -<p>Fortunatamente WAI-ARIA ci mette a disposizione un utile meccanismo per fornire tali avvertimenti, la proprietà <code>aria-live</code>. Applicarla a un elemento fa sì che i lettori di schermo leggano il contenuto che viene aggiornato. Con quanta frequenza il contenuto viene letto dipende dal valore assegnato:</p> - -<ul> - <li><code>off:</code> valore di default. Gli aggiornamenti non vengono annunciati.</li> - <li><code>polite</code>: gli aggiornamenti vengono annunciati solo quando l'utente è inattivo.</li> - <li><code>assertive</code>: gli aggiornamenti vengono annunciati all'utente il prima possibile.</li> - <li><code>rude</code>: gi aggiornamenti vengono annunciati istantaneamente, interrompendo ciò che l'utente sta facendo.</li> -</ul> - -<p>Generalmente, assegnare il valore <code>assertive</code> è sufficiente perchè gli aggiornamenti vengano annunciati in tempo reale, anche se nel caso di aggiornamenti di multiple aree di contenuto che avvengono allo stesso tempo i vari aggiornamenti saranno annunciati in sequenza, quindi con la possibilità di un breve ritardo sul tempo reale. Si raccomanda di usare <code>rude</code> solo per aggiornamenti ad alta priorità che devono "passare davanti" agli altri aggiornamenti in corso.</p> - -<p>Prova a realizzare una copia di <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, e modificare l'etichetta <code><section></code> così:</p> - -<pre class="brush: html"><section aria-live="assertive"></pre> - -<p>D'ora in poi il lettore di schermo leggerà il contenuto ogni volta che quest'ultimo sarà aggiornato.</p> - -<div class="note"> -<p><strong>Nota</strong>: : la maggior parte dei browser attiverà una security exception se provi ad effettuare un <code>XMLHttpRequest</code> da un URL <code>file://</code>. Per esempio se carichi il file direttamente nel browser (facendo doppio click). Per farlo funzionare, devi caricare il file a un server, per esempio usando <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Using_Github_pages">GitHub</a> (articolo in inglese), o un server locale come <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a> (articolo in inglese).</p> -</div> - -<p>C'è però una considerazione da tenere in conto: il lettore di schermo legge solo la parte del testo che viene aggiornata. È utile dunque che legga anche l'heading, per aiutare l'utente a ricordare quale sezione della pagina è stata aggiornata. Per farlo, possiamo aggiungere la proprietà <code>aria-atomic</code> alla sezione. Modifica la tua etichetta <code><section></code> così:</p> - -<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> - -<p>L'attributo <code>aria-atomic="true"</code> indica al lettore di schermo che deve leggere l'intero contenuto dell'elemento, non solo le parti che sono state aggiornate. </p> - -<div class="note"> -<p><strong>Nota</strong>: : puoi vedere l'esempio completo qui: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (vedi anche la <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">versione live</a>).</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: : la proprietà <code>aria-relevant</code> è utile per controllare cosa viene letto quando un'area di contenuto viene aggiornata. Per esempio puoi far si che siano lette solo le parti aggiunte o al contrario le parti rimosse dal contenuto.</p> -</div> - -<h3 id="Migliorare_l'accessibilità_da_tastiera">Migliorare l'accessibilità da tastiera</h3> - -<p>Come abbiamo già detto in altri articoli di questo modulo, uno dei punti forti di HTML in termini di accessibilità è che implementa automaticamente l'accessibilità da tastiera per funzionalità come i bottoni, i campi dei formulari e i link. In generale, puoi sempre usare il tasto TAB per muoverti da un elemento all'altro e il tasto INVIO per selezionare o attivare gli elementi. In alcune circostanze puoi anche usare altri tasti (per esempio le frecce, per muoverti su e giù tra le opzioni di una lista <code><select></code>).</p> - -<p>Ciononostante, a volte ti troverai a dover scrivere codice che fa uso di elementi non semantici che compiono la funzione di bottoni (o altri tipi di elementi), o codice che usa elementi che possono ricevere focus per scopi diversi dal normale. Forse starai cercando di sistemare del codice mal scritto in precedenza, o di costruire un qualche tipo di widget complesso che richiede tecniche non ortodosse.</p> - -<p>Per rendere focalizzabili elementi che normalmente non lo sono, WAI-ARIA estende l'attributo <code>tabindex</code> con alcuni nuovi valori:</p> - -<ul> - <li><code>tabindex="0"</code> — come specificato in precedenza, questo valore rende "tabbabili" elementi che normalmente non lo sono. Questo è il valore più utile di <code>tabindex</code>.</li> - <li><code>tabindex="-1"</code> — questo valore permette ad elementi normalmente non tabbabili di ricevere focus programmaticamente, per esempio tramite JavaScript, o come destinazione di un link. </li> -</ul> - -<p>Abbiamo discusso questi valori in maggior dettaglio e mostrato una implementazione tipica nel nostro articolo sull'accessibilità in HTML, vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Implementare_l'accessibilità_da_tastiera_in_un_secondo_tempo">Implementare l'accessibilità da tastiera in un secondo tempo</a>.</p> - -<h3 id="Accessibilità_dei_controlli_non_semantici">Accessibilità dei controlli non semantici</h3> - -<p>Proseguendo con il tema trattato nella sezione precedente, quando si usa una serie di <code><div></code> annidati in congiunto con CSS o JavaScript per creare una funzionalità complessa per l’interfaccia utente, o se si cambia/migliora sostanzialmente un controllo nativo tramite JavaScript, non solo è possibile che l’accessibilità da tastiera ne risulti ridotta, ma anche per gli utenti che usano lettori di schermo potrebbero prodursi difficoltà a comprendere l’uso della funzionalità, se non ci sono indicazioni semantiche o altri indizi. In tali situazioni, ARIA può aiutare a fornire il valore semantico addizionale necessario. </p> - -<h4 id="Validazione_di_formulari_e_avvisi_di_errore"><strong>Validazione di formulari e avvisi di errore</strong></h4> - -<p>Innanzitutto, rivediamo l’esempio di formulario che avevamo preso in considerazione nell’articolo sull’accessibilità in CSS e JavaScript (vedi <a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Mantieni_un_uso_non_intrusivo_di_JavaScript">Mantieni un uso non intrusivo di JavaScript</a>). Alla fine di tale sezione abbiamo mostrato alcuni attributi ARIA che sono stati aggiunti al messaggio che appare se ci sono errori di validazione quando provi a inviare il formulario:</p> - -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> - -<ul> - <li><code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></u></code> trasforma automaticamente l’elemento a cui è applicato in una live region, di modo che i cambi applicati all’elemento vengono letti dal lettore di schermo; inoltre identifica semanticamente l’elemento come un messaggio di allerta (informazione importante relativa al momento/contesto), e rappresenta una migliore e più accessibile maniera di fornire un avviso a un utente (i dialoghi modali come le chiamate <code><u><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">alert()</a></u></code> presentano un certo numero di problemi di accessibilità; vedi l’articolo (in inglese) <u><a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a></u> scritto da WebAIM).</li> - <li>Il valore <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant="all"</a></u></code> indica al lettore di schermo che deve rileggere il contenuto della lista di errori ogni volta che si verificano cambi in essa, per esempio quando vengono aggiunti o rimossi errori. Ciò risulta utile, in quanto l’utente potrà essere sempre al corrente di quali errori sono presenti sulla lista, non solo di quali sono stati aggiunti o rimossi dalla stessa.</li> -</ul> - -<p>Possiamo ora procedere oltre con il nostro utilizzo di ARIA, e fornire ulteriore assitenza nella validazione dei dati. Per esempio, perchè non indicare dal principio quali campi sono obbligatori, e quale intervallo di età è permesso introdurre?</p> - -<ol> - <li>A questo punto, salva sul tuo dispositivo una copia dei files <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">validazione-formulario.html</a> e <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validazione.js</a>.</li> - <li>Aprili entrambi in un editor di testo e dai un’occhiata a come funziona il codice.</li> - <li>Per prima cosa, aggiungi un paragrafo come quello che vedi qui sotto giusto prima della etichetta di apertura del formulario <code><form></code>, e marca entrambe le etichette <code><label></code> del formulario con un asterisco. Questo è il metodo con cui normalmente si segnalano i campi obbligatori agli utenti che non hanno limitazioni visuali. - <pre class="brush: html"><p>I campi marcati con un asterisco (*) sono obbligatori.</p></pre> - </li> - <li>Questa indicazione è utile dal punto di vista visuale, ma non è facile da cogliere per gli utenti che usano lettori di schermo. Fortunatamente, WAI-ARIA fornisce l’attributo <u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></u> , che suggerisce al lettore di schermo di indicare all’utente quali sono i campi del formulario che devono essere compilati obbligatoriamente. Aggiorna gli elementi <code><input></code> come vedi qui sotto: </li> - <li> - <pre><code><input type="text" name="name" id="name" aria-required="true"> - -<input type="number" name="age" id="age" aria-required="true"></code></pre> - </li> - <li>A questo punto se salvi l’esempio e lo testi con un lettore di schermo dovresti ascoltare qualcosa come “Introduci il tuo nome asterisco, obbligatorio, modifica testo”.</li> - <li>Potrebbe inoltre risultare utile indicare agli utenti l’intervallo di anni dentro il quale dovrebbe situarsi il valore dell’età. Spesso tale valore si indica tramite un placeholder, ossia un valore indicativo che appare all’interno del campo quando non è ancora stato compilato. WAI-ARIA include le proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></u></code> per specificare un intervallo di valori minimo e massimo, ma queste proprietà al momento non hanno un supporto ampio; una caratteristica che gode di un migliore supporto è l’attributo HTML5 <code>placeholder</code>, che contiene un messaggio che viene mostrato nel campo quando l’utente non vi ha ancora introdotto nessun valore, e viene letto da un certo numero di lettori di schermo. Aggiorna il campo età come indicato qui: - <pre class="brush: html"><input type="number" name="age" id="age" placeholder="introduci un numero compreso tra 1 e 150" aria-required="true"></pre> - </li> -</ol> - -<div class="note"> -<p><strong>Nota</strong>: puoi vedere un esempio completo qui: <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">validazione-formulario-aggiornato.html</a>.</p> -</div> - -<p>WAI-ARIA permette inoltre alcune tecniche avanzate di etichettazione dei formulari, che vanno al di là del classico elemento {{htmlelement("label")}}. Abbiamo già discusso sull’utilizzo della proprietà <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> per rendere un’etichetta {{htmlelement("label")}} invisibile agli utenti che non usano lettori di schermo (vedi la sezione <code><a href="https://developer.mozilla.org/it/docs/Learn/Accessibilit%C3%A0/WAI-ARIA_basics/Indicatori/riferimenti">Indicatori/riferimenti</a></code> sopra). Ci sono anche altre tecniche di etichettazione che fanno uso di proprietà come <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></u></code>, se vuoi usare un elemento non-<code><label></code> come etichetta o se vuoi etichettare multipli campi del formulario con la stessa etichetta, e <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></u></code>, se vuoi associare informazione aggiuntiva a un campo del formulario e vuoi che il lettore di schermo la legga. Vedi l’articolo in inglese <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling</a> per maggiori dettagli.</p> - -<p>Ci sono inoltre molte altre proprietà e attributi utili per indicare lo stato di un elemento di un formulario. Per esempio, si può usare <code><u><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a></u>="true"</code> per indicare che un campo è disabilitato. Molti browser salteranno i campi disabilitati, e i lettori di schermo non li leggeranno, ma in alcuni casi saranno comunque indicati, dunque è una buona idea includere questo attributo per permettere al lettore di schermo di sapere che un campo è effettivamente disabilitato.</p> - -<p>Se esiste la possibilità che lo stato di un campo cambi da disabilitato ad abilitato è buona norma indicarlo all’utente, e inoltre spiegare le conseguenze di tale cambio. Per esempio, nel nostro formulario demo <u><a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">validazione-formulario-casella-disabilitata.html</a></u> c’è una casella che, quando è selezionata, abilita un altro campo del formulario, tramite il quale si possono introdurre informazioni aggiuntive. Abbiamo preparato un paragrafo nascosto:</p> - -<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> - -<p>Questo elemento è nascosto alla vista tramite <code>position: absolute</code><strong>. </strong>Quando la casella viene selezionata/deselezionata, il contenuto dell’area nascosta si aggiorna per segnalare agli utenti che usano lettore di schermo in che modo la struttura del formulario è cambiata dopo aver selezionato la casella; inoltre si aggiorna anche lo stato dell’attributo <code>aria-disabled</code> e si fornisce anche un indicazione visuale del cambio:</p> - -<pre class="brush: js">function toggleMusician(bool) { - var instruItem = formItems[formItems.length-1]; - if(bool) { - instruItem.input.disabled = false; - instruItem.label.style.color = '#000'; - instruItem.input.setAttribute('aria-disabled', 'false'); - hiddenAlert.textContent = 'I'Il campo strumenti suonati è ora abilitato; usalo per indicarci quali strumenti sai suonare.'; - } else { - instruItem.input.disabled = true; - instruItem.label.style.color = '#999'; - instruItem.input.setAttribute('aria-disabled', 'true'); - instruItem.input.removeAttribute('aria-label'); - hiddenAlert.textContent = ''Il campo Strumenti suonati è ora disabilitato.'; - } -}</pre> - -<h4 id="Descrivere_bottoni_non_semantici_come_bottoni">Descrivere bottoni non semantici come bottoni</h4> - -<p>Ci è già capitato di discutere della accessiblità nativa di alcuni elementi come bottoni, link o campi di formulario, e dei problemi di accessibilità che sorgono quando si usano elementi sostitutivi per compiere le stesse funzioni di questi elementi. Vedi <a href="/it/docs/Learn/Accessibilità/HTML_accessibilità#Controlli_di_Interfaccia_Utente">Controlli di interfaccia utente</a> nell’articolo sull’accessibilità in HTML, e <a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics#Migliorare_l'accessibilità_da_tastiera">Migliorare l’accessibilità da tastiera</a>, qui sopra). In molti casi è possibile restituire l’accessibilità da tastiera a tali elementi senza troppi problemi, usando <code>tabindex</code> e un poco di JavaScript.</p> - -<p>Ma come fare con i lettori di schermo? Non potranno interpretare gli elementi sostitutivi come bottoni. Se facciamo un test con il nostro esempio <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-bottoni.html</a> e un lettore di schermo, i falsi bottoni saranno segnalati all’utente con frasi come “Cliccami!, gruppo”, che risultano di difficile interpretazione.</p> - -<p>Possiamo rimediare al problema usando un ruolo WAI-ARIA. Salva la pagina <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">div-falsi-buttoni.html</a>, e aggiungi <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> ad ogni <code><div></code> che compie la funzione di bottone, come per esempio:</p> - -<pre><div data-message="Questo messaggio viene dal primo bottone" tabindex="0" role="button"><code>Cliccami!</code></div></pre> - -<p>Se ora provi a navigare la pagina con un lettore di schermo, i bottoni saranno letti come “Cliccami!, bottone”, e tutto risulterà molto più chiaro.</p> - -<div class="note"> -<p><strong>Nota</strong>: non dimenticare che usare il corretto elemento semantico è sempre una opzione migliore. Se vuoi creare un bottone e non ci sono ragioni valide per non usare un elemento <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML <button> rappresenta un bottone cliccabile."><button></a></code>, dovresti usare un elemento <code><a href="https://developer.mozilla.org/it/docs/Web/HTML/Element/button" title="L'elemento HTML <button> rappresenta un bottone cliccabile."><button></a></code>!</p> -</div> - -<h4 id="Guidare_gli_utenti_nell’uso_di_widget_complessi">Guidare gli utenti nell’uso di widget complessi</h4> - -<p>Ci sono molti altri <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ruoli</a> che danno la possibilità di assegnare ad elementi non semantici lo status di comuni elementi dell’interfaccia utente, elementi che vanno al di là di ciò che è disponibile nell’HTML standard, come per esempio <code> <a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. Puoi trovare alcuni utili esempi nella <a href="https://dequeuniversity.com/library/">Deque university code library</a>, per farti un'idea di come tali elementi possono essere resi accessibili.</p> - -<p>Prendiamo in considerazione un esempio. Torniamo ad usare il nostro semplice infobox a schede (vedi <a href="https://developer.mozilla.org/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità#Nascondere_elementi">Nascondere elementi</a> nell’articolo sull’accessibilità in CSS e JavaScript), che puoi trovare qui: <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">infobox a schede</a> (vedi <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codice sorgente</a>).</p> - -<p>Questo esempio funziona perfettamente in termini di accessibilità da tastiera: puoi muoverti facilmente da una scheda all’altra usando il tasto TAB e selezionare una scheda con INVIO per visualizzarne il contenuto. È inoltre abbastanza accessibile se si usa un lettore di schermo, puoi infatti usare gli headings per navigare il contenuto anche senza vederlo. Ciò che però non risulterà del tutto chiaro è in cosa consiste il contenuto stesso: un lettore di schermo riporta il contenuto dell’infobox come composto da un lista di link e da dell’altro contenuto con tre headings. Non da nessuna indicazione di come i contenuti sono relazionati tra loro. Fornire all’utente indicazioni precise su come il contenuto è strutturato è sempre una buona idea.</p> - -<p>Abbiamo creato una versione migliorata dell’esempio, chiamata <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (vedi <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">versione live</a>). Abbiamo aggiornato l’interfaccia del box così:</p> - -<pre class="brush: html"><ul role="tablist"> - <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> -</ul> -<div class="panels"> - <article class="active-panel" role="tabpanel" aria-hidden="false"> - ... - </article> - <article role="tabpanel" aria-hidden="true"> - ... - </article> - <article role="tabpanel" aria-hidden="true"> - ... - </article> -</div></pre> - -<div class="note"> -<p><strong>Nota</strong>: il cambio più evidente è la rimozione dei link che erano presenti precedentemente nell’esempio. Ora si usano i componenti li della lista per identificare le schede. Questo procedimento rende il tutto meno confuso per gli utenti che usano lettori di schermo, in quanto i link che c’erano in precedenza non conducevano da nessuna parte, servivano solo a cambiare di scheda. Inoltre gli attributi <code>aria-setsize</code> e <code>aria-posinset</code> permettono ora di identificare chiaramente le schede tramite il lettore di schermo: in precedenza, con i link, il browser trasmetteva sempre al lettore “1 di 1”, e non “1 di 3”, “2 di 3”, ecc.</p> -</div> - -<p> </p> - -<p>Le nuove funzionalità aggiunte all’infobox di esempio sono le seguenti:</p> - -<ul> - <li>Nuovi ruoli — <a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a> — che identificano le aree più importanti dell’interfaccia: il contenitore delle schede, le schede stesse e i pannelli corrispondenti.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — definisce quale scheda è attualmente selezionata. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — impedisce che un elemento venga letto dal lettore di schermo. Quando l’utente seleziona una nuova scheda, il valore di questo attributo viene aggiornato per ogni scheda tramite JavaScript.</li> - <li><code>tabindex="0"</code> — poichè abbiamo rimosso i link, dobbiamo assegnare questo attributo agli elementi li della lista per renderli focalizzabili tramite tastiera.</li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — questa proprietà permette di specificare al lettore di schermo che un elemento è parte di una serie, e quanti sono gli elementi che costituiscono la serie. </li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — questa proprietà permette di specificare quale posizione un elemento occupa nella serie. Usata insieme a <code>aria-setsize</code>, questa proprietà fornisce al lettore di schermo informazioni sufficienti perchè possa segnalare all’utente dove si trova correntemente, cioè se nell’elemento “1 di 3”, “2 di 3”, ecc. In molti casi, i browser dovrebbero essere in grado di ricavare questa informazione dalla gerarchia degli elementi, ma è sicuramente di aiuto fornire più indicazioni possibile. </li> -</ul> - -<p>Secondo i nostri test, questa nuova struttura ha migliorato sensibilmente l’accessibilità dell’infobox a schede. Le schede sono ora riconosciute come schede (ora il lettore pronuncia “scheda”, o perlomeno “tab”, in inglese), la scheda attualmente selezionata è chiaramente indicata, pronunciando il lettore la parola “selezionata” insieme al nome della scheda, e il lettore di schermo indica anche il numero della scheda in cui si trova l’utente. Inoltre, grazie ai valori di <code>aria-hidden</code> impostati (solo la scheda attualmente selezionata ha il valore <code>aria-hidden="false"</code>), il contenuto non nascosto è il solo che il lettore può leggere, rendendolo il tutto più facile e meno confuso da navigare per l’utente.</p> - -<p> </p> - -<div class="note"> -<p><strong>Nota</strong>: puoi assegnare l’attributo <code>aria-hidden="true"</code> a qualsiasi contenuto che vuoi che sia ignorato dai lettori di schermo.</p> -</div> - -<h2 id="Riassunto">Riassunto</h2> - -<p>Questo articolo non è da considerarsi esaustivo per quanto riguarda tutte le funzionalità disponibili con la tecnologia WAI-ARIA, ma dovrebbe averti fornito informazioni sufficienti a capire come usarla, e come identificare le situazioni più comuni in cui avrai bisogno di ricorrere ad essa.</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — guida di riferimento sui ruoli ARIA.</li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — guida di riferimento sulle proprietà e gli stati.</li> - <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — una libreria di utilissimi esempi pratici che mostrano complessi elementi di interfaccia utente resi accessibili usando le funzionalità di WAI-ARIA.</li> - <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — dettagliatissime guide di disegno del W3C, che spiegano come implementare differenti tipi di controlli di interfaccia utente complessi, e come renderli accessibili usando le funzionalità di WAI-ARIA.</li> - <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — Una specifica del W3C che definisce, per ogni elemento HTML, quali semantiche di accessibilità (ARIA) sono implementate nativamente dai browser, e quali funzionalità WAI-ARIA puoi usare per fornire semantiche extra se sono necessarie.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Accessibilità/CSS_e_JavaScript_accessibilità","Learn/Accessibilità/Multimedia", "Learn/Accessibilità")}}</p> diff --git a/files/it/learn/accessibility/what_is_accessibility/index.html b/files/it/learn/accessibility/what_is_accessibility/index.html deleted file mode 100644 index 196c5e256d..0000000000 --- a/files/it/learn/accessibility/what_is_accessibility/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Cosa è l'accessibilità? -slug: Learn/Accessibility/What_is_accessibility -tags: - - Accessibilità - - Articolo - - CSS - - HTML - - JavaScript - - Principiante - - Strumenti - - TA - - disabilità - - imparare - - lettore schermo - - tastiera - - tecnologie assistive - - utenti -translation_of: Learn/Accessibility/What_is_accessibility -original_slug: Learn/Accessibilità/Cosa_è_accessibilità ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div> - -<p class="summary">Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web.</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 e CSS.</td> - </tr> - <tr> - <th scope="row">Obiettivo:</th> - <td>Acquisire familiarità con il concetto di accessibilità, capire di cosa si tratta e in che modo influisce sulla tua attività di sviluppatore web. </td> - </tr> - </tbody> -</table> - -<h2 id="Dunque_cosa_è_l'accessibilità">Dunque, cosa è l'accessibilità?</h2> - -<p>L'accessibilità è la pratica di rendere i tuoi siti utilizzabili dal maggior numero di persone possibile. Di solito si pensa che il tema dell'accessibilità riguardi solo le persone che soffrono di una disabilità, ma in realtà l'accessibilità è un concetto importante anche per altri gruppi di persone, come coloro che usano dispositivi mobili o chi naviga in internet con una connessione lenta.</p> - -<p>Puoi anche pensare all'accessibilità come alla pratica di trattare tutti alla stessa maniera e dare a tutti le stesse opportunità, indipendentemente dalle loro capacità e circostanze. Così come non è corretto impedire l'accesso a un edificio a una persona che si muove in sedia a rotelle (e infatti gli edifici pubblici devono essere dotati di rampe e ascensori), allo stesso modo non si deve escludere una persona dall'utilizzo di un sito web per il fatto che abbia un handicap o stia usando un dispositivo mobile. Tutti gli utenti devono avere gli stessi diritti.</p> - -<p>Rendere un sito accessibile non solo è la cosa giusta da fare da un punto di vista etico, ma in molti paesi è anche obbligatorio per legge, e inoltre può contribuire a raggiungere categorie di utenti e clienti che altrimenti non potrebbero usare i tuoi servizi o acquistare i tuoi prodotti.</p> - -<p>Rispettare le pratiche di accessibilità è benefico per tutti:</p> - -<ul> - <li>L'uso di HTML semantico (che migliora l'accessibilità) contribuisce anche a migliorare il posizionamento sui motori di ricerca, rendendo il tuo sito più facile da trovare.</li> - <li>Preoccuparsi dell'accessibilità dimostra senso etico, pratico e morale, e migliora la tua immagine pubblica.</li> - <li>Migliorare l'accessibilità di un sito significa renderlo facilmente utilizzabile a più ampi gruppi di utenti, come coloro che usano dispositivi mobili o coloro che navigano con una connessione a internet lenta. </li> - <li>Come già detto, in molti paesi è un obbligo da rispettare per legge.</li> -</ul> - -<h2 id="Quali_tipi_di_disabilità_prendere_in_considerazione">Quali tipi di disabilità prendere in considerazione?</h2> - -<p>Le persone con disabilità sono molto diverse tra loro, così come quelle senza disabilità. Il concetto chiave da imparare è smettere di pensare a come tu stesso usi il computer e navighi in internet, e cominciare a considerare come lo fanno gli altri. I principali tipi di disabilità sono spiegati qui sotto, insieme agli strumenti che le persone disabili usano per navigare il web (conosciuti come <strong>tecnologie assistive</strong>, o <strong>TA</strong>).</p> - -<div class="note"> -<p><strong>Nota</strong>: la Organizzazione Mondiale della Sanità nel suo rapporto (in inglese) <a href="http://www.who.int/mediacentre/factsheets/fs352/en/">Disabilità e salute</a> afferma che "Oltre un miliardo di persone, circa il 15% della popolazione mondiale, ha una qualche forma di disabilità", e "Tra 110 e 190 milioni di adulti hanno significative difficoltà funzionali". </p> -</div> - -<h3 id="Persone_con_deficit_visivo">Persone con deficit visivo</h3> - -<p>Questa categoria include persone non vedenti, persone con una capacità visiva molto ridotta (ipovedenti), daltonici, ecc. Molte di queste persone usano ingranditori di schermo (sia fisici che software, per esempio la maggior parte dei navigatori è dotata di funzioni di zoom), e alcuni usano lettori di schermo, cioè programmi che leggono a voce alta il contenuto digitale:</p> - -<ul> - <li>Alcuni sono programmi a pagamento, come <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) e <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li> - <li>Altri sono programmi freeware, come <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows e Mac OS X), e <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> - <li>Alcuni vengono già integrati nel sistema operativo, come <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X e iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome OS), e <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> -</ul> - -<p>È una buona idea acquisire familiarità con i lettori di schermo; dovresti provare a installarne uno e usarlo, per farti una idea di come funziona. Per maggiori dettagli su come usarli, fai riferimento alla nostra guida (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guida al testing dei lettori di schermo su differenti browser</a>. Il video qui sotto inoltre fornisce una breve testimonianza sull'uso dei lettori di schermo.</p> - -<p>{{EmbedYouTube("IK97XMibEws")}}</p> - -<p>In termini statistici, la Organizzazione Mondiale della Sanità stima che "circa 285 milioni di persone nel mondo hanno gravi deficit visivi: 39 milioni sono non vedenti e 246 milioni ipovedenti". (vedi il rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">Deficit visivo e cecità</a>). Si tratta di una significativa quantità di utenti, pari quasi alla popolazione degli Stati Uniti, che non potrà usufruire del tuo sito se non lo avrai reso accessibile.</p> - -<h3 id="Persone_con_deficit_uditivo">Persone con deficit uditivo</h3> - -<p>Questa categoria di persone presentano una capacità uditiva molto ridotta o del tutto assente. Le persone con deficit uditivo spesso usano TA (vedi l'articolo in inglese <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Strumenti assistivi per persone con disfunzioni uditive, della voce, dell'apparato fonatorio o del linguaggio</a>), ma non esistono in realtà tecnologie assistive specifiche per l'uso del computer o di internet. </p> - -<p>Ci sono, comunque, tecniche specifiche da tenere in conto per fornire alternative testuali ai contenuti audio, come per esempio trascrizioni o sottotitoli sincronizzati nei video. Più avanti si tratteranno queste tecniche nel dettaglio in un altro articolo.</p> - -<p>Anche le persone con deficit uditivo rappresentano una significativa base di utenza. Come indica la Organizzazione Mondiale della Sanità nel rapporto in inglese <a href="http://www.who.int/mediacentre/factsheets/fs300/en/">Sordità e perdita dell'udito</a>, "360 milioni di persone nel mondo presentano deficit uditivi gravi".</p> - -<h3 id="Persone_con_problemi_di_mobilità">Persone con problemi di mobilità</h3> - -<p>Alcune persone soffrono di disabilità che riguardano il movimento. Ciò può riferirsi a problemi puramente fisici (come la perdita di un arto o uno stato di paralisi), o a disordini di tipo neurologico/genetico che comportano difficoltà nei movimenti o perdita di controllo sugli arti. Alcune persone possono avere difficoltà a compiere i movimenti della mano necessari per usare un mouse, mentre altre possono presentare problemi più gravi, come per esempio uno stato di paralisi estesa, che rende necessario l'uso di un puntatore comandato tramite movimenti della testa per interagire con il computer. </p> - -<p>Questo tipo di disabilità può anche essere dovuto all'età avanzata, piuttosto che a un trauma o una condizione specifica, e può anche essere attribuibile a limitazioni dell'hardware, come nel caso di utenti che non hanno un mouse a disposizione.</p> - -<p>In generale, per gestire questo tipo di limitazioni è necessario sviluppare i propri siti o applicazioni in maniera tale che siano utilizzabili tramite tastiera. Tratteremo l'argomento dell'accessibilità tramite tastiera con articoli specifici più avanti nel modulo, ma nel frattempo ti consigliamo di provare a navigare alcuni siti usando solo la tastiera, per farti un'idea di come funziona. Per esempio, puoi usare il tasto TAB per muoverti da un campo all'altro di un formulario? Puoi trovare ulteriori dettagli sull'uso della tastiera per la navigazione dei siti nella sezione (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test di accessibilità della navigazione con tastiera su differenti browser</a>.</p> - -<p>Secondo le statistiche, un numero significativo di persone soffre di limitazioni alla mobilità. Il rapporto (in inglese) <a href="http://www.cdc.gov/nchs/fastats/disability.htm">Disabilità e funzionamento (adulti maggiorenni non ricoverati)</a> indica che negli Stati Uniti la percentuale di adulti con difficoltà di funzionamento fisico è del 15,1%.</p> - -<h3 id="Persone_con_deficit_cognitivo">Persone con deficit cognitivo</h3> - -<p>Probabilmente il più ampio range di disabilità è quello compreso in quest'ultima categoria. Il termine deficit cognitivo può infatti riferirsi ad un'ampia gamma di disfunzioni, dalle malattie mentali alle difficoltà di apprendimento, da problemi di comprensione e concentrazione, come <a href="https://it.wikipedia.org/wiki/Sindrome_da_deficit_di_attenzione_e_iperattivit%C3%A0">la sindrome da deficit di attenzione e iperattività</a>, a persone che presentano una forma di <a href="https://it.wikipedia.org/wiki/Autismo">autismo</a>, o persone che soffrono di <a href="https://it.wikipedia.org/wiki/Schizofrenia">schizofrenia</a>, e molti altri tipi di disturbo. Questo tipo di disabilità possono influenzare molte attività della vita quotidiana, causando problemi di memoria, comprensione, attenzione, ecc.</p> - -<p>Le forme più comuni con cui tali forme di disabilità influenzano l'uso di un sito sono: difficoltà nel capire il procedimento da seguire per raggiungere un risultato; difficoltà nel ricordare come ripetere un'azione compiuta precedentemente; un senso di frustrazione causato da alcune caratteristiche del sito che lo rendono confuso e inconsistente nella navigazione.</p> - -<p>Diversamente da altri problemi di accessibilità web, è impossibile fornire linee guida specifiche per risolvere le difficoltà causate da deficit cognitivo; la strategia migliore è di impegnarsi a disegnare i propri siti nella forma più logica, consistente e usabile possibile. Per esempio, assicurati che:</p> - -<ul> - <li>Le pagine siano consistenti: mantieni barra di navigazione, header, contenuto e footer sempre negli stessi posti nelle varie pagine del sito.</li> - <li>Gli strumenti presenti siano ben disegnati e facili da usare.</li> - <li>Procedimenti o azioni lunghi e complessi da realizzare siano divisi in più fasi composte da piccoli passi ordinati logicamente, con indicazioni regolari del punto del processo in cui l'utente si trova, e quanto manca per completarlo.</li> - <li>Il flusso di navigazione sia semplice e logico, con il minor numero possibile di interazioni richieste all'utente. Per esempio, spesso i processi di registrazione e login sono inutilmente complessi.</li> - <li>Le pagine non siano troppo lunghe e dense di informazioni che potrebbero invece essere distribuite su più pagine.</li> - <li>Il linguaggio usato sia semplice e facilmente leggibile, evitando l'uso di termini tecnici o gergali quando non è strettamente necessario.</li> - <li>I punti più importanti del contenuto siano messi in evidenza, per esempio utilizzando il grassetto.</li> - <li>Gli errori di utilizzo compiuti dall'utente vengano evidenziati con chiarezza, e siano accompagnati da messaggi di supporto che spiegano la corretta procedura da seguire.</li> -</ul> - -<p>Queste non sono soltanto tecniche di accessibilità, ma piuttosto buone pratiche di disegno web che saranno utili a chiunque userà i tuoi siti, e dovrebbero essere pratiche standard nel tuo lavoro di sviluppo web.</p> - -<p>In termini statistici, anche in questo caso i numeri sono significativi. Per esempio, il rapporto (in inglese) della Cornell University <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">Rapporto sullo stato della disabilità 2014</a> (PDF, 511KB) indica che nel 2014 il 4.5% della popolazione degli Stati Uniti di età compresa tra 21 e 64 anni presenta una qualche forma di disabilità cognitiva.</p> - -<div class="note"> -<p><strong>Nota</strong>: La sezione (in inglese) <a href="http://webaim.org/articles/cognitive/">Cognitive</a> del sito WebAIM fornisce utili approfondimenti sulle pratiche riportate sopra, ed è certamente una lettura consigliata.</p> -</div> - -<h2 id="Come_implementare_l'accessibilità_nei_tuoi_progetti">Come implementare l'accessibilità nei tuoi progetti</h2> - -<p>Un mito molto comune sull'accessibilità è che questa sia una sorta di "costoso extra". Questo mito <em>può</em> essere veritiero se:</p> - -<ul> - <li>Stai cercando di implementare l'accessibilità in un sito già costruito che presenta significativi problemi di accessibilità. </li> - <li>Hai cominciato a prendere in considerazione l'accessibilità e i problemi ad essa relativi solo nelle ultime fasi di realizzazione di un progetto.</li> -</ul> - -<p>Se invece l'accessibilità è parte integrante del tuo progetto sin dal principio, il costo per rendere il contenuto accesibile sarà minimo.</p> - -<p>Quando pianifichi un progetto, introduci test di accessibilità nella tua routine di testing, allo stesso modo in cui effettui test per gli altri segmenti di utenza (come per esempio gli utenti che usano pc desktop, iOS o dispositivi mobili, ecc.). Effettua test sin dall'inizio e con frequenza, idealmente facendo uso di test automatizzati che rilevino sistematicamente caratteristiche mancanti (come per esempio mancanza di testo alternativo nelle immagini, o la presenza di link testuali mal costruiti. Vedi l'articolo in inglese <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Relazione tra elementi e contesto</a>) ed anche, se possibile, effettuando test con persone disabili per verificare il funzionamento delle caratteristiche più complesse del sito. Per esempio: </p> - -<ul> - <li>Il selettore di date è utilizzabile da persone che navigano con un lettore di schermo?</li> - <li>Se il contenuto si aggiorna dinamicamente, le persone con disabilità visiva ne sono informate correttamente ?</li> - <li>I bottoni sono accessibili usando la tastiera o interfacce multitouch?</li> -</ul> - -<p>Dovresti prendere nota di tutte le potenziali aree problematiche del tuo contenuto su cui sarà necessario intervenire perchè siano rese accessibili, assicurarti che siano testate a sufficienza e pensare a soluzioni o alternative. Il contenuto testuale (come vedrai nel prossimo articolo) è facile da gestire, ma come fare con il contenuto multimediale, o le grafiche 3D? Dovresti considerare il budget a disposizione e pensare a quali possibilità hai per rendere il contenuto accessibile. Per esempio, potresti decidere di pagare qualcuno per trascrivere tutto il contenuto multimediale. Può essere costoso, ma è fattibile.</p> - -<p>Inoltre, devi essere realista. Un sito accessibile al 100% è un ideale irraggiungibile, ci sarà sempre qualche situazione particolare per la quale un utente troverà difficile usare il tuo contenuto, ma devi fare tutto il possibile per evitare che si verifichino tali situazioni. Se hai in mente di includere nel tuo sito uno spettacolare grafico a torta 3D creato con WebGL, dovresti anche includere, come alternativa accessibile, una tabella dati standard. Oppure, potresti addirittura decidere di eliminare il grafico 3D: la tabella è accessibile a tutti, più rapida da creare, richiede meno risorse CPU ed è più facile da mantenere.</p> - -<p>D'altro canto se stai costruendo un sito-galleria per opere d'arte in 3D, non sarebbe ragionevole pretendere che ogni opera fosse perfettamente accessibile alle persone con disabilità visiva, dato che si tratta di un medium interamente visuale.</p> - -<p>Per dimostrare che hai grande considerazione per l'accessibilità e che l'hai inclusa nel tuo progetto, pubblica una dichiarazione di accessibilità sul tuo sito nella quale spieghi in dettaglio la tua politica sull'accessibilità, e quali misure hai adottato per rendere il sito accessibile. Se un utente ti contatta lamentando un problema di accessibilità, assicurati di ascoltarlo con attenzione e chiarire tutti i dettagli, sii empatico, e adotta tutte le misure ragionevoli per risolvere il problema.</p> - -<div class="note"> -<p><strong>Nota</strong>: Il nostro articolo (in inglese) <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Come gestire i problemi di accessibilità più comuni</a> spiega con maggiori dettagli le specifiche di accessibilità che devono essere testate. </p> -</div> - -<p>Per riassumere:</p> - -<ul> - <li>Prendi in considerazione l'accessibilità sin dall'inizio del progetto, e fai test sin da subito e spesso. Così come con qualsiasi altro bug, un problema di accessibilità diventa sempre più costoso da sistemare quanto più tardi viene scoperto.</li> - <li>Tieni a mente che la maggior parte delle pratiche di accessibilità beneficiano tutti gli utenti, non solo quelli con disabilità. Per esempio un codice essenziale, ordinato e semantico non è solo utile per i lettori di schermo, ma è anche più facile e veloce da caricare per i browser, dunque è utile a tutti, soprattutto coloro che usano dispositivi mobili e/o connessioni a internet lente.</li> - <li>Pubblica una dichiarazione di accessibilità sul tuo sito, ascolta con attenzione le segnalazioni di eventuali problemi e fai tutto il possibile per risolverli.</li> -</ul> - -<h2 id="Linee_guida_di_accessibilità_e_legge">Linee guida di accessibilità e legge</h2> - -<p>Ci sono numerose checklist e set di linee guida disponibili per effettuare test basici di accessibilità, e a prima vista possono apparire complicate. Ti consigliamo innanzitutto di acquisire familiarità con le aree più importantidi cui devi occuparti, e di cercare di comprendere le strutture generali delle linee guida che sono più rilevanti al tuo caso specifico.</p> - -<ul> - <li>Per cominciare, il W3C ha pubblicato un documento molto dettagliato che include criteri molto precisi e non-tecnici per conformarsi a uno standard accettabile di accessibilità. Tale documento è chiamato <a href="https://www.w3.org/Translations/WCAG20-it/">Linee guida per l'accessibilità dei contenuti web</a>, e si tratta di una lettura piuttosto lunga. I criteri di accessibilità sono divisi in 4 categorie principali, che spiegano come rendere il contenuto percepibile, utilizzabile, comprensibile e robusto. Una versione molto riassunta del documento si può trovare (in inglese) all'indirizzo <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Non è necessario imparare le linee guida a memoria, sii cosciente delle aree generali di cui devi occuparti, e usa una varietà di tecniche e strumenti per gestire le aree che non sono conformi alle linee guida (vedi sotto per maggiori dettagli).</li> - <li>Tieni in conto inoltre che esiste una legislazione specifica riguardante l'accessibilità web in vari paesi come Stai Uniti, Germania, Inghilterra, Australia ed anche Italia (vedi <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a>).</li> -</ul> - -<p>È una buona idea leggere il testo della legge italiana sull'accessibilità, per familiarizzarsi con essa ed evitare eventuali problemi legali per i tuoi siti.</p> - -<h2 id="API_per_l'accessibilità">API per l'accessibilità</h2> - -<p>I browser fanno uso di alcune <strong>API speciali per l'accessibilità</strong> (fornite dal sistema operativo) che mostrano informazioni utili per le tecnologie assistive (TA). Le TA in generale usano solo informazioni semantiche, dunque non prendono in considerazione aspetti come lo stile di una pagina o gli script in JavaScript. Le informazioni sono strutturate in una <strong>mappa ad albero</strong>.</p> - -<p>Ogni sistema operativo ha la sua API per l'accessibilità:</p> - -<ul> - <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> - <li>Mac OS X: NSAccessibility</li> - <li>Linux: AT-SPI</li> - <li>Android: Accessibility framework</li> - <li>iOS: UIAccessibility</li> -</ul> - -<p>Quando le informazioni semantiche native fornite dagli elementi HTML della tua applicazione web non sono sufficienti, puoi supplementarle con caratteristiche della <a href="https://www.w3.org/TR/wai-aria/">specificazione WAI-ARIA</a> (articolo in inglese), che aggiunge informazione semantica alla mappa ad albero per migliorare l'accessibilità. Puoi sapere di più su WAI-ARIA nel nostro articolo <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">basi di WAI-ARIA</a>.</p> - -<h2 id="Riassunto">Riassunto</h2> - -<p>Questo articolo dovrebbe averti fornito una utile panoramica sull'accessibilità, averti mostrato perchè è importante, e come puoi inserirla nel tuo flusso di lavoro. Dovrebbe inoltre aver suscitato il tuo interesse e un desiderio di conoscere i dettagli su come implementare l'accessibilità nei tuoi progetti. Cominceremo a occuparcene proprio nella prossima sezione, dove spiegheremo come HTML costituisce un'ottima base per l'accessibilità. </p> - -<div>{{NextMenu("Learn/Accessibilità/HTML_accessibilità", "Learn/Accessibilità")}}</div> |