
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Consigli e tecniche per migliorare l’accessibilità di un sito in base alle varie tipologie di disabilità
Questa è la traduzione dell’articolo Understanding Disabilities when Designing a Website di Leona Tomlinson pubblicato originariamente su Digital Web Magazine il 16 Settembre 2008. La traduzione viene qui presentata con il consenso dell’editore e dell’autrice.
Con il 75% della popolazione degli USA1 e il 65% di quelle del Regno Unito2 che hanno accesso ad internet da casa diventa un imperativo progettare siti web che siano accessibili e usabili. Le linee guida WCAG del W3C, introdotte nel 1999, aiutano molto lo sviluppatore nella creazione di siti accessibili, ma… dobbiamo guardare oltre le linee guida se vogliamo creare siti che siano accessibili ad utenti con specifiche disabilità e alle tecnologie assistive che essi usano.
Nel Regno Unito | Negli USA |
---|---|
2 milioni di persone hanno un danno alla vista3 | 10 milioni di persone hanno un danno alla vista4 |
8,2 milioni di persone hanno una sordità tra il medio e il moderato5, 688.000 persone presentano una sordità molto seria6 | 28 milioni di persone hanno problemi di udito7 |
3,4 milioni di persone hanno una disabilità fisica8 | 8 milioni di persone hanno una disabilità fisica9 |
1,5 milioni di persone hanno difficoltà di apprendimento10 | 6.8 milioni di persone hanno difficoltà di apprendimento11 |
6 milioni di persone sono dislessiche12 | 25 milioni di personesono dislessiche13 |
Questo articolo descriverà alcune semplici tecniche che, se implementate nel design di un sito, miglioreranno l’accessibilità e l’usabilità per le persone che hanno problemi di vista, udito, psichici, cognitivi o difficoltà nell’apprendimento.
Ricordate: l’adozione di queste tecniche non porta vantaggi solo ai disabili ma a tutti!
La maggior parte dei non vedenti adotta software per la lettura di quanto appare sullo schermo (screen readers) come JAWS o Windows-Eyes che leggono per loro le pagine di un sito web. Inoltre, alcuni utenti possono accedere al sito tramite dispositivi Braille che convertono i contenuti di un sito, appunto, in caratteri Braille. Di fatto però, gli utenti che usano quest’ultima tecnologi sono pochi: la maggior parte dei non vedenti hanno perso la vista nel corso della vita piuttosto che essere nati ciechi e perciò non hanno imparato a leggere il Braille.
I principi fondamentali da tenere presenti quando si progetta un sito avendo in mente un’utenza di non vedenti sono i seguenti.
Note
1 http://digital-lifestyles.info/2008/07/07/us-broadband-uptake-slows-25-without-home-internet-access
2 http://www.statistics.gov.uk/CCI/nugget.asp?ID=8
3 http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_rnib003680.hcsp
4 http://www.afb.org/section.asp?SectionID=15&DocumentID=1367
5 http://www.rnid.org.uk/information_resources/aboutdeafness/statistics/
6 http://www.rnid.org.uk/information_resources/aboutdeafness/statistics/
7 http://www.sciencedaily.com/releases/1999/02/990204081932.htm
8 http://www.abilitynet.org.uk/enation21
9 http://ada.ky.gov/mobility_imp_def.htm
10 http://www.mencap.org.uk/landing.asp?id=1683
11 http://www.ubaccess.com/ldweb.html
12 http://www.bdadyslexia.org.uk/news.html
13 http://findarticles.com/p/articles/mi_m0EIN/is_2004_May_17/ai_n6029324
14 http://en.wikipedia.org/wiki/American_Sign_Language
15 http://www.rnid.org.uk/information_resources/factsheets/communication/factsheets_leaflets/sign_language.htm
Dal momento che gli screen reader leggono il contenuto in un formato lineare, è importante fornire informazioni utili su ciò che è richiesto nella compilazione di un modulo prima del campo di input. Se queste informazioni sono inserite dopo, gli utilizzatori di screen reader incontrerebbero i giusti criteri per la compilazione solo dopo che hanno riempito il campo.
Un altro problema nasce quando si inserisce il classico asterisco che identifica un campo obbligatorio dopo il campo stesso, come si può osservare nella figura 2. Di nuovo, chi usa uno screen reader non saprà che quel campo è obbligatorio fino a quando non si sposta nel successivo campo del modulo.
Per migliorare l’accessibilità e l’usabilità per gli utenti di screen reader, i requisiti per i campi del form devono essere piazzati prima del campo. Se l’utente deve inserire dati nel campo, allora l’asterisco dovrebbe essere inserito all’interno della label del form, come mostrato nella figura 3. Per ulteriori miglioramenti nei form è utile inserire una frase prima del form per informare gli utenti che l’asterisco indica un campo obbligatorio.
Gli utenti di screen reader traggono beneficio dalla presenza di un link del tipo ‘vai al contenuto principale’ (skip link) con il quale possono saltare lunghe sezioni di navigazione arrivando direttamente al contenuto principale della pagina, riducendo così la quantità di contenuto che devono ascoltare. Inoltre, se sono presenti sulla pagina sezioni molto importanti e usate come un box di ricerca, sarebbe opportuno fornire uno skip link anche verso queste aree, come si vede nella figura 4:
Chi usa screen reader come JAWS possono ascoltare quali sono i link presenti su una pagina atraverso una funzionalità chiamata lista dei link. Se il testo dei link non è descrittivo -come in frasi del tipo ‘clicca qui’ o ‘più informazioni’, per esempio- non c’è modo per l’utente di determinare dove lo porterà quel link. La figura 5 mostra un esempio della funzionalità lista dei link:
Dal momento che esiste questa funzionalità, è raccomandato che il testo dei link definisca il contenuto della destinazione. Per esempio, invece di ‘Clicca qui per avere più informazioni sulla Agoo IT’ sarebbe più appropriato includere l’intero contenuto come link: ‘Scopri più informazioni sulla Agoo IT’. ‘Clicca’, infatti, è una terminologia che dipende dall’uso del mouse e pertanto è stata rimossa nel secondo esempio.
Il primo pezzo di informazione che chi usa uno screen reader ascolterà quando apre una pagina sarà il titolo (<title>
) assegnato alla pagina stessa. È dunque importante usare un titolo che rifletta al meglio il contenuto della pagina. Per esempio, una pagina che fornisce dettagli sulle informazioni di contatto potrebbe avere un titolo come ‘Come contattarci’. Gli utilizzatori di screen reader saranno in grado di capire chiaramente, ascoltando il titolo della pagina, se sono arrivati sulla pagina giusta e se dunque devono andare avanti nella lettura della stessa.
I non vedenti si affidano a dei testi alternativi per capire cosa rappresentano le immagini presenti in una pagina. Quando un’immagine veicola informazioni importanti, dovrebbe essere sempre fornito un testo alternativo succinto e appropriato. Per esempio, il logo della compagnia XYZ dovrebbe essere accompagnato da un alt="Compagnia XYZ"
. Andare troppo oltre nei dettagli con qualcosa come ‘Logo della compagnia XYZ, sfondo blue con testo viola ed evidenziazioni in giallo’ sarebbe troppo verboso e crea una confusione uditiva negli utenti di screen reader.
Quando un’immagine è puramente decorativa o usata per creare spazio, dovrebbe essere accompagnata da un testo alternativo vuoto: alt=""
. Ciò assicura che lo screen reader non legga e pronunci il nome del file.
È importante fornire titoli descrittivi che dovrebbero essere marcati semanticamente da <h1>
a <h6>
. Chi usa uno screen reader ascolta spesso il contenuto dei titoli fuori dal contesto del contenuto principale della pagina attraverso l’uso di una lista di titoli. Ciò consente un accesso rapido alle principali aree di contenuto a cui l’utente è interessato invece che dover per forza ascoltare l’intero contenuto della pagina.
<h1>
dovrebbe essere riservato per il titolo principale così che l’utente possa facilmente identificare quello che è il contenuto fondamentale della pagina.
Gli utilizzatori di screen reader fanno affidamento sulla presenza di descrizioni audio per avere informazioni aggiuntive sui contenuti mostrati all’interno di un video. Per esempio, in una scena di inseguimento dove il solo audio è rappresentato da un brano musicale, è essenziale che le descrizioni audio siano usate per descrivere gli eventi. Un esempio: “Due ladri corrono per una scala inseguiti dalla polizia”.
Un’altra utile inclusione per il contenuto video e audio sono le trascrizioni. Esse sono resoconti scritti dettagliati dei contenuti audio o video e possono includere informazioni aggiuntive come commenti e descrizioni che possono aiutare a comprendere al meglio il contenuto. Le trascrizioni consentono a chi usa uno screen reader di accedere al contenuto con modalità alternative.
È importante ricordare che i non vedenti che si affidano ad uno screen reader non usano il mouse (usano la tastiera per navigare in un sito). È dunque essenziale che tutte le funzionalità e le informazioni siano accessibili attraverso la tastiera, compresi i controlli per i video in un player multimediale.
(Termina qui la prima parte. Nella seconda affronteremo le problematiche relative all’ipovisione, alla sordità, alle disabilità fisiche e cognitive, ai problemi di apprendimento).
Le persone che soffrono di ipovisione tenderanno ad usare software che consentono l’ingrandimento di parti dello schermo per facilitare la lettura. A seconda della gravità dei loro problemi, questi utenti potranno combinare software per lo zooming e screen reader usando programmi come Supernova o ZoomText. Per problemi di entità meno grave, questi utenti potranno semplicemente ingrandire le dimensioni del testo nelle configurazioni del loro browser oppure cambiare i colori per rendere il contenuto più chiaro da leggere.
I principi chiave da tenere in considerazione per questa categoria di utenti sono i seguenti.
Quando è possibile si eviti di usare immagini al posto di normale testo; si faccia invece ricorso a quanto offerto dal linguaggio HTML con gli opportuni stili applicati. Questo tipo di immagini danneggiano tutti gli utenti affetti da ipovisione. Per chi usa software di magnificazione, l’immagine perderà in qualità quando viene ingrandita, fatto che renderà il testo più difficile da leggere, come mostrato nella figura 6. In più, le immagini di testo non rifletteranno i colori personalizzati nel contesto del browser o il testo che è stato ingrandito.
Fornendo contenuti che possano essere ingranditi, gli utenti con ipovisione potranno modificare le dimensioni del testo nella pagina web per agevolare la lettura.
Gli utenti di software di magnificazione possono vedere solo una piccola porzione della pagina alla volta e cercheranno il contenuto e le funzionalità che loro interessano in punti specifici della pagina. Per esempio, il box con il modulo per la ricerca è spesso collocato nell’angolo superiore destro della pagina; se questa funzionalità viene inserita altrove potrebbe non essere notata.
Per agevolare la leggibilità, assicuratevi di usare colori ben contrastati nel contesto di una pagina web. Si può ottenere questo risultato testando i colori scelti con l’analizzatore del contrasto dei colori di Juicy Studio. Testando le varie combinazioni tra colore di sfondo e colore del testo, è possibile determinare se i colori scelti siano in accordo con le linee guida WCAG del W3C.
Le persone con problemi di udito tendono a non usare tecnologie assistive per migliorare la loro esperienza di navigazione sul web. Ciò che si aspettano, invece, è di poter trovare sul sito contenuti alternativi per i contenuti audio sotto forma di sottotitoli o trascrizioni.
Rendendo accessibili i contenuti audio per questa categoria di utenti si fa un buon servizio anche a quegli utenti che si trovino a fruire di tali contenuti in ambienti in cui non sia possibile acoltare suoni. Potrebbe accadere in una biblioteca dove il volume sia stato abbassato al minimo; potrebbe accadere in ambienti troppo rumorosi; potrebbe accadere se si usa un PC senza casse acustiche.
I principi chiave da tenere in considerazione per questa categoria di utenti sono i seguenti.
I sottotitoli dovrebbero essere forniti all’interno del video. Dovrebbero sincronizzati con l’audio originale in modo che il contenuto sia pienamente comprensibile senza il sonoro. Per ulteriori informazioni sul tema si può fare riferimento al capitolo 13 del libro di Joe Clark Building Accessible Websites.
Se il contenuto è audio parlato, senza video, come avviene in un podcast, è importante fornire una trascrizione. Si raccomanda che la trascrizione sia fornita in puro e semplice testo HTML per consentire la fruizione alla fetta più ampia di pubblico possibile, a differenza di quanto potrebbe avvenire se venissero distribuite in formati come Microsoft Word o il PDF di Adobe.
Ci sono da 500.000 a 2 milioni di persone negli USA che usano la lingua dei segni; sono tra 50.000 e 70.000 nel Regno Unito. Dunque, per contenuti video davvero rilevanti potrebbe valere la pena investigare la possibilità di includere versioni in lingua dei segni per assistere gli utenti nella comprensione dei contenuti trasmessi.
Le disabilità fisiche possono variare in gravità, da quelli che sono temporaneamente disabili, per esempio perché hanno un braccio rotto, fino alle persone tetraplegiche che non possono usare nessuno degli arti. A seconda della gravità della disabilità fisica, questi utenti potrebbero accedere al web attraverso software di riconoscimento vocale come Dragon Naturally Speaking. Comunque, quello che tutti i disabili fisici hanno in comune è la limitazione o l’impossibilità di usare un mouse. Ciò significa che il contenuto che richieda l’uso del click di un mouse o dei movimenti molto precisi dello stesso non possono essere fruiti da queste persone.
I principi chiave da tenere in considerazione per questa categoria di utenti sono i seguenti.
Gli utenti con disabilità fisiche, come si diceva, sono impediti nell’uso del mouse e pertanto navigheranno sul web usando principalmente una tastiera. Funzionalità dipendenti dal mouse come l’evento onchange
comunemente usato nei menu a tendina risulteranno problematiche per chi usa una tastiera. Infatti, appena giunge con il tasto TAB sulla tendina e preme il tasto FRECCIA GIU’ per effettuare una selezione, l’evento onchange
scatta, con il risultato che verrà sempre attivata la prima opzione a prescindere da quella scelta dall’utente.
Dal momento che gli utenti con disabilità fanno affidamento sulla tastiera per tutte le interazioni, è importante fornire uno stato di :focus
per i link. Si può implementare questo effetto assegnando uno stile differente per il testo del link in modo che quando riceve il focus in seguito alla navigazione con il tasto TAB il colore o l’aspetto cambieranno, facendo sì che sia evidente dove l’utente si trova sulla pagina. L’esempio che segue, usato in un CSS, trasformerà in nero il colore del link sia quando riceve il focus via tastiera sia quando lo riceve via mouse:
a:hover, a:focus, a:active {color: #000000;}
Il risultato sarà questo:
Gli skip link sono link che diventano visibili quando ricevono il focus e sono utili per gli utenti con disabilità fisiche. Chi usa una tastiera deve navigare nella pagina attraverso il tasto TAB per raggiungere una specifica posizione o un link a cui sono interessati. Gi skip link consentono di superare immediatamente lunghi menu di navigazione e ridurre il numero di pressioni del tasto richieste per attivare i link che si trovano nel contenuto principale della pagina.
Evitate di usare oggetti come ticker scorrevoli: gli utenti con disabilità fisiche li troveranno sicuramente problematici e difficili da usare. Essi presentano infatti difficoltà di vario in genere in fatto di controllo motorio e pertanto potrebbero non avere la precisione richiesta per controllare il mouse e il click su oggetti che hanno elementi in movimento. Inoltre, chi naviga con tastiera potrebbe non avere il tempo sufficiente per puntare sul target desiderato prima che esso scompaia dal campo visivo.
Alcuni utenti con disabilità fisiche potrebbero usare un mouse per navigare su un sito web. Avendo comunque difficoltà di controllo motorio, è importante che il testo possa essere ingrandito per rendere il testo più facile da cliccare. Per migliorare ulteriormente l’usabilità, fornite una quantità sufficiente di spazio bianco tra i link. Ciò riduce il margine di errore, facendo sì che l’utente non clicchi per sbaglio sul link errato.
Quanti usano software di riconoscimento vocale navigano un sito pronunciando parole per attivare link e controlli. Le parole pronunciate sono quasi sempre quelle mostrate sul sito. Dunque, è essenziale assicurarsi che tutti i pulsanti di form e i link con immagini siano espressi correttamente nel codice HTML in modo tale che il loro nome corrisponda al testo o all’immagine mostrata a schermo. Per esempio, se c’è un pulsante ‘Compra’ sulla pagina, gli utenti di software di riconoscimento vocale diranno ‘Compra’ per attivare il pulsante. Ma se il nome del pulsante è ‘acquistare’, allora ciò non accadrà.
Le persone con problemi cognitivi o di apprendimento potrebbero avere problemi con la memoria, con la soluzione di problemi, con la percezione e la concettualizzazione. Inoltre, le persone con difficoltà di apprendimento potrebbero avere problemi nella lettura o nella comprensione sotto forma di dislessia. Per migliorare l’usabilità di un sito a vantaggio di queste categorie di utenti è importante che il contenuto sia scritto in maniera chiara, che i layout delle pagine siano semplici, che la sezione di navigazione stessa sia chiara e che non ci siano contenuti in movimento che possano impedire la comprensione. Anche per questi tipi di disabilità ci sono dei principi chiave da tenere presenti.
Offrite lo stesso look and feel attraverso tutto il sito. Assicuratevi che la navigazione e il contenuto principale siano collocati nella stessa posizione su tutte le pagine. Considerate l’idea di contrassegnare con specifici colori certe sezioni perché chi ha questo tipo di problemi ne trarrà vantaggio. Si può ottenere questo risultato, ad esempio, usando lo stesso colore di sfondo e per i titoli per tutte le pagine di una specifica sezione.
Una mappa del sito consentirà agli utenti con disabilità cognitive o di apprendimento di avere un’idea chiara del contenuto presente sul sito. Consente anche di far raggiungere più facilmente una certa pagina e aiuta se l’utente dovesse ‘perdersi’ tra le pagine.
Per migliorare la leggibilità, usate font sans-serif che possano essere ridimensionati. Inoltre, allineate il contenuto a sinistra: il testo giustificato è più difficile da leggere a causa degli spazi diseguali tra le parole. Usate al minimo anche il corsivo e il maiuscoletto.
Se un utente compie un errore, assistetelo fornendo messaggi di errore utili. Per esempio, se un campo di form obbligatorio non è stato compilato, il messaggio dovrebbe dire all’utente quale campo deve essere completato prima dell’invio del modulo.
Organizzazioni come Browse Aloud e Textic consentono di restituire sotto forma vocale il contenuto di un sito quando si evidenziano le parole su una pagina web. Offrire questa funzionalità è utile specie per quegli utenti che trovino difficile leggere grosse porzioni di testo.
Considerate anche l’idea di offrire una versione semplificata e di facile lettura dei contenuti più complessi. Per un esempio considerate il documento Making Lives Better for People with a Learning Disability del Dipartimento della Salute americano.
Le persone con difficoltà cognitive e di apprendimento possono trarre beneficio dalla disponibilità di diversi schemi di colori. Può essere per esempio d’aiuto offrire una prima opzione con testo nero e sfondo giallo limone e un’altra con i colori invertiti.
Spero che questo articolo abbia offerto una panoramica siginificativa sui modi in cui utenti con diverse disabilità fruiscono dei contenuti di un sito web e su come piccoli cambiamenti possano dar enormi miglioramenti sotto l’aspetto dell’usabilità. Non è lista esaustiva, ma è certamente un buon punto di partenza.
Se vuoi aggiornamenti su Capire le disabilità nella progettazione di un sito web inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Un caso reale di uso degli AWS Mobile Services e dell’SDK, per mostrare come essi permettano di concentrare l’attenzione unicamente […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Le nuove linee guida sull’accessibilità e le loro relazioni con i contenuti della Legge Stanca
Sono utili? Servono davvero alle necessità del visitatore? Suggerimenti e consigli per scriverle in modo efficace
Semplici trucchi e consigli per migliorare accessibilità e usabilità grazie ai CSS
L’accessibilità è una caratteristica fondamentale dei siti web (e, più in generale, di qualsiasi altra applicazione), poiché concorre a motivare l’utente ad interagire, supportando l’interazione e rendendola più agevole. Questa guida è finalizzata principalmente alla conoscenza ed alla presa di coscienza (anche culturale) del concetto di accessibilità dei siti web, gettando le basi per mettere in pratica i concetti teorici.