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