Focus visibile

Silktide verifica che i controlli della pagina — link, pulsanti e campi dei moduli — cambino visibilmente quando vengono selezionati con la tastiera. Senza un cambiamento visibile, gli utenti che usano la tastiera non possono capire dove si trovano nella pagina.

Puoi provare tu stesso: carica una pagina e premi ripetutamente il tasto Tab. Ogni controllo su cui arrivi dovrebbe modificarne l'aspetto, ad esempio mostrando un contorno o uno sfondo di colore diverso.

Ogni controllo standard del browser mostra il focus per impostazione predefinita, quindi un errore in questo controllo significa quasi sempre che un foglio di stile ha disattivato l'indicatore predefinito oppure che un controllo personalizzato è stato creato senza indicatore.

Perché è importante

Le persone che non possono usare il mouse navigano con il tasto Tab e l'indicatore di focus è il loro unico modo per sapere su quale controllo si trovano. Quando un designer lo rimuove — spesso perché il contorno predefinito è stato considerato poco gradevole — gli utenti che usano la tastiera si ritrovano a premere i tasti alla cieca, senza sapere che cosa verrà attivato premendo Invio.

Come risolvere il problema

Individua il punto in cui il tuo disattiva il focus, in genere una regola come outline: none o outline: 0, e rimuovila.
Se sostituisci il contorno predefinito, fornisci un'alternativa chiara nello stato :focus:

/* Ripristina un indicatore visibile per i campi con focus */
input:focus {
  outline: 2px solid #396196;
}

Assegna uno stile di focus esplicito ai controlli personalizzati, come i menu a discesa o gli slider creati da te: non ne hanno uno predefinito.

Per sapere quanto deve essere evidente un indicatore, consulta Focus chiaro, il controllo complementare più rigoroso.

Come esegue il controllo Silktide

Simula un utente che naviga con la tastiera usando il tasto Tab attraverso ogni elemento a cui è possibile assegnare il focus nella pagina, ignorando gli elementi esclusi dal controllo, gli elementi nascosti agli utenti vedenti e gli elementi con un tabindex pari a -1.
Confronta gli stili di ogni elemento nello stato con focus e senza focus.
Segnala gli elementi il cui aspetto non cambia in alcun modo distinguibile da un utente vedente quando ricevono il .

Risoluzione dei problemi

Lo stile di focus richiede JavaScript per essere visualizzato

Gli stili di focus dovrebbero essere definiti utilizzando solo CSS. Se il focus viene applicato tramite , ad esempio con uno script che aggiunge una classe, Silktide potrebbe non rilevarlo e potrebbe non funzionare per le tecnologie assistive senza una tastiera fisica. Prova a disabilitare JavaScript e a navigare nella pagina con il tasto Tab per verificare.

Stili di focus che non possiamo misurare

Alcuni metodi per implementare il focus non possono essere rilevati automaticamente:

Focus disegnato con pseudo-elementi come ::before o ::after.
Focus applicato tramite :focus-within su un contenitore.
Stili di focus ereditati dagli elementi figlio, come uno <span> all'interno di un link. Alcuni di questi casi vengono rilevati, ma non tutte le varianti.

Gli elementi che utilizzano queste tecniche vengono ignorati anziché segnalati.

Elementi imprevisti possono ricevere il focus

Tag come <div> o <span> diventano elementi a cui è possibile assegnare il focus quando viene assegnato loro un tabindex pari o superiore a 0, consentendo così ai controlli personalizzati di supportare l'uso della tastiera. Se uno compare nei risultati, è realmente raggiungibile con la tastiera e richiede uno stile di focus. Consulta tabindex su MDN.