Capire le disabilità nella progettazione di un sito web

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 USA¹ e il 65% di quelle del Regno Unito² 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.

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!

Problemi di vista – Cecità

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

Inserite istruzioni per i form prima dei campi del form

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.

Figura 1 – Istruzioni messe dopo il campo del modulo

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.

Figura 2 – Asterisco per i campi obbligatori inserito dopo il campo

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.

Figura 3 – Istruzioni e asterisco per i campi obbligatori inseriti prima del campo

Fornire un link del tipo ‘vai al contenuto principale’

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:

Figura 4 – Skip link utili

Assicuratevi che i link siano descrittivi

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:

Figura 5 – Lista dei link in JAWS

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.

Fornite titoli delle pagine descrittivi

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.

Usate brevi testi alternativi

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.

Fornite titoli descrittivi

È 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.

Fornite descrizioni audio e trascrizioni dei contenuti video

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.

Ricordate che chi usa uno screen reader non usa il mouse

È 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).

Problemi di vista – Ipovisione

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.

Evitare di usare immagini in sostituzione del testo

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.

Figura 6 – Immagine con testo magnificata

Assicuratevi che il testo possa essere ingrandito

Fornendo contenuti che possano essere ingranditi, gli utenti con ipovisione potranno modificare le dimensioni del testo nella pagina web per agevolare la lettura.

Inserite le informazioni chiave in punti specifici dello schermo

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.

Usare un buon contrasto dei colori

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.

Problemi di udito

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.

Fornite sottotitoli per i contenuti video

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.

Fornite trascrizioni per i contenuti audio parlati

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.

Considerare l’uso della lingua dei segni

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.

Disabilità fisiche

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.

Assicuratevi che tutti i contenuti siano accessibili da tastiera

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.

Fornite uno stato di :focus per i link

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:

Figura 7 – Link con e senza focus

Fornite skip link visibili

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 target in movimento

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.

Fornite aree cliccabili ampie

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.

Figura 8 – Link troppo ravvicinati

Figura 9 – Link sufficientemente spaziati

Denominate correttamente i link e i controlli con immagini

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à.

Problemi cognitivi e di apprendimento

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 un design consistente

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.

Fornite una mappa del sito

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.

Usate font sans-serif ridimensionabili

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.

Fornite utili messaggi di errore

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.

Offrite l’opzione per i contenuti sotto forma vocale

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.

Offrite una versione semplificata dei contenuti

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.

Fornite differenti schemi di colori

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.

Conclusione

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.