CSS per l'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.

Trasformazioni della lettera iniziale

Nessuno vuole rivolgersi ai propri lettori urlando. Ma ci sono circostanze in cui uno potrebbe voler usare legittimamente le maiuscole sul proprio sito.

Evitate però disturbi e cose strane nella pronuncia del testo da parte degli screen reader, disturbi e cose strane causate dall'abuso delle maiuscole. Un trucco consiste nell'usare intelligentemente la proprietà CSS text-transform per creare un falso maiuscolo.

Per esempio:

Non abusatene però: il testo tutto in maiuscole è più difficile da leggere del testo normale, per non parlare della cosa dell'URLARE di cui si parlava prima.

I link

Quando si parla di accessibilità, gli utenti costretti ad usare solo la testiera (compresi quelli che usano software per il riconoscimento vocale) che possono vedere bene sono spesso trascurati in favore di quelli che usano gli screen reader.

Mi pare il caso di adattare bene i link a tutti gli utenti.

L'outline dei link

Ovvero: il bordo che indica il focus intorno ad un link. Ovvero: quel box con linea a punti che circonda i link per mostrare all'utente in che posizione del sito si trovano.

Le tecniche riportate qui sotto sono da intendere come un completamento di questa funzionalità. Non intendono rimpiazzarla. Uno può pensare che sia una cosa esteticamente brutta e quindi che è meglio eliminarla. Non fatelo. Ripeto. Non fatelo.

La sottolineatura... non sottolineata

Se si dà ascolto a Jacob Nielsen, ogni link presente su un sito dovrebbe essere sottolineato in modo tale che l'utente sappia sempre che si tratta di un link.

Si può essere in disaccordo con questa posizione, ma se scegliete di usare i link sottolineati, in qualunque stato, allora rimuovete la sottolineatura di default e sostituitela con un bordo distante un paio di pixel dal testo.

La sottolineatura è ancora lì, ma non taglia più la parte inferiore delle lettere che hanno una parte discendente (si pensi alla g e alla y), cosa che rende più facile la lettura.

Tutto è illustrato negli esempi 1 e 2.

Potete modificare le tre righe di codice che presentiamo qui sotto per adeguarle alla palette di colori del vostro sito e allo stile dei bordi che utilizzate, così come potete aggiungere lo stile a qualunque stato dei link:

Evidenziare

Qualunque cosa sciegliate di fare, dovreste sempre essere sicuri che i vostri link siano ben evidenti ed evidenziati nel contesto del testo normale che li circonda nello stato normale, ma soprattutto in fase di hover e focus.

Un buon modo per ottenere questo risultato consiste nell'invertire i colori quando si è in stato di hover o focus.

Un focus efficace

Tutti sanno che con la pseudo-classe :hover si può modificare l'aspetto dei link quando si passa sopra di essi con il mouse. In realtà, le persone che ci vedono bene e usano il mouse sono quelle che meno hanno bisogno di questo ausilio visuale extra, dal momento che il cursore del mouse cambia la sua forma da freccia a manina.

Allora pensiamo anche agli utenti che non possono usare dispositivi di puntamento e sprechiamo un po' di tempo per duplicare l'aspetto dello stato hover usando la pseudo-classe :focus.

Certo, le complicazioni su internet non mancano mai. In questo caso si parla di Internet Explorer con il suo mancato supporto della pseudo-classe :focus. Il browser di Microsoft applica invece la pseudo-classe :active quando un link riceve il focus.

Quello che tutto ciò significa in pratica è che se volete fare in modo che i vostri link cambino sul focus così come sull'hover, dovrete specificare sia :focus, sia :hover, sia :active.

Dal momento, poi, che l'aspetto visivo dovrebbe essere necessariamente lo stesso per questi tre stati, potete combinare il tutto in un'unica regola.

Dunque, se volete ottenere una semplice inversione dei colori per un link e mettere tutto ciò insieme alla sottolineatura non sottolineata, vi basterà usare questo codice:

L'esempio 3 mostra come tutto ciò si concretizza in pratica.

Posizione

Per portare questo esempio alla sua conclusione naturale, potete aggiungere un id="current" (o qualcosa di simile) nel posto giusto nel contesto della vostra navigazione, specificare un set di regole e stili per i link e ottenere una navigazione che mostra subito all'utente in quale pagina o sezione si trova.

Ecco l'esempio e il suo codice.

Conclusioni

Tutti gli esempi mostrati intendono illustrare i concetti e non dovrebbero essere intesi come il miglior modo in assoluto per formattare i link o le barre di navigazione. Non sono poi le uniche cose a cui pensare per migliorare l'accessibilità dei siti. La cosa principale da ricordare è che l'accessibilità è per sempre, non solo per Natale.

Ann McMeekin è un'appassionata di accessibilità e buon design, sia sul web sia nel mondo reale, e crede che nessuno debba essere sacrificato per favorire qualcun'altro. Si tratta di qualcosa su cui si applica da tempo, sia nel suo lavoro (al momento è consulente per l'accessibilità presso la RNIB, e in precedenza è stata web designer) sia nei confronti delle persone che stanno sedute sufficientemente a lungo per ascoltarla. Il suo blog personale è http://www.pixeldiva.co.uk, quello di lavoro http://www.rnib.org.uk/wacblog.