Cos'è il :focus?
È una proprietà CSS che serve per evidenziare link, pulsanti ed elementi interattivi in generale durante i click con mouse e tastiera. Quindi è particolarmente utile durante la navigazione da tastiera perché permette di capire cosa stai cliccando quando scorri la pagina col tasto TAB.
1. Stile classico
Il primo modo di usare :focus è lo stile con la tecnica del doppio bordo (outline + outline-offset) per rispettare meglio il contrasto colore. Basta modificare i parametri in base alle necessità.
:focus {
outline: 2px solid hashtag#F00;
outline-offset: -2px;
box-shadow: 0 0 0 2px hashtag#FFF;
}
C'è solo un problema
E ha a che fare con le persone. Indovina chi sono?
La cliente che dice:
“Quando clicco sui pulsanti vedo un bordo attorno. Puoi rimuoverlo?”
Il designer che dice:
“Non mi piace. Preferisco mantenere uno stile minimalista. Il punto è l’estetica”.
La developer che dice:
“C***o! Mi hanno detto di usare outline:none e quindi risolvo il problema da sola.”
2. Stile disabilitato
Il secondo modo di usare :focus è di non usarlo. Semplice! Soddisferai tutti in un colpo solo: clienti, designer e developer.
:focus {
outline: none;
}
Non lamentarti. Soddisfa sempre le richieste di tutti.
Giusto fare così? È il modo migliore per gestire l’accessibilità web?
Molte volte clienti, designer o developer non ne sanno così tanto sull’accessibilità web.
3. Solo tastiera
Esiste una terza soluzione migliore per usare :focus . È una proprietà CSS aggiuntiva chiamata :focus-visible che mostra il focus SOLO con l’uso della tastiera, mentre se usi il mouse o lo smartphone non cambia niente.
In effetti avevo dimenticato di dire che :focus classico mostra il bordo anche con questi altri dispositivi.
:focus-visible {
outline: 2px solid hashtag#F00;
outline-offset: -2px;
box-shadow: 0 0 0 2px hashtag#FFF;
}Cliente, Designer e Developer diranno:
“Rimosso! Ora è perfetto!”
3 modi per usare la proprietà :focus
È una proprietà CSS che serve per evidenziare link, pulsanti ed elementi interattivi in generale durante i click con mouse e tastiera. Quindi è particolarmente utile durante la navigazione da tastiera perché permette di capire cosa stai cliccando quando scorri la pagina col tasto TAB.
