path: root/files/it/learn/accessibility/css_and_javascript/index.html

---
title: Linee guida di accessibilità per CSS e JavaScript
slug: Learn/Accessibilità/CSS_e_JavaScript_accessibilità
tags:
  - Accessibilità
  - Articolo
  - CSS
  - Guida
  - JavaScript
  - colore
  - contrasto
  - imparare
  - nascondere
  - non intrusivo
translation_of: Learn/Accessibility/CSS_and_JavaScript
---
<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">&lt;h1&gt;Heading&lt;/h1&gt;

&lt;p&gt;Paragrafo&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Lista&lt;/li&gt;
  &lt;li&gt;Lista di due elementi.&lt;/li&gt;
&lt;/ul&gt;</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>&lt;em&gt;</code> conferisce enfasi al testo, mostrandolo in corsivo. L'etichetta <code>&lt;strong&gt; </code>ha lo stesso scopo, ma mostra il testo in grassetto:</p>

<pre class="brush: html">&lt;p&gt;L'acqua è &lt;em&gt;molto calda&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Le gocce d'acqua che si formano su una suoerficie sono chiamate &lt;strong&gt;condensa&lt;/strong&gt;.&lt;/p&gt;</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>&lt;abbr&gt;</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">&lt;p&gt;Il contenuto di un sito è codificato tramite &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</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">&lt;p&gt;Visita la &lt;a href="https://www.mozilla.org"&gt;homepage di Mozilla&lt;/a&gt;.&lt;/p&gt;</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">&lt;div&gt;
  &lt;label for="nome"&gt;Introduci il tuo nome&lt;/label&gt;
  &lt;input type="text" id="nome" name="nome"&gt;
&lt;/div&gt;</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>&lt;video&gt;</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>&lt;video&gt;</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">&lt;label for="nome"&gt;Inserisci il tuo nome:&lt;/label&gt;
&lt;input type="text" name="nome" id="nome"&gt;</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 &lt; 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>&lt;div class="errors" role="alert" aria-relevant="all"&gt;
  &lt;ul&gt;
  &lt;/ul&gt;
&lt;/div&gt;</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>