Come verificare l'accessibilità di un sito web per i daltonici con Chrome Devtools

Garantire che il sito web sia accessibile per tutti, inclusi i daltonici, è fondamentale per una buona user experience.

Cos'è il daltonismo?

Il daltonismo è una condizione in cui una persona ha difficoltà a distinguere certi colori. E' noto anche come deficit della visione dei colori.

A livello globale, si stima che circa l'8% degli uomini e lo 0,5% delle donne siano affetti da qualche forma di daltonismo. Secondo le stime delle Nazioni Unite per il 2023, la popolazione mondiale è di circa 8 miliardi di persone. Di questi, approssimativamente 4 miliardi sono uomini e 4 miliardi sono donne. Usando queste stime, circa 320 milioni di uomini (8% di 4 miliardi) potrebbero essere daltonici. Circa 20 milioni di donne (0,5% di 4 miliardi) potrebbero essere daltoniche. In totale, quindi, ci sarebbero circa 340 milioni di persone daltoniche nel mondo. Un dato che non può essere ignorato.

Grazie a Chrome Devtools, si può analizzare facilmente la visibilità del tuo sito per chi ha difetti alla vista, come il daltonismo e non solo.

Aprire Chrome Devtools
Vado su Google Chrome e navigo sulla pagina del sito web che voglio analizzare. Poi premo F12 sulla tastiera o faccio clic con il tasto destro sulla pagina e seleziono la voce "Ispeziona".
Accedere alla funzionalità di emulazione dei difetti della vista
All'interno di Devtools, faccio clic sui tre puntini verticali nell'angolo in alto a destra del pannello Devtools. Poi seleziono "Altri strumenti" e infine "Rendering".
Emulare i difetti della vista
Scorro la pagina verso il basso fino alla sezione "Emula difetti alla vista". Qui ci sono diverse opzioni per emulare difetti visivi, inclusi vari tipi di daltonismo. Ad esempio, la vista annebbiata, il contrasto ridotto, la protanopia (assenza di sensibilità al rosso), la deuteranopia (assenza di sensibilità al verde), la tritanopia (assenza di sensibilità al blu) e l'acromatopsia (nessuna sensibilità ai colori). Seleziono l’opzione di daltonismo che desidero emulare.
Analisi del risultato
Osservo come il sito appare sotto l'emulazione del daltonismo. Verifico se i colori e i contrasti utilizzati sono sufficientemente distinguibili. Se noto che alcune combinazioni di colori sono difficili da distinguere, considero di cambiarle. Mi accerto che i colori abbiano un contrasto sufficiente per tutti. Inoltre, mi assicuro che i testi siano leggibili e gli elementi interattivi chiaramente identificabili. Ecco un esempio di emulazione della vista dello schermo in caso di protanopia (assenza rosso).

Assicurarsi che il proprio sito sia accessibile a una vasta gamma di utenti è non solo un dovere morale ma anche una buona pratica di sviluppo.

In precedenza era difficile fare queste analisi e si ricorreva al buon senso.

Esempio pratico. Se il sito web ha pulsanti con testo rosso su sfondo verde, questa combinazione potrebbe risultare indistinguibile per un daltonico. In questi casi dovrei considerare di cambiare i colori per migliorare il contrasto. Invece di affidarmi solo ai colori per indicare uno stato (come rosso per indicare l'errore e verde per il successo), utilizzo anche icone o testo esplicativo. Sono solo alcune delle buone pratiche più frequenti.

Oggi esistono strumenti gratuiti come quelli disponibili in Chrome Devtools che permettono facilmente analizzare e migliorare l'accessibilità del tuo sito per i daltonici, creando un'esperienza web inclusiva per tutti.

E così via.