Diodati.org - Accessibilità e traduzioni dal W3C

Sponsor ufficiale di Diodati.org: Hosting a partire da 25 euro/anno | Domini a partire da 10,79 euro/anno | Server dedicati a partire da 120 euro/mese

Rendere accessibile la presentazione di un sito è un obiettivo che coinvolge evidentemente anche l'uso del colore. Possiamo ricorrere ai CSS per separare i contenuti dalla loro presentazione, ma se i colori definiti nei fogli di stile generano combinazioni tra primo piano e sfondo poco visibili, la presentazione grafica della nostra pagina sarà inaccessibile. Poiché la grande maggioranza degli utenti riceve le informazioni attraverso la vista, ecco allora che un uso appropriato del colore diventa fondamentale ai fini dell'accessibilità.

Le WCAG 1.0 dedicano all'uso del colore la linea guida numero 2, che dice molto sinteticamente: Don't rely on color alone, ovvero Non basatevi esclusivamente sul colore. Che cosa significhi ciò viene chiarito subito dopo: Assicuratevi che testi e grafica siano comprensibili se visti senza colore. A questa raccomandazione fanno capo due punti di controllo. Ecco cosa dicono:

2.1 Assicuratevi che tutte le informazioni veicolate per mezzo del colore siano disponibili anche senza colore, per esempio attraverso il contesto o la marcatura. [Priorità 1]

2.2 Assicuratevi che le combinazioni di colore di primo piano e di sfondo forniscano un contrasto sufficiente quando viste da qualcuno affetto da deficit percettivi dei colori o quando viste su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo].

Si tratta di raccomandazioni di cui è facile intuire l'importanza ai fini dell'accessibilità. Sorprende, però, lo scarso rilievo dato dalle WCAG 1.0 al contrasto tra primo piano e sfondo per quanto riguarda i testi: il relativo punto di controllo (2.2) ha infatti solo priorità 3. Che i testi siano ben contrastati e facilmente leggibili anche da chi soffre di cecità ai colori è posto quindi non tra i requisiti obbligatori per garantire l'accessibilità - nel qual caso il punto di controllo 2.2 avrebbe avuto priorità 1 - ma tra quelli facoltativi, come se fosse cioè qualcosa di cui si può fare a meno senza troppo danno. Viene anzi dato più rilievo al contrasto di colore nelle immagini, che viene indicato come priorità 2.

Inutile precisare che in questo caso non siamo per nulla d'accordo con le WCAG 1.0. Suggeriamo agli sviluppatori di pagine web di considerare un testo sufficientemente contrastato rispetto allo sfondo come un requisito fondamentale per un sito ad elevata accessibilità. Prima di applicare definitivamente una data combinazione di colori, sarebbe buona cosa organizzare delle prove di leggibilità dei testi, effettuate sia con utenti affetti da ipovisione sia con utenti affetti da forme di cecità ai colori.

Per quanto riguarda questi ultimi, i colori più problematici da discriminare sono innanzitutto il rosso e poi il verde. Il tipo di cecità ai colori più diffuso è la protanopia, che è appunto una cecità più accentuata per il colore rosso, che colpisce una percentuale non trascurabile della popolazione maschile (la cecità ai colori è meno diffusa tra le donne). Segue la deuteranopia, ovvero una cecità più accentuata per il colore verde. Gli appartenenti a questi due gruppi confondono tra loro il rosso e il verde (i protanopi confondono anche il rosso col blu). Il terzo difetto in ordine di diffusione è la tritanopia: chi ne soffre confonde tra loro il giallo e il blu. Il deficit più penalizzante per la percezione dei colori è infine l'acromatopsia: chi ne è colpito soffre di un'estrema sensibilità alla luce, di completa (o incompleta) cecità ai colori e di bassissima acuità visiva.

Per dare un'idea di come la cecità ai colori influenzi la percezione di una pagina web, abbiamo preparato un'immagine campione per ciascuna delle forme di cecità sopra citate. Gli esempi sono stati realizzati utilizzando i filtri software disponibili sulla pagina "Colorblind Web Page Filter" e mostrano quattro differenti "visioni" della prima pagina del sito Diodati.org. Ecco di seguito i collegamenti ai quattro esempi (la loro affidabilità risente, naturalmente, della capacità di resa dei colori del sistema - monitor più scheda grafica - su cui vengono visualizzati, nonché della trasformazione delle immagini nel formato GIF, limitato a 256 colori):

• la pagina di esempio vista da un individuo affetto da protanopia
• vista da un individuo affetto da deuteranopia
• vista da un individuo affetto da tritanopia
• vista da un individuo affetto da acromatopsia

Un tricromato - cioè una persona che distingue normalmente i colori - può utilizzare la versione ufficiale della prima pagina di questo sito, in Rete ad http://www.diodati.org/index.asp, come riferimento per verificare i "veri" colori della pagina.

Un utile ausilio, per una scelta dei colori che tenga conto delle percezioni falsate di chi soffre di cecità ai colori, è offerto dalle tabelle disponibili sul sito BT Exact. Alla pagina http://more.btexact.com/people/rigdence/colours/colours2.htm è presente una tabella che mostra sulla sinistra, dall'alto in basso, i 216 colori della cosiddetta tavolozza "web safe" e sulla destra, via via, il medesimo campione di colore visto da chi è affetto da protanopia, da deuteranopia e da tritanopia. In tal modo lo sviluppatore, se ha scelto i suoi colori di primo piano e di sfondo dalla tavolozza "web safe", ha la possibilità di valutare se, per ciascuno dei tre deficit citati, la coppia primo piano/sfondo prescelta risulti sufficientemente contrastata.

