Eliminare il bordo tratteggiato attorno a un link mantenendo l’usabilità

Rimuovere il bordo tratteggiato dei link in Firefox è relativamente semplice, è sufficiente impostare una regola CSS per i link per assicurarci che non compaia più. Ma facendo questo, non si tengono in considerazione alcuni principi di usabilità per gli utenti che non hanno la possibilità di usare il mouse, e che hanno la necessità di qualche indicazione visiva che segnali loro un collegamento attivo. Per impostazione predefinita, TAB e SHIFT + TAB permettono di spostarsi da un elemento attivabile (collegamenti, i form e textarea) a quella successivo.

La prprietà outline disegna una linea tratteggiata intorno all’elemento cui è applicata: outline è simile a border, nel senso che viene disegnata una linea intorno all’elemento, fuori dal bordo dell’elemento, ma a differenza di border, non è impossibile impostare una larghezza diversa per ogni lato, oppure impostare i colori e stili diversi per ogni lato. La struttura è la stessa su tutti i lati.

La proprietà outline non intacca il box model, non viene aggiunto in alcun modo alla larghezza o altezza dell’elemento.
Per azzerare la sua comparsa, settiamo così i CSS:

a {
	outline:none;
}

Così facendo lo abbiamo azzerato completamente per tutti gli stati del link, per esempio:

/* link - yellow */
/* link visitato - cyan */
/* mouse over sul link - firebrick */
/* link selezionato - lawn green */

a.one:link {color: yellow}
a.one:visited {color: #00FFFF}
a.one:hover {color: #B22222}
a.one:active {color: #7CFC00}

non avranno il bordo tratteggiato.

C’è da notare che le pseudoclassi per funzionare correttamente devono, a causa delle regole della Ereditarietà, cascade, conflitti tra stili, seguire un ordine ben prestabilito: l’ordine in cui vanno inserite in un CSS le dichiarazioni relative ai link è:

1. link
2. visited
3. hover
4. active

Per venire incontro alle esegenze estetiche senza intaccare l’usabilità, la soluzione migliore tra le tante, è settarlo a none solo per lo stato hover e active

a:hover, a:active { outline: none; }

Siamo così sicuri che gli utenti che utilizzano la tastiera potranno vedere i bordi tratteggiati quando scorreranno col TAB su un link e attiveranno lo stato focus.

Chi ha letto questo articolo, ha gradito anche:

1. CSS: Bottoni espandibili con una sola immagine
2. CSS3: compatibilità cross-browser…da oggi!
3. Tabelle HTML: come usarle, quando usarle
4. Cheat Sheets per il Web Design