CSS: benefici per l’accessibilità 

martedì 28 dicembre 2010 - 9:20

di Gabriele Romanato

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

  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.

Categoria: CSS | Commenta

Commenti per CSS: benefici per l’accessibilità 

Interessante Gabriele, purtroppo l’utilizzo del position al posto del display per nascondere alcuni elementi viene utilizzato molto poco dai designer, anche in elementi fondamentali per la navigazione (soprattutto menu), rendendo spesso le pagine inaccessibili a utenti che usano lettori di schermo.

# - Postato da Alessandro 28 dicembre 2010 alle 09:44

Si, il punto é anche che molti framework JS usano sempre display: none e quindi tutti gli effetti che ne derivano si basano su questa dichiarazione. L’impatto di quest’approccio fa si che con l’interazione utente-sito gli utenti che navigano con lettori di schermo siano i più penalizzati.

# - Postato da Gabriele Romanato 28 dicembre 2010 alle 10:43

In effetti é vero: non uso position, ma display e ci sto riflettendo quasi soltanto adesso.

Il problema é logico: -1000em significa di fatto nascosto agli occhi dell’utente, ma praticamente così non é. Bella riflessione, Gabriele!

# - Postato da Kiko 28 dicembre 2010 alle 11:00

Per gli oggetti che si vogliono rendere invisibili, invito a leggere:

http://webaim.org/techniques/css/invisiblecontent/

http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content

e a prendere come riferiemnto

https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L200-217

# - Postato da Slam 28 dicembre 2010 alle 11:30

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

# - Postato da Carlo 28 dicembre 2010 alle 12:34

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

# - Postato da Gabriele Romanato 28 dicembre 2010 alle 17:13

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?

# - Postato da Paolo 28 dicembre 2010 alle 17:31

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

# - Postato da Gabriele Romanato 28 dicembre 2010 alle 18:28

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

# - Postato da William Ghelfi 29 dicembre 2010 alle 00:49

@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!

# - Postato da Marco Grazia 29 dicembre 2010 alle 14:24

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.

# - Postato da Gabriele Romanato 29 dicembre 2010 alle 14:52

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.

# - Postato da Claudio Garau 3 gennaio 2011 alle 10:34

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

# - Postato da Gabriele Romanato 3 gennaio 2011 alle 10:40

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

# - Postato da Troglos 4 gennaio 2011 alle 10:53

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>