Come raccomandazione generale, gli sviluppatori dovrebbero considerare come priorità assoluta che tra primo piano e sfondo vi sia il massimo contrasto possibile e, soprattutto, che questo contrasto non sia il risultato di una semplice differenza di tono dei colori (ovvero di frequenza, "hue" in inglese), come nel caso per esempio di un verde e di un rosso ugualmente saturi, ma sia piuttosto il risultato di una differenza di luminosità. Le differenze di luminosità sono infatti percepibili anche da chi soffre di cecità ai colori (sia pure con delle variazioni sensibili rispetto ai tricromati), mentre le differenze di tonalità possono risultare per loro, in certi casi, del tutto invisibili.

Figura 2 - Tra il rosso e il verde del campione di sinistra c'è solo una differenza di tonalità. Eliminate le componenti cromatiche, i due colori diventano una medesima tonalità di grigio. Tra il marrone e il verde del campione di destra c'è invece anche una differenza di luminosità, che, una volta eliminate le componenti cromatiche, rende visibile la differenza tra i due grigi che si ricavano.

Un elevato contrasto tra primo piano e sfondo garantisce, inoltre, una buona leggibilità anche per gli ipovedenti. Per quest'ultima categoria è importante, tra l'altro, che i colori utilizzati non siano eccessivamente luminosi e saturi, altrimenti possono andare incontro a fastidiosi fenomeni di abbagliamento. Un'interessante tabella per la scelta dei migliori accoppiamenti di colore per soggetti ipovedenti è stata sviluppata da Franco Frascolla, dell'Associazione Nazionale Subvedenti.

Una seconda, importante raccomandazione, per garantire una buona leggibilità dei testi agli utenti affetti da ipovisione e cecità ai colori, è quella di evitare assolutamente di inserire sfondi grafici compositi sotto i testi.

Come abbiamo visto, è già difficile operare una scelta tra colore di primo piano e di sfondo quando lo sfondo è costituito da un solo colore. Ma quando lo sfondo è un'immagine costituita da una trama complessa di colori, mantenere un contrasto sufficiente con il testo diventa pressoché impossibile: alcune zone dell'immagine di sfondo conserveranno magari un sufficiente livello di contrasto, altre zone no. La presenza di un'immagine sotto il testo distrae inoltre l'attenzione del lettore. Il rischio è quello di aver causato una fastidiosa ed inutile forma di tortura ai danni degli occhi di chi, affetto da deficit visivi, si sta sforzando di leggere il testo nella pagina.

La leggibilità peggiora poi ulteriormente, quando si blocca la posizione dell'immagine di sfondo: il movimento disaccoppiato del testo rispetto allo sfondo rende ancora più penoso lo sforzo di chi tenta di leggere i contenuti.

Figure 3 e 4 - Due esempi, tra gli innumerevoli disponibili in Rete, di testi posti su sfondi grafici. Soluzioni di questo genere sono deleterie per l'accessibilità

Un altro accorgimento importante per favorire l'accessibilità - come suggerisce il punto di controllo 2.1 delle WCAG 1.0 - consiste nel rendere disponibili anche in altre modalità indipendenti dal colore le informazioni che dipendono da una corretta capacità di percepire i colori.

Un esempio pratico di tale accorgimento è disponibile negli indici cronologici dei forum di Diodati.org. In questi indici vengono comunicate, per mezzo di quadratini diversamente colorati posti prima del titolo di ciascun messaggio, due informazioni: se si tratta di un messaggio che apre una nuova discussione oppure di una risposta, e se ha già ricevuto delle risposte oppure no.

Ma come fare per comunicare la stessa informazione anche a chi non percepisce i colori o a chi naviga con uno screen reader, con una barra braille o con un browser con il caricamento delle immagini disabilitato? La soluzione scelta è stata quella di inserire la medesima informazione in forma testuale, come valore di un attributo "title" all'interno dell'elemento A che contiene il titolo del messaggio. In tal modo, chi usa un browser grafico ed ha difficoltà a percepire i colori dei quadratini può vedere l'informazione come un messaggio a comparsa che appare al passaggio del mouse sul testo del collegamento; chi invece usa una tecnologia assistiva, può ricevere direttamente dal programma la lettura del valore dell'attributo "title".

Figura 5 - Passando il mouse sul titolo di un messaggio, appare un testo che contiene la medesima informazione comunicata dal quadratino colorato che precede il titolo.

In conclusione di argomento, s'impone una considerazione. Da quanto detto finora a proposito dell'uso del colore, potrebbe sembrare che sviluppare pagine accessibili voglia dire rinunciare alla possibilità di avere siti molto colorati e curati nell'estetica.

Non è proprio così. I limiti di non utilizzare colori abbaglianti e di non inserire immagini in movimento, che non possano essere fermate dall'utente, non penalizzano eccessivamente la creatività grafica. Qui non si sta dicendo di non utilizzare immagini o animazioni, ma di non utilizzarle come sfondo del testo. Per il resto, i creativi sono liberi di inventare le decorazioni grafiche più suggestive e complesse, purché queste non siano in conflitto con la leggibilità dei testi e purché le eventuali informazioni da esse comunicate siano disponibili anche in altre modalità, indipendenti dalla capacità dell'utente di percepire i colori.