diff options
Diffstat (limited to 'files/it/learn/accessibility/accessibility_troubleshooting/index.html')
| -rw-r--r-- | files/it/learn/accessibility/accessibility_troubleshooting/index.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/files/it/learn/accessibility/accessibility_troubleshooting/index.html b/files/it/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..8c0e97dab4 --- /dev/null +++ b/files/it/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,113 @@ +--- +title: 'Test di valutazione: risoluzione di problemi di accessibilità' +slug: Learn/Accessibilità/Accessibilità_test_risoluzione_problemi +tags: + - Accessibilità + - CSS + - HTML + - JavaScript + - Principiante + - Test di valutazione + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibilità/Accessibilità_dispositivi_mobili", "Learn/Accessibilità")}}</div> + +<p class="summary">Nella sezione di valutazione di questo modulo ti proponiamo un semplice sito web che presenta alcuni problemi di accessibilità che devi individuare e risolvere.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisiti:</th> + <td>Conoscimenti basici sull'uso del computer, livello basico di HTML, CSS e JavaScript, e aver letto i <a href="it/docs/Learn/Accessibilità">precedenti articoli del corso</a>.</td> + </tr> + <tr> + <th scope="row"><strong>Obiettivo</strong>:</th> + <td>Mettere alla prova la tua preparazione su alcuni aspetti fondamentali dell’accessibilità.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_di_partenza"><strong>Punto di partenza</strong></h2> + +<p> </p> + +<p>Come primo passo, dovresti scaricare l’<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">archivio ZIP contenente i file che compongono il sito di esempio</a>. Decomprimi l’archivio in una cartella locale sul tuo computer.</p> + +<p>Il risultato finale del test dovrebbe apparire così:</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Inizialmente aprendo il sito d’esempio nel tuo browser vedrai che appare diverso in alcuni aspetti dall’immagine del risultato finale. Ciò è dovuto al fatto che il codice sorgente di partenza contiene differenze rispetto a quello a cui vogliamo arrivare, differenze che si riflettono nel modo in cui CSS fa visualizzare il sito. Non ti preoccupare, nelle sezioni seguenti sistemeremo tutti questi problemi.</p> + +<h2 id="Schema_del_progetto"><strong>Schema del progetto</strong></h2> + +<p>Il punto di partenza è un immaginario sito sulla natura che mostra un articolo sugli orsi. Il sito presenta numerosi problemi di accessibilità. Il tuo compito è individuarli e, per quanto possibile, risolverli. Usa le domande riportate qui sotto come guida.</p> + +<h3 id="Colori">Colori</h3> + +<p>Allo stato attuale il testo è di difficile lettura, a causa dello schema di colori in uso. Puoi effettuare un test del contrasto dei colori (colore del testo/colore di fondo) e sistemare il problema cambiando i colori usati?</p> + +<h3 id="HTML_semantico">HTML semantico</h3> + +<ol> + <li>Il contenuto continua ad essere poco accessibile. Fai una prova di navigazione con un lettore di schermo.</li> + <li>Puoi aggiornare il testo dell’articolo per renderlo più facilmente navigabile tramite lettore di schermo?</li> + <li>Il menu di navigazione (racchiuso tra le etichette <code><div class="nav"></code> e <code></div></code>) potrebbe essere reso più accessibile usando un elemento semantico HTML5 appropriato. Di quale elemento si tratta? Aggiorna il menu usando l’elemento appropriato.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: dovrai anche aggiornare i selettori CSS che controllano lo stile del contenitore del menu di navigazione<font>.</font></p> +</div> + +<h3 id="Le_immagini">Le immagini</h3> + +<p>Allo stato attuale le immagini sono inaccessibili agli utenti che usano lettore di schermo. Puoi risolvere questo problema<font>?</font></p> + +<h3 id="Il_lettore_audio">Il lettore audio<font> </font></h3> + +<ol> + <li>Il lettore <code><audio></code> non è accessibile alle persone con disabilità uditiva. Puoi aggiungere una alternativa accessibile a questo tipo di utenti<font>?</font></li> + <li>Il lettore <code><audio></code> non è accessibile agli utenti che usano browser che non supportano l’audio HTML5. Cosa puoi fare per permettere anche a questi utenti di accedere al contenuto audio<font>?</font></li> +</ol> + +<h3 id="I_formulari">I formulari</h3> + +<ol> + <li>Sarebbe utile aggiungere un’etichetta all’elemento <code><input></code> della barra di ricerca, ma non vogliamo usare un’etichetta visibile, che potrebbe rovinare il disegno della pagina e non è realmente necessaria agli utenti che vedono. Come puoi aggiungere un’etichetta che sia accessibile solo ai lettori di schermo<font>?</font></li> + <li>I due elementi <code><input></code> del formulario di commento hanno etichette testuali, ma queste etichette non sono associate ai loro relativi campi in una forma che si possa definire completamente non ambigua. Come puoi risolvere questa imprecisione? Nota che dovrai aggiornare anche alcune regole CSS<font>.</font></li> +</ol> + +<h3 id="Il_bottone_mostranascondi_commenti">Il bottone mostra/nascondi commenti</h3> + +<p>Il bottone mostra/nascondi commenti non è attualmente accessibile tramite tastiera. Puoi renderlo accessibile da tastiera, rendendolo sia selezionabile tramite tasto TAB che attivabile tramite tasto INVIO<font>?</font></p> + +<h3 id="La_tabella">La tabella</h3> + +<p>La tabella dati non è molto accessibile. Risulta difficile per gli utenti che usano lettore di schermo distinguere file e colonne, e inoltre la tabella non ha associata nessuna forma di didascalia che spieghi chiaramente a cosa fa riferimento. Puoi aggiungere tali funzionalità al codice HTML per risolvere questi problemi<font>?</font></p> + +<h3 id="Altre_considerazioni">Altre considerazioni<font>?</font></h3> + +<p>Puoi indicare due ulteriori idee per rendere il sito più accessibile<font>?</font></p> + +<h2 id="Valutazione"><strong>Valutazione</strong></h2> + +<p>Se stai sostenendo questa prova di valutazione come parte di un corso organizzato puoi mandare il tuo progetto al tuo insegnante perchè lo valuti. Se invece stai studiando per conto tuo, puoi ricevere una guida alla valutazione richiedendola nel <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">forum di discussione su questo esercizio</a><font>, </font>o nel canale IRC<font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> su <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font>In ogni caso, raccomandiamo di non guardare le soluzioni senza prima fare uno sforzo per risolvere gli esercizi per conto tuo.</p> + +<p><font>{{PreviousMenu("Learn/Accessibilità/</font>Accessibilità_dispositivi_mobili<font>", "Learn/Accessibilità")}}</font></p> + +<h2 id="In_questo_modulo">In questo modulo</h2> + +<ul> + <li><a href="/it/docs/Learn/Accessibilità/Cosa_è_accessibilità">Cos'è l'accessibiltà</a>?</li> + <li><a href="/it/docs/Learn/Accessibilità/HTML_accessibilità">HTML: una buona base per l'accessibilità</a></li> + <li><a href="/it/docs/Learn/Accessibilità/CSS_e_JavaScript_accessibilità">Linee guida di accessibiltà per CSS e JavaScript</a></li> + <li><a href="/it/docs/Learn/Accessibilità/WAI-ARIA_basics">Basi della tecnologia WAI-ARIA</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Multimedia">Accessibilità multimediale</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_dispositivi_mobili">Accessibilità per dispositivi mobili</a></li> + <li><a href="/it/docs/Learn/Accessibilità/Accessibilità_test_risoluzione_problemi">Risoluzione di problemi di accessibilità</a> </li> +</ul> |