Focus non oscurato

Silktide verifica che, quando un controllo viene selezionato con la tastiera, non sia completamente nascosto da altri contenuti, come un banner dei cookie o un'intestazione fissa. Un utente della tastiera che non riesce a vedere il controllo selezionato non ha modo di sapere dove si trova 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

Questo controllo copre l'oscuramento totale, come richiesto dal Livello AA (criterio 2.4.11). Il requisito complementare più rigoroso del , Focus non parzialmente oscurato, segnala anche i controlli coperti solo parzialmente.

Perché è importante

Le persone che navigano con la tastiera seguono l'indicatore del per sapere su quale controllo si trovano. Quando il focus si sposta su un controllo nascosto sotto un banner dei cookie o un piè di pagina fisso, l'indicatore scompare: l'utente non può capire cosa farà la pressione di Invio, o persino dove si trova, e potrebbe abbandonare completamente la pagina.

Come risolvere il problema

Preferisci i contenuti che scorrono con la pagina agli elementi fissi sovrapposti.
Quando un banner o un'intestazione fissi devono rimanere visibili, usa le proprietà CSS scroll-padding o scroll-margin affinché gli elementi che ricevono il focus scorrano oltre di essi; consulta la tecnica C43 del WCAG.
Per le finestre di dialogo e i popup, limita il focus al loro interno mentre sono aperti, in modo che non sia possibile portarlo su elementi sottostanti. 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 della tastiera che usa Tab per spostarsi tra ogni elemento su cui è possibile portare il focus, nelle visualizzazioni desktop e mobile della pagina.
Simula lo scorrimento verticale del browser di ciascun elemento che riceve il focus fino al centro dello schermo (vedi la nota sullo scorrimento più avanti).
Verifica se un altro elemento si trova sopra l'elemento che ha il focus. Gli elementi sovrapposti con sfondi trasparenti o semitrasparenti vengono ignorati, poiché l'indicatore del focus rimane visibile attraverso di essi.
Segnala il controllo se è completamente coperto da un elemento opaco. La sovrapposizione parziale non viene segnalata da questo controllo: è ciò che verifica Focus non parzialmente oscurato.

Perché simuliamo lo scorrimento

La quantità di scorrimento del browser tra una pressione di Tab e l'altra varia in base alle dimensioni della finestra, quindi il fatto che un'intestazione fissa copra un elemento che ha il focus può differire tra schermi la cui altezza varia di appena pochi pixel. Eseguire il test a una sola dimensione esatta della finestra segnalerebbe problemi che nessuno con una finestra leggermente diversa potrebbe riprodurre.

Invece, Silktide valuta ogni elemento come se fosse stato fatto scorrere fino al centro dello schermo. Questo approccio volutamente prudente segnala i problemi che interessano tutte le dimensioni dello schermo in modo coerente ed evita quelli che interessano una sola altezza esatta della finestra. Il W3C non specifica come debba essere testato 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, come avviene in una finestra di dialogo realizzata correttamente. Una finestra di dialogo difettosa che consente al focus di uscire e spostarsi dietro di essa potrebbe quindi non essere segnalata, a meno che non sia aperta quando la pagina viene caricata.

Risoluzione dei problemi

Riesco a vedere perfettamente l'elemento che ha 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 con determinate altezze della finestra. Se concludi che l'elemento non è mai realmente oscurato, puoi ignorare il risultato.