L’importanza di mantenere l’outline sui link, anche utilizzando dei CSS di reset.
Una 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
Bell’articolo, complimenti :)
In effetti è un’ottima soluzione.
Questa non la sapevo! (affermazione che del resto esclamo dannatamente spesso, testimoniando la mia immensa ignoranza).
Grazie Tom, per la segnalazione e per l’eccellente soluzione. Ora spero di ricordarmelo…!
Br1
buona soluzione e ne terrò conto per i miei prossimo siti :)
Ottimo!!! Non lo sapevo proprio…. e sono uno di quelli che ama il “tab” per navigare!!!!
mi trovi perfettamente d’accordo :)
Assolutamente d’accordo.
Io lo lascerei inalterato, anche l’active in realtà, perchè rendere difficile l’identificazione dei link ad esempio in un testo …
Bella come soluzione!
Io l’ho disattivato solo per un solo elemento grafico. Anche io ho fatto questa scelta per l’accessibilità. Tra l’altro scoraggio chiunque voglia disattivare l’outline del focus globalmente.
Io opterei per il secondo metodo, che mi pare mantenga comunque un buon livello di accessibilità. A volte lo studio dell’aspetto grafico del layout di un sito può richiedere l’eliminazione di questo elemento.
Su Opera direi che è quasi superfluo, perchè sopostandosi sui link con il tab vengono evidenziati, ma su altri browser come l’amato Firefox questo non avviene.
Magari si può pensare di modificare, se pur leggermente, l’aspetto dell’outline (magari il colore per restare a tema con l’aspetto grafico del sito)