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à :

  1. color, background-color;
  2. line-height, word-spacing,

    letter-spacing, width (per regolare la larghezza del blocco di testo e di conseguenza la lunghezza della riga);

  3. 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.

14 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

provero' la tecnica del text-indent: -1000em, anche se in effetti ho anch'io un po' di timore per google...

Troglos
Troglos

@Claudio: per approfondire il tema da te citato: http://webaim.org/articles/cognitive/

Gabriele Romanato
Gabriele Romanato

Bravo Gabriele, ricordare che i problemi relativi all'accessibilità  non riguardano soltanto gli ipovedenti é fondamentale. Il discorso é valido in particolare per i dislessici che sono praticamente ignorati.

Claudio Garau
Claudio Garau

Un'altra cosa da dire é che gli implementatori di screen reader in genere non fanno parte dei Working Groups del W3C legati ai vari standard. Quindi il supporto dello standard X é legato alle decisioni della singola software house.

Gabriele Romanato
Gabriele Romanato

@William idem come te :-) @Gabriele molti lettori di schermo per Windows si basano sullo stesso parser di Internet Explorer (Trident) quindi ti rispondi da solo :-) JAWS sembra averlo abbandonato dal 2006 ma vallo a sapere!

Marco Grazia
Marco Grazia

uso lo spostamento per nascondere da 6 anni, da quando l'ho scoperta nei libri di gianluca troiani.

William Ghelfi
William Ghelfi

@Paolo Nessun problema con Google. I problemi sono con display: none e visibility: hidden :-)

Gabriele Romanato
Gabriele Romanato

il trucco del testo spostato di 1000em al di fuori del raggio visivo dell'utente é (o almeno era) mal visto da google in quanto lo considera testo nascosto e quindi come un metodo per ingannare lo spider. Ti risulta?

Paolo
Paolo

@Carlo: se il browser supporta il contenuto generato CSS, allora dovrebbe inserirlo. Dico dovrebbe, perché non é chiaro come i lettori di schermo interpretino certo codice passato dal browser. Nel dubbio, la soluzione resta quella di usare i contenuti generati solo per aggiunte decorative.

Gabriele Romanato
Gabriele Romanato

Gabriele, che mi dici a proposito di accessibilità  e contenuti generati? Certo, IE non dovrebbe esser preso in considerazione...

Carlo
Carlo