6 consigli per un CSS accessibile

6 semplici metodi per avere un sito più accessibile ed usabile, con un minimo di attenzione nella creazione dei fogli di stile.

I CSS hanno rivoluzionato il mondo del Web Design, permettendo di arrivare ad una separazione totale tra presentazione e contenuti. Sono senza dubbio uno strumento potente, ma a volte è bene usarli con cautela, per evitare problemi di leggibilità e più in generale di accessibilità.

In questo post voglio descrivere 6 semplici metodi per avere un sito più accessibile ed usabile, con un minimo di attenzione nella creazione dei fogli di stile.

1. Colore di sfondo del body

Ne avevo già parlato in passato, ma è sempre bene ricordarlo. E’ fondamentale ricordarsi sempre di settare un colore di sfondo del body:

body {background-color: #fff}

In questo modo sarà garantita una corretta visualizzazione anche per gli utenti che hanno delle impostazioni dei colori non standard.

Se non viene assegnato nessun colore, il rischio è che i visitatori si trovino davanti una pagina illeggibile per colpa dei loro stessi settaggi.

2. Interlinea

Se volete rendere leggibili le vostre pagine, fate in modo che i paragrafi di testo siano ben distanziati tra loro. E’ naturale che il font debba essere sufficientemente grande, ma non bisogna dimenticarsi di usare una line-height tra 1.2 e 1.6.

3. Link riconoscibili

Inutile girarci intorno, i link testuali è bene che siano sottolineati.

Questo però non basta, per raggiungere l’eccellenza è bene utilizzare tutte le pseudoclassi che ci sono a disposizione, ovvero :link, :visited, :hover, :active e :focus.

Differenziate lo stato :link da quello :visited per far orientare meglio i vostri visitatori, e ricordatevi che non esiste solo il mouse. Proprio per questo è bene assegnare i comportamenti della pseudoclasse :hover anche ad :active e :focus.

Non limitatevi ad applicare tutti gli stili solo all’elemento a.

Un esempio pratico:

a:link {
background: #fff;
color: #f00;
text-decoration: underline;
}
a:visited{
background: #fff;
color: #f77;
text-decoration: underline;
}
a:hover, a:active, a:focus{
background: #f00;
color: #fff;
text-decoration: none;
}

4. Font generici

E’ sempre bene ricordare che l’utente per i motivi più vari potrebbe non avere installati i nostri stessi font sul sistema operativo. Per questo motivo è sempre bene specificare un font generico:

body{ font-family: Arial, Verdana, sans-serif; }

Questo font sarà utilizzato in mancanza di alternative.

5. Testi a dimensione variabile

Il problema riguarda IE6 ed i suoi predecessori, ma al momento non è ancora trascurabile. Tutti i testi la cui dimensione è espressa in pixel, non possono essere ingranditi (o rimpiccioliti) dall’utente.

Meglio utilizzare le dimensioni in percentuale o em.

Il futuro, almeno guardando Firefox 3, Opera e IE7, è invece orientato verso la possibilità di zoomare direttamente la pagina.

In ogni caso state sempre attenti a non utilizzare font troppo piccoli per lunghi paragrafi di testo. Un sito leggibile a fatica non potrà mai essere apprezzato.

6. CSS per la stampa

Se avete un foglio di stile per la stampa, dichiarato tramite l’attributo media=”print”, approfittatene per offrire all’utente un’esperienza su misura.

Per prima cosa cambiate il font utilizzando un serif, più leggibile sulla carta stampata. Considerate poi che chi vuole stampare un documento lo fa per il suo contenuto: menu di navigazione, banner, path e altri elementi di contorno diventano inutili, eliminateli.

Seguite queste semplici regole per migliorare il vostro sito, ed i visitatori vi ringrazieranno.