Front End
Siti accessibili css

Css per tutti :focus-visible e accessibilità

Frank Vessia
16 ott 2020
Tempo di lettura: 2 minuti, 37 secondi

Usabilità nei siti, un aspetto un pò trascurato da non sottovalutare, vediamo come usare la classe :focus-visible


Come ben saprai i links hanno diversi stati, normale, hover, visitato e focus e proprio quest'ultimo spesso viene tralasciato e trascurato, accorpandolo ad altri stati come il visited oppure nascondendolo cioè non differenziando da altri stati. Questa pratica però non è una buona cosa da fare poichè ci sono persone con disabilità che utilizzano esclusivamente la tastiera e altre periferiche per navigare su un sito web e bisogna quindi dare a tutti la possibilitò di fruizione di un contenuto, non di meno l'accessibilità è un parametro richiesto dai motori di ricerca.

:focus-visible in soccorso

Il problema nasce dal fatto che mettere in evidenza lo stato focus viene visto come una forzatura grafica che spesso non abbellisce lo stile e non si amonizza con il resto del sito. Se dovessimo usare il focus normalmente, avremmo questo effetto sui links:

Classe focus di un link

L'utente lo percepisce quasi come fosse un errore e di certo non è un bel vedere. Fino ad ora quello che succede per ovviare a questo problema è di trovare questo nel css:

a:focus {
    outline: none;
}

Ora non avremo più quel brutto contorno sui links, ma come detto poc'anzi questa è una forzatura ed è una chiara scelta di voler escludere una fetta di utenti dal poter accedere ai nostri contenuti, non bisogna farlo. C'è un modo infatti per ovviare a questo, ovvero la pseudo classe :focus-visible.

Come usare la class :focus-visible

Leggendo la documentazione ufficiale si capisce come questa sia stata creata per permettere di identificare lo stato di focus solo nei casi in cui è necessario renderlo visibile, nascondendolo in tutti gli altri.

Questo è proprio quello che ci serve, utilizzando questa pseudo classe potremmo dire al browser di mostrare lo stile applicato (generalmente un outline o comunque un bordo o un'ombra) solo quando richiesto, per esempio quando usiamo il tab della tastiera. Ecco un esempio di come impostare il tutto:

a:focus{
    box-shadow: none;
    outline: 0; 
}
a:focus:not(:focus-visible){
    box-shadow: none;
}
a:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 2px #ce47d6;
}

Con questo codice diciamo di non impostare nessuno stile sul focus e in quelle situazioni in cui non è necessario, per esempio sul focus tramite mouse, successivamente impostiamo lo stile che desideriamo (in questo caso un'ombra colorata sfumata) per gli altri casi, risultato: nell'utilizzo normale non avremo nessun effetto indesiderato, ma con l'utilizzo della tastiera vedremo comparire il nostro "bordo" intorno ai links.

Abbiamo quindi mantenuto un aspetto coerente con lo stile del nostro sito, senza "errori" e lasciando la possibilità a tutti gli utenti di fruire correttamente e senza impedimenti i nostri contenuti.

Problema risolto?

Quasi, ma la strada è quella giusta, solo perchè questa classe non è ancora supportata da tuti i browser (sopratutto in ambito mobile) ma nel tempo lo sarà. Maggior informazui a questo link

E' possibile utilizzare un polyfill per garantire la compatibilità anche con browser molto vecchi o con safari.

Conclusioni


L'usabilità di un sito è un tema molto discusso che dovrebbe sempre essere preso in considerazione nello sviluppo di un progetto web, questo è solo uno degli esempi che ti permettono di non tagliare fuori una fetta di utilizzatori e mantenere il tuo sito con l'aspetto desiderato.