Selettori di attributo e accessibilità

Forse qualcuno navigando navigando questo sito con il tasto Tab o lasciando un attimo il cursore su determinati link si sarà accorto che questi vengono evidenziati da un colore giallo di sfondo.

Non si tratta di uno sfizio grafico (oddio, potrebbe essere anche così e non ci sarebbe niente di male), ma di un aiuto fornito a chi ha problemi di mobilità o di ipovisione: lo sfondo evidenzia il link e mostra l’area sensibile utile per la selezione.

La regola CSS che permette di ottenere questo risultato è la seguente:
a[href]:hover, a[href]:focus, a[href]:active{background-color:#FFFFC4; padding:.5em 0 .5em 0;}

La regola utilizza i selettori di attributo e, in pratica, applica all’attributo href dell’elemento <a> un colore di sfondo e viene definita un’area di padding intorno al link.

Il padding definisce la dimensione dell’area sensibile, e quindi estende la possibilità di clic a uno spazio più ampio di quello normale, facilitando così la selezione del link anche a chi utilizza per navigare periferiche alternative o la tastiera.

Annunci

5 pensieri su “Selettori di attributo e accessibilità

  1. ciao Livio! grazie della info, non molti conoscono il valore della pseudoclasse active. ma una domanda: perchè usare il selettore di attributo in questo caso invece che il semplice tag?

  2. forse non ho capito io 😀
    ma non è ridondante dirgli [href] quando comunque tutti i link hanno necessariamente quell’attributo? o era un esempio per mostrare cosa sono i selettori di attributo e come selezionarli?
    grazie 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...