Link accessibili da tastiera

L’importanza di mantenere l’outline sui link, anche utilizzando dei CSS di reset.

Apple KeyboardUna pratica fin troppo diffusa, spesso derivata dall’uso di CSS di reset, è quella di eliminare l’outline dai link e dagli altri elementi attivi di una pagina per scopi puramente estetici, con poche righe di codice:

:focus {
	outline: none;
}

Potrà sembrare una soluzione elegante, ma ai fini dell’accessibilità di un sito è assolutamente sconsigliato, perchè senza outline diventa impossibile navigare tramite tastiera, o comunque con dispositivi diversi da un mouse.

Non pensate che riguardi solo una minoranza di utenti: sono tanti coloro che scorrono il contenuto di una pagina premendo il tasto tab. In molti ad esempio si spostano tra i campi di un form in questo modo: eliminando l’outline sul focus rendete il vostro sito inaccessibile.

Lo stesso Eric Meyer, autore di uno dei più famosi CSS Reset, pur azzerando questo stile raccomanda di definirne altri per sostituirlo. Il mio consiglio è di lasciarlo inalterato per evitare problemi: perchè complicarsi la vita?

Una soluzione alternativa

A volte potrebbe comunque capitare di essere obbligati a modificare lo stile dei link, ad esempio su richiesta di un cliente particolarmente insistente. Un’alternativa in questi casi è lasciare il focus inalterato ed eliminare l’outline dallo stato active:

a:active {
	outline: none;
}

Così non apparirà il bordo tratteggiato al clic, ma la navigazione da tastiera resterà comunque possibile. Non è una soluzione ottimale, ma in situazioni particolari potrebbe essere un compromesso accettabile.

Foto: Macbook Keyboard by alcomm

Il Framework CSS ideale

I Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze. In realtà per me non è così, il mio CSS di base è costruito su misura.

CSS Edit LogoIn questi giorni ho ottimizzato il CSS di base che utilizzo come partenza per tutti i miei lavori. Scartare a priori l’idea di utilizzare un qualsiasi Framework CSS, come Blueprint, è stata la prima cosa che ho fatto.

Per chi non lo sapesse i Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze, ma che almeno nel mio caso complicano solo il lavoro. Spesso proprio questa generalità implica un’inutile mole di codice, che nella maggior parte dei casi non viene utilizzato.

Queste soluzioni non potranno mai essere universali: ognuno è abituato ad utilizzare un metodo diverso, e CSS Reset a parte tutto il resto ha comunque bisogno di essere personalizzato.

E’ appunto solo il CSS Reset di Eric Meyer che uso come punto di partenza, perchè consente di avere una buona coerenza tra i vari browser senza i problemi del reset con il selettore universale “*”.

Nel mio caso ho eliminato i selettori che non utilizzo per alleggerire il codice, ma la base è sempre quella di Eric.

Inoltre una comoda aggiunta per la quale ho rubato l’ispirazione a Piotr, è l’inserimento di una sezione dedicata ai colori utilizzati, all’inizio del CSS. Un comodo riferimento durante lo sviluppo, anche per eseguire al volo dei copia-incolla dei codici esadecimali.

Il risultato finale è un CSS che potete vedere a questo indirizzo, ma che non è pensato per essere adatto a tutti, l’ho realizzato esclusivamente per me.

Il mio consiglio è di ispirarsi alle varie soluzioni che offre la rete, ma costruirsi un CSS di base secondo le proprie esigenze. Solo così potrete ottimizzare i tempi nella scrittura di un foglio di stile.