pannello di controllo




Sei qui: Homepage » accessibilità, css, web design » 6 consigli per un CSS accessibile

feb 26 2008

7

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.

Usi Twitter?

Twitter

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

 

7 Commenti a “ 6 consigli per un CSS accessibile ”

  1. complimenti per i consigli, sembrano cosi banali ma alla fine in pochi li rispettano.

  2. Purtroppo non ne capisco più di tanto, ho letto parecchie volte di queste cose ma non è mia materia. Maria

  3. Ottimi suggerimenti, me li metto subito in un post-it da tenere davanti ogni volta che preparo un css.
    Forse manca qualcosa su come gestire i colori, non solo quello di background.
    Bye
    Bonzo

  4. @Bonzo: ho cercato di mettere in evidenza aspetti e dettagli che vengono dimenticati facilmente. Riguardo ai colori ed al contrasto testo-background si spera che un buon Web Designer abbia un minimo di sensibilità, ma ti do pienamente ragione, è un argomento da tenere presente.

  5. Sicuramente non è facile mettere dei punti fermi su questo argomento, dipende molto dai colori scelti. intanto grazie per il posto molto interessante come sempre.

  6. perchè non date degli esempi già fatti?
    tipo per ingrandire i caratteri download di “grande.css” e inserisci questo codice nella pagina..giusto perchè anche chi non ne capisce nulla magari copiando rende più utile il proprio sito?
    So che è comodo ma insomma ne guadagniamo tutti..

  7. Consigli preziosi. Complimenti. Non avevo mai pensato a specificare un carattere serif per la stampa!

Scrivi un commento


Menu secondario

feed

categorie

archivio

extra

Twitter

TomStardust Diary - Il mio blog personale