diff options
Diffstat (limited to 'files/it/learn/accessibility/html/index.html')
| -rw-r--r-- | files/it/learn/accessibility/html/index.html | 538 |
1 files changed, 538 insertions, 0 deletions
diff --git a/files/it/learn/accessibility/html/index.html b/files/it/learn/accessibility/html/index.html new file mode 100644 index 0000000000..26129068e4 --- /dev/null +++ b/files/it/learn/accessibility/html/index.html @@ -0,0 +1,538 @@ +--- +title: 'HTML: una buona base per l''accessibilità' +slug: Learn/Accessibilità/HTML_accessibilità +tags: + - Accessibilità + - Articolo + - Bottoni + - Formulari + - HTML semantico + - Lettore di schermo + - Link + - Principiante + - TA + - Testo Alternativo + - tastiera + - tecnologie assistive +translation_of: Learn/Accessibility/HTML +--- +<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> |