Quando si realizza un sito web lo studio dell’accessibilità è fondamentale per permettere alle persone con disabilità di percepire, comprendere, navigare, interagire e contribuire nel magico mondo del web.
L’accessibilità è un argomento complesso e il rispetto di pratiche di progettazione standard è spesso percepito come un inibitore della creatività. Rigidi dettami che potrebbero trasformare un progetto sensato ed esteticamente attraente in qualcosa di sterile e privo di personalità, un prodotto digitale come tanti.
Quello che però tutti sottovalutano è che il design accessibile aiuta tutti. Migliora l’esperienza utente non solo per le persone con disabilità, ma anche per chi ha meno dimestichezza con il mondo del web. E, poi, dal punto di vista del gestore del sito, l’acessibilità è un fattore determinante anche per il miglioramento del ROI e delle prestazioni del sito stesso.
Le linee guida standard a cui attenersi per implementare l’accessibilità nei progetti digitali sono moltissime, ma qui abbiamo raccolto 5 aspetti assoluti che funzionano bene e che, dal punto di vista del design, soddisfano gli standard minimi (e/o si avvicinano al livello AA delle Web Content Accessibility Guidelines – WCAG 2.0).
L’accessibilità non è un limite all’estetica di un sito web
Un sito accessibile, studiato per essere compreso e apprezzato da tutti, non è sinonimo di brutto, noioso o scarno.
È vero, l’accessibilità impone delle regole da seguire, ma questi vincoli di progettazione devono essere valorizzati perchè possono contribuire a dar vita a nuove idee e alla realizzazione di prodotti migliori per tutti i vostri utenti.
L’idea di base è di studiare il design e progettare per tutti: tutte le tipologie di utenti che interagiscono con il vostro sito web (o quello del cliente).
Progettate per il vostro pubblico tutto.
Questo significa includere persone non vedenti, daltoniche, dislessiche, ipovedenti, sorde o con difficoltà uditive, persone con disabilità motorie temporanee o permanenti e persone con disabilità cognitive. Oltre alla disabilità bisogna tener conto della eterogeneità del pubblico: persone giovani e anziane, nativi digitali e utenti occasionali cercando di offrire loro sempre un’esperienza utente di qualità.
Accettate quindi la sfida (e le linee guida sull’accessibilità), siamo certi riuscirete a creare siti web e ecommerce sorprendenti!
Volete fare un rapido test del vostro sito web? Installate AXE l’estensione per Chrome.
Questo tool è semplice ma efficace per controllare l’accessibilità.
1. L’ utilizzo del colore nello studio dell’accessibilità 🖍 🎨
Non utilizzate il colore come unico strumento per trasmettere delle informazioni.
Diversi utenti che navigano nel web non sono in grado o hanno difficoltà a distinguere un colore da un altro. Parliamo di utenti daltonici (1 uomo su 12 e 1 donna su 200), ipovedenti (1 persona su 30) o ciechi (1 persona su 188).
Usa il colore per evidenziare o completare ciò che è già comprensibile e chiaro.
Di seguito un esempio in scala di grigi, quanti e quali campi sono evidenziati come in stato di errore?
La maggior parte delle persone sottoposte al test risponde che il ‘campo in errore’ è quello del codice di verifica recaptcha. Questo perché l’icona del triangolo con il punto esclamativo esplicita chiaramente che qualcosa non va.
Ora facciamo la contro prova con lo stesso form ma a colori. Quanti sono i campi segnalati come errore?
La risposta corretta è tutti e quattro i campi! Questa risposta però è corretta solo grazie all’uso e all’interpretazione del colore.
Ci sono diverse soluzioni per rendere questo modulo visivamente accessibile.
È possibile inserire l’icona a forma di triangolo rosso in tutti i campi di errore. È possibile utilizzare del testo a comparsa per indicare e spiegare perché un determinato campo è in errore. È possibile utilizzare diversi accorgimenti grafici o di formattazione: l’uso di icone, lo spessore dei bordi, il testo in grassetto, le sottolineature, il corsivo, ecc.
Le opzioni per informare l’utente sono molteplici, ma è molto importante non usare solo il colore.
Sareste in grado di progettare questo modulo di iscrizione in modo che il colore non sia l’unico elemento grafico per mostrare l’errore di un campo?
2. È leggibile? Assicuratevi che vi sia sufficiente contrato tra il testo e lo sfondo 🔠
Le linee guida del W3C (il World Wide Web Consortium) parlano chiaro: il rapporto di contrasto tra il testo e lo sfondo di un sito web dovrebbe essere almeno 4,5 a 1.
Il rapporto diventa più tollerante con l’utilizzo di un carattere più grande e spesso, poiché è più facile da leggere e necessita di un minor contrasto.
Nel caso in cui il font è di almeno 24px o 19 px in grassetto, il rapporto si abbassa a 3 a 1.
Questi rapporti sono studiati affinchè gli utenti ipovedenti, daltonici o con problemi di vista riescano a leggere correttamente e senza problemi il testo sui vari monitor.
Che il testo sia leggibile è molto importante sempre
. Ci sono alcuni ottimi strumenti che possono aiutarvi ad utilizzare i corretti accostamenti cromatici per i vostri progetti come ad esempio Color Safe. Potete utilizzare anche il Color Contrast Checker di WebAIM per testare i colori che avete scelto.
Consocete Color Oracle? È un’applicazione che mostra in tempo reale ciò che vedono le persone che hanno problemi di vista. Fate un test anche voi!
Anche questa regola non stravolge il vostro sito web o quello del vostro cliente. Utilizzare combinazioni di colori che abbiano un buon rapporto di contrasto richiede attenzione, ma non pregiudica il vostro lavoro.
Per approfondire visita WCAG Visual Contrast Without Color.
3. Fate attenzione ai form 🖋
Negli ultimi anni abbiamo assistito ad una inversione di rotta nell’abito grafico, una de-evoluzione della forma in favore di uno stile minimalista.
Siti web molto puliti, leggeri e senza elementi superflui che riempiono le pagine. Tutto molto bello, ma c’è un però.
Allo stile minimal mancano però due elementi essenziali per l’accessibilità: delimitazioni chiare e definite ed etichette visibili.
I form senza bordi, senza label o con label poco leggibili.Il campo di testo tradizionale di un form è costituito da un rettangolo delimitato da dei bordi, in alcuni casi dotato di uno sfondo, con una label ben visibile, che nell’esempio che segue è posta a sinistra del campo.
I bordi e i confini chiari sono importanti per gli utenti con disabilità motorie e cognitive che utilizzano un dispositivo di puntamento standard o adattivo. Gli utenti con disabilità cognitiva possono avere difficoltà a trovare e interagire con i campi senza indicazioni visive standard.
Diversi layout moderni possono risultare ‘troppo puliti’, privando i componenti essenziali, come i campi di un form di contatto o di completamento, di uno stile ben definito.
È possibile progettare un sito web con un layout minimal ma che rispetti le linee guida dell’accessibilità? Possono essere fatte delle scelte grafiche tenendo conto degli utenti che hanno delle disabilità motorie e/o cognitive?
4. Usate gli ALT (Alternative Text) per le immagini e i contenuti non testuali 🖼
Le persone ipovedenti per navigare online utilizzano uno screen-reader ovvero un lettore che, grazie a un sistema di sintesi vocale, trasforma in ‘voce’ tutto ciò che risulta leggibile nella pagina web, comprese le immagini e i link.
Il tag ALT diventa essenziale per chi ha disabilità visive e utilizza uno screen-reader.
È importante assegnare tramite il tag ALT un significato all’immagine che stiamo utilizzando nella nostra pagina. Può essere significativo anche solo per esplicitare se l’immagine è un elemento prettamente decorativo o se descrive visivamente il testo in cui è inserita.
Ricordiamoci sempre che se non scriviamo alcun testo ALT, alcuni screen reader leggeranno il nome del file all’utente.
Google sta lavorando a un sistema IA di generazione automatica delle didascalie delle delle immagini. Un algoritmo in grado di descrivere le immagini con una precisione del 94%.
Per il momento il nostro consiglio è quello di fornire manualmente un testo che descriva il significato e la funzione delle immagini del vostro contenuto.
Avete due possibilità:
1. Inserire del testo all’interno dell’attributo dell’elemento immagine.
2. Aggiungere una didascalia all’immagine.
N.B.: Per maggiori informazioni sull’uso dei tag ALT per le immagini ma anche per i link e per i bottoni, potete consultare la pagina dedicata dell’Uici, Unione Italiana dei Ciechi e degli Ipovedenti.
5. Strumenti avanzati di supporto alla navigazione ⌨️
Sapevate che alcuni utenti con disabilità motorie, visive o che non hanno un totale controllo muscolare utilizzano la tastiera per la navigazione dei contenuti?
Il supporto alla navigazione tramite la tastiera è uno degli aspetti più critici dell’accessibilità di un sito web.
Fate una prova navigando il vostro sito utilizzando solo la tastiera.
Utilizzate il tasto Tab per spostarvi tra i link e i moduli. Provate a usare il tasto Invio per selezionare un elemento. Verificate che tutti i componenti interattivi siano selezionabili e in ordine. Se riuscite a navigare il vostro sito con la sola tastiera e senza l’utilizzo del mouse, avete già fatto un buon lavoro!
Ultima considerazione, ma non meno importante. Fate attenzione alle dimensioni e allo spazio occupato dalla vostra navigazione: la lunghezza delle voci di menù, la profondità e la complessità delle sottovoci. Per le persone con disabilità motorie può essere impegnativo navigare menu particolarmente strutturati. L’ascolto di link particolarmente lunghi può essere complicato per gli utenti che usano lo screen-reader. Siate concisi.
Per assicurare una più ampia fruibilità dei contenuti è bene valutare di adottare degli strumenti avanzati di supporto alla navigazione come ad esempio delle combinazioni di tasti per l’accesso rapido alle varie sezioni del sito e/o ai collegamenti rapidi della navigazione principale e di contenuto.
N.B.: Per maggiori informazioni visitate W3C Keyboard.
Tool utili dedicati all’accessibilità del web 📌
- WebAIM Color Contrast Checker
- Inclusive Components
- Color Oracle
- Vox Product Accessibility Guidelines
- AXE Google Chrome Extension
Il miglior tool in assoluto è quello di fare dei TEST. Nella fase di studio, quando progettate e prima di rilasciare il vostro sito o la vostra app, è essenziale testare la user experience e l’accessibilità del vostro progetto. Solo testando potrete correggere e migliorare il vostro lavoro.
Per approfondire:
- WebAIM: articoli, risorse e formazione sull’accessibilità del web.
- W3C: la Bibbia sull’accessibilità del web. Troverete eccellenti esempi, suggerimenti e risorse.
L’accessibilità è un potente strumento di progettazione
Le linee guida che abbiamo visto non devono essere intepretate come limiti d’uso di elementi e tecniche innovative di visual design. Al contrario, devono stimolare positivamente la vostra creatività spingendovi a realizzare progetti web visivamente piacevoli che al tempo stesso siano rivolti a un ampio gruppo di utenti.
Quando optiamo per studiate e ragionate soluzioni grafiche che ci sembrano stilisticamente più pesanti o poco moderne, dobbiamo ricordarci che non stiamo progettando un sito web per designer o grafici.
Il nostro lavoro deve potersi rivolgere a un insieme eterogeneo di utenti con esigenze, capacità e tecnologie diverse.
