I CSS possono realmente aiutare le persone che soffrono di una disabilità ? La risposta è sì. Ma di quali categorie di utenti stiamo parlando? Fondamentalmente parliamo di queste categorie di utenti:
- ipovedenti;
- persone affette da cecità ai colori;
- dislessici;
- persone affette da disturbi cognitivi;
- persone affette da disturbi dell'attenzione.
Non ho incluso le persone cieche che usano un lettore di schermo, semplicemente perché questo tipo di tecnologia assistiva non supporta i CSS. Nello specifico, il tipo di CSS che un lettore di schermo potrebbe supportare sono i fogli di stile acustici (aural style sheets), ossia un tipo di fogli di stile adatto al tipo di media di destinazione (audio). Purtroppo i lettori di schermo più usati dai non vedenti (come Jaws e Windows Eyes) non supportano i fogli di stile acustici, se si escludono alcune eccezioni (come Orca su Linux).
Ma cosa possono fare realmente i CSS?
Essi possono:
- impostare un contrasto di colore adeguato tra il testo e lo sfondo (utile per ipovedenti e chi soffre di cecità ai colori);
- regolare l'interlinea e la lunghezza delle righe, nonché la distanza tra lettere e parole (utile per utenti dislessici);
- richiamare l'attenzione dell'utente su un passaggio o su un elemento della pagina (utenti affetti da disturbi cognitivi e deficit dell'attenzione).
tramite le seguenti proprietà :
color
,background-color
;line-height
,word-spacing
,letter-spacing
,width
(per regolare la larghezza del blocco di testo e di conseguenza la lunghezza della riga);color
,background-color
,background-image
, proprietà dei font, proprietà dei bordi;
Inoltre i CSS possono facilitare la navigazione e il posizionamento degli elementi della pagina tramite le proprietà float
e position
. Per esempio, un bug noto di molti lettori di schermo riguarda la dichiarazione display: none
usata dagli autori per nascondere gli elementi non rilevanti. I lettori di schermo, erroneamente, non leggono il contenuto degli elementi con tale dichiarazione. Si può ovviare in questo modo:
.hidden { position: absolute; top: -1000em; }
Usando un valore negativo per la proprietà top
facciamo in modo che i lettori di schermo non cadano in errore. Una variante di questa tecnica può essere applicata al solo contenuto testuale di un elemento:
.hidden { text-indent: -1000em; }
Questa tecnica fa uso della proprietà text-indent
che regola l'indentazione del testo e si applica ai soli elementi di blocco, mentre la tecnica che fa uso del posizionamento negativo può essere applicata a qualsiasi elemento.
In conclusione, il segreto per scrivere CSS accessibili è quello di raggiungere un buon compromesso tra le esigenze del design e quelle dell'accessibilità , ricordando che un layout accessibile non sempre è sinonimo di povertà visuale.