Focus chiaro

Silktide verifica che i controlli della pagina — link, pulsanti e campi dei moduli — cambino aspetto in modo sufficientemente evidente quando vengono selezionati con la tastiera. Non basta che il cambiamento esista: deve essere abbastanza ampio e ad alto contrasto da poter essere effettivamente visto.

Questa è una versione più rigorosa di Focus visibile: quel controllo verifica se esiste un indicatore del focus, mentre questo misura se l'indicatore è abbastanza evidente.

Puoi provarlo tu stesso: carica una pagina e premi ripetutamente il tasto Tab. Ogni controllo su cui arrivi dovrebbe cambiare visibilmente, ad esempio mostrando un contorno distinto o uno sfondo a contrasto.

Perché è importante

Le persone che navigano con la tastiera — comprese molte persone con disabilità motorie e utenti di dispositivi a scansione — dipendono dalla possibilità di vedere dove si trova il . Un indicatore del focus tecnicamente presente ma tenue, sottile o con poco contrasto è inutile quanto l'assenza totale di un indicatore: l'utente perde il proprio punto nella pagina e non riesce a capire quale controllo verrà attivato premendo Invio.

Come risolvere il problema

La soluzione più semplice e affidabile consiste nell'applicare un contorno solido attorno al controllo che ha il focus, spesso almeno 2 pixel, con un colore che abbia contrasto sia con il controllo sia con ciò che lo circonda.

Un indicatore a due colori garantisce la visibilità indipendentemente dallo sfondo:

/* Un contorno trasparente mantiene l'indicatore nella modalità a colori forzati */
:focus {
  outline: 2px solid transparent;
  /* Alone chiaro + anello scuro: uno dei due avrà sempre contrasto */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Questo approccio deriva dalla tecnica C40 di WCAG.

Evita gli indicatori lungo un solo bordo, come un bordo inferiore: la loro sufficiente ampiezza dipende dalla lunghezza di quel bordo, che varia per i link di testo.

Come Silktide esegue il controllo

Simula un utente che naviga con la tastiera usando Tab per raggiungere ogni elemento focalizzabile della pagina, ignorando gli elementi esclusi dal controllo, quelli nascosti agli utenti vedenti e quelli con un tabindex pari a -1.
Confronta gli stili di ogni elemento nei relativi stati con e senza focus.
Considera superati gli elementi che mantengono il contorno del focus predefinito del browser o il cui colore di sfondo cambia con un contrasto di almeno 3:1 tra i due stati.
Altrimenti misura i contorni, i bordi e le ombre di entrambi gli stati e conta l'area che cambia con un contrasto sufficiente. Per superare il controllo, quell'area deve essere almeno grande quanto un perimetro spesso 2 pixel attorno all'elemento, in conformità con il requisito 2.4.13 di .

Risoluzione dei problemi

Lo stile del focus richiede JavaScript per apparire

Gli stili del focus dovrebbero essere definiti esclusivamente in . Se il focus viene applicato tramite — ad esempio mediante 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 usare Tab per navigare nella pagina per confermare.

Stili del focus che non possiamo misurare

Alcuni modi di implementare il focus non possono essere rilevati o misurati automaticamente:

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

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

Elementi sopra immagini o con sfondi imprevedibili

Il contrasto viene calcolato rispetto a un colore di sfondo noto. Quando un elemento si trova sopra un'immagine o è posizionato al di fuori del proprio elemento padre, rendendo impossibile determinare lo sfondo, Silktide lo ignora anziché fare supposizioni.

Elementi imprevisti sono focalizzabili

Tag come <div> o <span> diventano focalizzabili quando ricevono un tabindex pari o superiore a 0, come avviene per consentire l'uso da tastiera dei controlli personalizzati. Se uno compare nei risultati, è effettivamente raggiungibile con la tastiera e necessita di uno stile del focus. Consulta tabindex su MDN.