Accessibilità web: consigli utili per un design adatto a tutti

La vista è il senso più utilizzato, se non l’unico in molti casi, per la consultazione di un sito web.
Non deve stupire però che tra i nostri utenti ci siano anche persone con disabilità visive: al mondo esistono quasi 40 milioni di non vedenti, che salgono a 250 milioni includendo altre disabilità più o meno gravi (dati del World Health Organization).

Numeri che aumentano ulteriormente se consideriamo le difficoltà create dall’ambiente (scarsa luminosità, schermi vecchi o con colori gestiti in modo non adeguato) o da patologie minori non opportunamente trattate con occhiali (miopie, presbiopie, astigmatismo).

Possiamo dire quindi che ogni 100 visite al sito ci sono almeno 5 utenti con problemi alla vista che potrebbero voler consultare i nostri contenuti.

In cosa consiste l’accessibilità web?

Come fa un non vedente a navigare sul web?
Attraverso alcune tecnologie assistive, come ad esempio gli screen-reader o i display in braille collegati al computer. Lo screen-reader lavora come un interprete, che invia il testo e tutto ciò che risulta leggibile nella pagina al sistema di sintesi vocale che lo trasforma in voce, comprese le immagini e i link.

Realizzare il nostro sito secondo i principi dell’accessibilità web significa quindi adottare scelte di design e progettazione che consentano la navigazione e la consultazione a tutti gli utenti del web.

Oggi, in occasione della Giornata mondiale della vista, ho pensato di raccogliere alcuni suggerimenti per migliorare la leggibilità del nostro sito, in particolar modo per le persone con disabilità visive, non vedenti e ipovedenti.

Impostare un contrasto di colore adeguato tra lo sfondo e il testo

Esistono determinati algoritmi e standard stabiliti dal W3C (World Wide Web Consortium, l’organizzazione internazionale che stabilisce gli standard per assicurare lo sviluppo del web a lungo termine) che indicano quale sia il rapporto ottimale tra il colore dello sfondo della pagina e quello dei testi affinché siano leggibili. In questo sito è possibile verificare se questi standard sono rispettati dal vostro sito, inserendo il codice esadecimale del colore del testo o selezionandolo dall’apposita palette, che verrà comparato con diverse tonalità di sfondo. Maggiore è il numero di test superati (colonna di destra), migliore sarà la sua leggibilità.

Scegliere un carattere tipografico leggibile e di grandezza sufficiente

I font (o caratteri tipografici) non sono tutti uguali, e si suddividono in due categorie principali: i font con grazie, che si prestano meglio alla lettura su carta, e i font senza grazie, che trovano maggior riscontro sul web. Va quindi prestata attenzione al font utilizzato, alle spaziature tra lettere, parole e righe, e naturalmente alla grandezza, in genere non consigliabile inferiore ai 14 pixel.

Etichettare in modo corretto le immagini inserite nel sito

Abbiamo visto prima come lo screen-reader interpreti qualsiasi elemento leggibile presente in una pagina web. In questo caso, il modo migliore per rendere accessibile il nostro sito è di etichettare tutto con precisione: inserire i tag ALT delle immagini e la descrizione, compresi anche quelli del link dei pulsanti, se presenti (per maggiori informazioni puoi consultare la pagina dedicata dell’Uici, Unione Italiana dei Ciechi e degli Ipovedenti).

Utilizzo di acronimi e sigle

Sempre per una miglior lettura e interpretazione da parte dello screen-reader, è opportuno inserire il significato completo degli acronimi o delle sigle presenti nel testo – immaginate di dover comprendere una sigla letta senza interruzioni, e individuare le diverse lettere che la compongono.

Progettare un sito facilmente navigabile

L’utente con disabilità visive attraverso l’uso dello screen-reader deve potersi muovere agevolmente tra i contenuti delle vostre pagine, ma questo consiglio può essere esteso per garantire una buona user experience a chiunque (un utente felice è un utente che resta, e soprattutto che torna, sul nostro sito).
Possiamo facilitare la navigazione attivando le breadcrumbs, letteralmente “briciole di pane”, ovvero le indicazioni che compaiono solitamente nella parte superiore della pagina, che indicano all’utente in che punto del sito si trova in quel momento (ad esempio Home > Categoria > Sottocategoria > Articolo). La costruzione di una sitemap quanto più semplice e coerente gli permetterà di trovare più facilmente ciò che sta cercando.

Form di contatto

Inserire le opportune indicazioni nei form di contatto attraverso i commenti o label (etichette) di campo (ad esempio “Inserisci qui il tuo nome” anziché la semplice voce “Nome”) ne può facilitare la compilazione.

Cosa evitare

Elementi come immagini animate, testi scorrevoli ed effetti in flash vengono difficilmente interpretati dagli screen-reader. Inoltre sfondi sfumati, utilizzo di particolari tonalità di colore (troppo tenui o troppo aggressive) rendono faticosa la consultazione dei contenuti principali anche per gli ipovedenti.