Web Design  »  Articoli  »  Accessibilità 

Questa è la traduzione dell'articolo CSS for Accessibility di Ann McMeekin pubblicato originariamente su 24 Ways il 13 dicembre 2007.

I CSS sono magici. Se ben usati possono trasformare il più semplice dei documenti in qualcosa di molto accattivante dal punto di vista visuale. Ma bisogna essere consapevoli che non è sempre tutto rose e fiori, e che non bisogna esagerare. In questo breve articolo presenteremo alcuni semplici modi con cui si possono usare i CSS per migliorare l'usabilità e l'accessibilità di un sito.

Attenzione ai colori

Questo non è proprio un sistema per migliorare l'accessibilità. Si tratta più che altro di un memo: controllate sempre di specificare per il corpo della pagina (body) il colore dello sfondo.

Se vi state chiedendo il perché di questo avviso, sappiate che si tratta di una cosa realmente basilare. Vi sorprenderà allora sapere quanto sia rimasta sorpresa nel verificare in un'indagine che ho svolto su più di 200 siti l'anno scorso che il 35% dei siti di autorità locali del Regno Unito non aveva nessuna definizione del colore dello sfondo per l'elemento body.

Dimenticare di specificare il colore dello sfondo sul body può portare a conseguenze spiacevoli, impedendo anche ai visitatori la lettura del testo nel caso in cui usino un diverso schema di colori sul sistema operativo.

Tutto ciò che serve è usare una riga di codice come questa:

Se la abbinate a

sarete certi di mantenere un giusto contrasto per tutte quelle sezioni in cui doveste dimenticare di definire un colore di sfondo e del testo, non importa quale sia lo schema di colori che l'utente preferisce usare.

Ancora meglio, se usate un qualche CSS di reset, assicuratevi che i colori di default per lo sfondo e il testo siano definiti al suo interno. Così non ve ne dimenticherete mai.

Problemi di tipografia

Prestare attenzione alla tipografia è importante, non solo per fare apparire tutto bello ed esteticamente gradevole.

Un uso attento della proprietà line-height può rendere il testo più leggibile, una cosa che aiuta tutti, ma che è particolarmente utile per quanti soffrono di dislessia, persone che tendono a zoomare lo schermo o che semplicemente trovano scomodo leggere molte righe di testo.

Quando le righe del testo sono troppo ravvicinate tra di loro, è possibile che ciò porti l'occhio a saltare delle righe durante la lettura. Un po' di spazio, insomma, va più che bene.

Ciò detto, quando le righe di testo sono troppo distanti, può essere altrettanto negativo, perché l'occhio deve saltare per trovare la riga successiva. Ciò non soltanto spezza il ritmo della lettura, ma può rendere più difficoltoso per quelli che usano lo zoom dello schermo trovare l'inizio della riga successiva a partire da quella che hanno finito di leggere.

Usando una line-height tra 1.2 e 1.6 si può in genere migliorare la leggibilità. Usare poi una line-height senza particolari unità di misura fa sì che si superino le differenti intepretazioni di tali unità di misura da parte dei diversi browser.

Per esempio:

O, se preferite la sintassi abbreviata, così:

Potete vedere alcuni esempi di differente line-height, basati sulla dimensione di default del testo del 100%/1em su questa pagina.

Per approfondire c'è l'articolo Unitless line-heights di Eric Meyer.

Altri articoli

Altre guide

Altre newsletter