22 requisiti di accessibilità: punto 4 il colore
Eccoci a parlare del 4° punto dei 22 requisiti per rendere un sito accessibile. Ho riassunto il titolo con “il colore”, perchè è proprio il fulcro di questo punto, il cui enunciato è il seguente:
Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
Forse non tutti lo sanno, ma ben una persona su 12 ha problemi di vista di vario genere, pertanto nella creazione del sito non dobbiamo far sì che funzionalità importanti siano affidate al colore.
Un esempio semplicissimo: in molti usano un colore particolare per evidenziare i link all’interno di una porzione di testo: niente di più sbagliato. O meglio, va bene usare il colore, ma dobbiamo necessariamente associarvi anche l’aspetto fondamentale che ci permette di riconoscere un link: la sottolineatura. Questo per quanto riguarda i link presenti in una porzione di testo, mentre ciò non si rende obbligatorio nel caso vi sia un menu di navigazione che sia evidentemente un insieme di link navigabili.
Es:
In questo menu, già graficamente “decorato” con una sottolineatura che separa le voci, sarebbe ridondante oltre che graficamente disturbante inserire un’ulteriore sottolineatura ai link, poichè già da soli vengono riconosciuti dall’utente come un menu navigabile.
Guardate invece questo secondo esempio.
Mi spiace prenderlo in prestito da un sito che seguo spesso, ma credo ne siano già a conoscenza. Il link come vedete è evidenziato puramente da un colore diverso rispetto al testo. Chi frequenta il sito e comunque non ha problemi, dopo qualche tentativo iniziale, a riconoscere i links, ma chi frequenta il sito per la prima volta e soprattutto ha problemi cognitivi con i colori, ecco cosa vedrà:
Ed ecco che la percezione del link scompare. Provare ad evidenziare il link con il grassetto non risolve il problema, perchè crea confusione proprio con la pura evidenziazione del testo “importante”, cosa che di solito facciamo quando usiamo il grassetto. Non si distinguerebbe comunque il link dal resto poichè il grassetto non è la proprietà principale che permette di associare del testo ad un link.
La stessa cosa vale per quando vogliamo evidenziare una voce selezionata del menu: provate a farne una schermata in bianco e nero e notate se l’evidenziazione funziona comunque.
Per aiutarvi a verificare questo punto c’è un sito che fa al caso nostro: Graybit, che ci permette di valutare, di un sito già pubblicato, come si vedrebbe in scala di grigio. E’ molto utile anche per tutte quelle parti di testo o grafica per le quali non abbiamo usato un adeguato contrasto e che risulterebbero illeggibili per chi ha problemi di cognizione del colore. Ma di questo parleremo in un altro punto dei nostri requisiti.
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Aggiungi a Google
3 Commenti
Bell’articolo. Durante un corso di web design sono rimasto veramente sbalordito dai disturbi della vista riguardo la percezione dei colori (conoscevo solo il daltonismo).
Lauryn, ma stai facendo una sorta di rubrica dove tratti ogni punto dei requisiti di accessibilità? Perché in tal caso devo essermi perso le prime puntate
Sì Torejx! Magari ne faccio un link utile che li raccoglie tutti.
http://www.italianwebdesign.it/index.php?s=22+requisiti
[...] requisito numero 6 si rifà molto anche al numero 4 sull’uso del colore: Enunciato: Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo [...]