Focus non parzialmente oscurato

Silktide verifica che, quando un controllo viene selezionato con la tastiera, nessuna sua parte sia nascosta dietro altri contenuti, come un banner dei cookie o un'intestazione fissa. Anche un controllo parzialmente coperto può lasciare l'utente che usa la tastiera incerto su dove si trovi nella pagina.

Le cause più comuni sono gli elementi che rimangono fissi mentre la pagina scorre:

Banner nella parte superiore o inferiore della pagina, come gli avvisi sui cookie
Barre di navigazione e piè di pagina fissi
Finestre di dialogo popup che consentono al focus di spostarsi dietro di esse

Questa è la versione più restrittiva di livello AAA di (criterio 2.4.12) di Focus non oscurato: il segnala solo i controlli completamente coperti, mentre questo segnala qualsiasi copertura.

Perché è importante

Le persone che navigano con la tastiera seguono l'indicatore del per sapere su quale controllo si trovano. Quando una parte di un controllo con il focus scompare sotto un banner dei cookie o un piè di pagina fisso, l'utente potrebbe non vedere l'indicatore, interpretare male l'etichetta del controllo o perdere il punto in cui si trovava; inoltre, un controllo parzialmente coperto sullo schermo può essere completamente coperto su uno schermo più piccolo.

Come risolvere il problema

Preferisci contenuti che scorrono con la pagina agli elementi fissati sopra di essa.
Quando un banner o un'intestazione fissi devono rimanere visibili, usa le proprietà CSS scroll-padding o scroll-margin in modo che gli elementi con il focus scorrano fuori dalla loro area; consulta la tecnica C43 di WCAG.
Per finestre di dialogo e popup, intrappola il focus al loro interno finché sono aperti, così non è possibile impostare il focus su nulla che si trovi dietro di essi. La maggior parte delle librerie per finestre di dialogo e l'elemento nativo <dialog> lo fanno automaticamente.

Come Silktide esegue il controllo

Simula un utente che naviga con la tastiera e preme Tab su ogni elemento che può ricevere il focus, sia nella vista desktop sia in quella mobile della pagina.
Simula lo scorrimento verticale del browser di ciascun elemento con il focus fino al centro dello schermo (consulta la nota sullo scorrimento qui sotto).
Verifica se un altro elemento si trova sopra l'elemento con il focus. Gli elementi sovrapposti con sfondi trasparenti o semitrasparenti vengono ignorati, perché l'indicatore del focus rimane visibile attraverso di essi.
Segnala il controllo se una sua parte qualsiasi è coperta da un elemento opaco. Se devi soddisfare solo il livello AA, i casi di copertura completa sono quelli segnalati da Focus non oscurato.

Perché simuliamo lo scorrimento

La quantità di scorrimento del browser tra una pressione del tasto Tab e l'altra varia in base alle dimensioni della finestra, quindi la presenza di un'intestazione fissa sopra un elemento con il focus può variare tra schermi con un'altezza diversa anche solo di pochi pixel. Eseguire il controllo a una singola dimensione esatta della finestra segnalerebbe problemi che nessuno con una finestra leggermente diversa riuscirebbe a riprodurre.

Invece, Silktide valuta ogni elemento come se fosse stato fatto scorrere fino al centro dello schermo. Questo approccio volutamente generoso segnala i problemi che influiscono in modo coerente su tutte le dimensioni dello schermo ed evita quelli che influiscono solo su un'altezza esatta della finestra. Il W3C non specifica come debba essere eseguito il controllo di questo criterio.

Finestre di dialogo che si aprono dopo il caricamento della pagina

Se una pagina contiene una finestra di dialogo chiusa per impostazione predefinita, Silktide presume che, mentre è aperta, il focus non possa uscirne: è così che si comporta una finestra di dialogo realizzata correttamente. Pertanto, una finestra di dialogo difettosa che consente al focus di uscire dietro di essa potrebbe non essere segnalata, a meno che non sia aperta al caricamento della pagina.

Risoluzione dei problemi

Riesco a vedere chiaramente l'elemento con il focus

Controlla la pagina in una finestra più piccola: gli elementi oscurati da intestazioni o piè di pagina fissi spesso entrano in collisione solo a determinate altezze della finestra. Se concludi che l'elemento non è mai realmente oscurato, puoi ignorare il risultato.