Tuesday, July 23, 2019
Home / Web  / 7 tips UI/UX per aiutare gli utenti del web affetti da Daltonismo

7 tips UI/UX per aiutare gli utenti del web affetti da Daltonismo

Nella progettazione per il web molto spesso l'accessibilità per gli utenti affetti da daltonismo, quasi l'8% del totale, viene trascurata.

Nella progettazione per il web molto spesso l’accessibilità per gli utenti affetti da daltonismo viene trascurata. Circa il 4,5% della popolazione è affetta da forme di cecità ai colori; si sale all’8% se si considera l’utenza maschile.

 

Di seguito 7+1 accorgimenti che possono fare la differenza, di cui può beneficiare l’utenza nella sua interezza:

 

1. Leggibilità del testo in funzione del contrasto con lo sfondo.

Controllare che il livello di contrasto nella combinazione colore/sfondo sia compliant con gli standard degli accessibilità, tramite strumenti come quello messo a disposizione da WebAIM.

 

2. Leggibilità del testo su uno sfondo fotografico.

Aumentare la leggibilità dei testi posizionati sopra fotografie o altre immagini non piatte aggiungendo una retinatura a contrasto o tramite un ombra esterna proiettata dal testo sullo sfondo.

 

3. Leggibilità delle etichette dei moduli.

Molto spesso i placeholder utilizzati all’interno dei campi di input sono molto poco contrastati rispetto alo sfondo e risultano difficilmente leggibili; aumentare il contrasto sarebbe altresì sconsigliabile poiché renderebbe difficile distinguere il testo di questi ultimi dai dati effettivamente inseriti dall’utente. Per una migliore accessibilità la best-practice è l’utilizzo di label chiare e poste esternamente ai campi.

 

4. Facilità nell’individuare links ed altri elementi interattivi.

Troppo spesso nei siti web il compito di evidenziare elementi interattivi come un link è affidato al solo diverso colore. Aggiungere una sottolineatura ed elementi di interazione come un corsor:pointer può migliorare l’esperienza di utenti daltonici.

5. Facilità nel distinguere i pulsanti principali.

Molto spesso i pulsanti legati ad azioni principali si distinguono da quelli accoppiati a funzioni secondarie solamente tramite l’utilizzo del colore. Considerare di sfruttare icone, dimensioni e posizionamento può facilitare l’interazione.

 

6. Facilità nel distinguere la natura dei messaggi di alert.

È pratica comune evidenziare i messaggi che portano un feedback positivo in verde e quelli a contenuto negativo in rosso; a favore degli utenti daltonici, ma non solo, è bene ribadire la differenza tramite l’utilizzo di “Errore:” o “Successo:”, e/o icone posti prima del contenuto dell’alert.

 

7. Combinazioni colore.

Alcune coppie di colori risultano particolarmente difficili da distinguere e sono pertanto da evitare nella progettazione di una pagina accessibile, ad esempio:

  • verde/rosso
  • blu/grigio
  • verde/grigio
  • verde/marrone
  • blu/viola
  • verde/blu
  • verde chiaro/giallo

 

Bonus tip: Chiarezza nelle didascalie delle immagini.

Specificare nel testo, ad esempio nel titolo della pagina o nella descrizione, il colore di un prodotto o di altro oggetto rappresentato in una fotografia, evitando di affidare alla sola immagine a colori il compito di trasferire l’informazione.

francesco.leonardo@ilas.com

Designer/Developer eclettico "made in ILAS". Dopo essermi diplomato in Web Design, Graphic Design e Pubblicità Art&Copy magna cum laude, ho avviato collaborazioni con agenzie di comunicazione di rilievo nazionale, partecipando a progetti di Web Design e Development, Brand Identity Development, Grafica Editoriale e Advertising. "Ci sono molti modi di risolvere un problema, ma uno solo è quello giusto". Vivo la mia professione secondo questo dettame, che si riflette anche sull'approccio che ho alle mie altre passioni: la cucina, la birra craft, la lettura, i viaggi. Dal 2015 torno in ILAS in qualità di docente nel Corso di Web Design Pro Responsive.

Review overview