Inizia una nuova rubrica su JuliusDesign, CSS Trick in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.
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.
Segnala un Tuo CSS Trick!
Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?
Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!
Conoscevi questo codice CSS?
Lascia un Mi Piace se non conoscevi questo Trick, o se ti piace la rubrica.
15 Commenti
E’ vero che stupido: per non soffermarmi troppo sul problema ho sempre tolto l’outline dal tag “a” in generale.
Grazie Julius salvatore dell’accessibilità!!! :)
mmmm perdonami ma qui dissento. lo dici tu stesso nell’articolo: “Questa proprietà ha lo scopo di rendere accessibili i link anche da navigazioen con tastiera (Tab).” – Il fatto che sia visibile con il tab la rende automaticamente accessibile, nel momento in cui la togli, la sua utilità va a farsi benedire. quindi la successiva frase non ha senso: “In questo modo riusciremo a lasciare invariata l’accessibilità da tastiera e raggiungere il nostro scopo.” anche perchè attivare la tabulazione dipende da un tag html che si chiama tabindex e non dalla grafica attivata dal css.
Lauryn ha scritto:
In effetti siamo molto “border-line” in termini di accessibilità, ma se una persona digita un elemento dovrebbe sapere cosa stava selezionando… poi digitando tab andrà al secondo tabindex e cosi via.. penso che su siti non troppo complicati possa essere un buon compromesso…
Ciao, sono delal stessa idea di Lauryn. Il bordo tratteggiato esiste proprio per motivi di accessibilità che probabilmente per il navigatore medio posso anche creare fastidio “visivo”, ma non dimentichiamoci tutti quei navigatori diversamente abili che invece considerano indispensabili alla navigazione questi aiuti, dove la navigazione è già difficile per loro. Togliendo tali aiuto precludiamo ad una parte dei visitatori la possibilità di navigare all’interno del sito ed inoltre commettiamo un errore “etico”, chiamiamolo così. Secondo me questo andrebbe scritto chiramente nel post, non solo “Questa proprietà ha lo scopo di rendere accessibili i link anche da navigazioen con tastiera” ma anche il risvolto della medaglia che ho illustrato.
Ciao
Daniele Ferla
@ Julius: come segnalavo anche su facebook, chi ne fa uso non usa il mouse, ma deve poter accedere al sito fin da subito con il tab. se non viene selezionata in alcun modo la voce active, come fa a sapere cosa sta per selezionare? immagina una persona senza mouse e l’esempio sarà molto più semplice.
Daniele ha capito in pieno cosa intendo :)
Lauryn ha scritto:
Infatti il compromesso di usare a:active outline: none e NON a:focus outline: none non è li per caso…
Se entri su JD la tabulazione
è correttafunziona :DIo ti ringrazio julius, stavo proprio chiedendomi come togliere quei puntini tratteggiati dalla navigazione. Per me l’accessibiita’ deve essere proporzionata ai contenuti. Intendo che un sito “pubblicitario”, che ha come primo aspetto il visual e la comunicazione puo’ avere carenze di questo tipo. Un portale o grandi siti informativi assolutamente no. A volte per il miglior risultato bisogna fare compromessi.
Grazie ancora julius!
Ciao, sicuramente ne io ne Lauryn siamo qui per polemizzare, stiamo solo cercando di far capire quanto quei puntini che a noi sembrano fastidiosi per altri sono indispensabili; ogni webdesigner (ed in generale ogni navigatore) deve sapere a cosa servono, detto questo ogniuno di noi è tenuto a valutarne (su un sito piuttosto che un altro) se usarli o meno.
Buona giornata a tutti
Daniele Ferla
@ Julius:
fossi in te sottolineerei che lasciarlo sul focus è molto importante e mi dilungherei sul perchè (da quel che leggo molti non sanno perchè esiste). sull’active sono d’accordo anche io che possa dare fastidio…contribuiamo a diffondere conoscenza sull’accessibilità :) concordi?
@Lauryn: concordo, ho evidenziato meglio le problematiche di un focus none
io lo applico su *{}
:)
@ Marco:
idem
Non per fare spam, ma l’avevo anticipato già io nel mio blog e con un metodo più efficace in quanto il tuo metodo non funziona con gli input ma solo con tutti gli altri tag.
Guarda qui:
http://www.skimbu.it/2011/02/23/firefox-e-lo-storico-problema-delloutline-come-rimuoverlo/
e su internet explorer e gli altri browser????
a cosa mi serve eliminarla solo da firefox…si arriverà a questo risultato?
grazie megu. grazie