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

---
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 &gt; Accessibilità &gt; 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à &gt; 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&amp;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&gt;Accessibilità&gt;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>&gt;<em>Generale</em>&gt;<em>Accessibilità</em>&gt;<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 &lt;head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.">&lt;head&gt;</a>:</p>

<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</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>