Personalizza il sito:

pannello di controllo

Sei qui: Homepage » accessibilità, css » Link accessibili da tastiera

ott 29 2009

9

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

Usi Twitter?

Twitter

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

 

Classificato in accessibilità, css.

9 Commenti a “ Link accessibili da tastiera ”

  1. 29 ottobre 2009 alle 12:15

    Francesco Caruccio

    Bell’articolo, complimenti :)
    In effetti è un’ottima soluzione.

  2. 29 ottobre 2009 alle 12:36

    Bruno

    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

  3. 30 ottobre 2009 alle 11:56

    Luca

    buona soluzione e ne terrò conto per i miei prossimo siti :)

  4. 1 novembre 2009 alle 16:03

    Luca Colli

    Ottimo!!! Non lo sapevo proprio…. e sono uno di quelli che ama il “tab” per navigare!!!!

  5. 3 novembre 2009 alle 18:24

    Lauryn

    mi trovi perfettamente d’accordo :)

  6. 3 novembre 2009 alle 19:05

    yeswebcan

    Assolutamente d’accordo.
    Io lo lascerei inalterato, anche l’active in realtà, perchè rendere difficile l’identificazione dei link ad esempio in un testo …

  7. 3 novembre 2009 alle 19:15

    Benessere

    Bella come soluzione!

  8. 4 novembre 2009 alle 00:38

    DnaX

    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.

  9. 5 novembre 2009 alle 00:12

    Marco Pedota - Studio grafico Artistiko

    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)

Scrivi un commento

»
«

Menu secondario

feed

801 lettori

Iscriviti al Feed RSS

categorie

archivio

risorse esterne

extra