Eliminare Bordo Tratteggiato sui Link in Firefox – CSS

 Oggi vediamo come eliminare il bordo tratteggiato sui link attivi, quando si naviga con il browser Firefox.

Vi è mai capitato di vedere per un istante, dopo la pressione di un link su testo o immagine, una tratteggiatura dell’oggetto? Si tratta della proprietà outline, andiamo a vedere quale codice CSS utilizzare per eliminare questo bordo tratteggiato e mantenere una corretta accessibilità.

La Proprietà Outline

La proprietà outline crea una linea tratteggiata attorno all’elemento, senza influire su dimensioni o margini. Questa proprietà ha lo scopo di rendere accessibili i link anche da navigazioen con tastiera (Tab). Questo tratteggio è molto simile a un border stile dotted, ma non è possibile impostare nessun tipo di stile in dimensioni o colorazione.

Codice CSS

Una delle tecniche da usare, per eliminare la tratteggiatura, è quella di impostare la proprietà outline: none; per lo stato dei link active e hover.

Outline NO – Con compromesso

 In questo modo riusciremo a lasciare invariata l’accessibilità da tastiera e raggiungere il nostro scopo.

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

In questo modo sui link attivi non vedremo il tratteggio, ma la navigazione da tastiera con il tasto tab, sarà sempre visualizzata in modo corretto e accessibile. Poche righe che possono restituirci il sorriso in momenti di panico assoluto, e lasciare invariata l’accessibilità di un sito web.

Outline NO – Senza compromesso

Se invece abbiamo necessità di eliminare il bordo in tutti gli stati dei link ci basterà scrivere in questo modo:

a:focus{
outline:none;
}

Ricordiamoci sempre dell’accessibilità, penso che il primo metodo sia un buon compromesso da scegliere.
Eliminando il Focus non aiuteremo in nessun modo eventuali disabili a navigare il nostro sito.
Per alcuni potrebbe essere un codice banale, ma ricordiamoci che quello che è banale per noi, non lo è per tutti.

via juliusdesign.net

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *