Intrappolamento del focus nella finestra modale
Silktide identifica le pagine che contengono una finestra di dialogo modale, ovvero un popup che blocca l'interazione con il resto della pagina, e chiede di verificare che il focus della tastiera sia gestito correttamente mentre la finestra di dialogo è aperta. Si tratta di una revisione manuale: i test automatizzati possono trovare la finestra di dialogo, ma non possono osservare come si comporta quando viene aperta e chiusa.
Perché è importante
Mentre una finestra di dialogo modale è aperta, la pagina sottostante è visibile ma inattiva. Se il può sfuggire dalla finestra di dialogo, gli utenti della tastiera e degli finiscono per spostarsi con il tasto Tab attraverso contenuti che non possono vedere o utilizzare, leggono la pagina sottostante fuori contesto e perdono completamente il punto in cui si trovavano. Inoltre, se il focus non viene ripristinato quando la finestra di dialogo si chiude, vengono riportati all'inizio della pagina e devono tornare al punto in cui si trovavano.
Come risolvere il problema
Apri ogni finestra di dialogo nella pagina e verifica il comportamento usando solo la tastiera:
- Quando la finestra di dialogo si apre, il focus si sposta al suo interno, in genere sul primo controllo o sulla finestra di dialogo stessa.
- Premendo Tab e Maiusc+Tab, il focus si sposta ciclicamente tra i controlli della finestra di dialogo senza mai raggiungere la pagina sottostante.
- Premendo Esc, la finestra di dialogo si chiude, per le finestre che possono essere chiuse.
- Quando la finestra di dialogo si chiude, il focus torna all'elemento che l'ha aperta.
Se una di queste condizioni non è soddisfatta, correggi l'implementazione della finestra di dialogo. L'elemento nativo <dialog> aperto con showModal() fornisce gratuitamente gran parte di questo comportamento; per le finestre di dialogo personalizzate è necessario implementarlo tramite script. Se tutto funziona correttamente, il risultato.
Come Silktide esegue il controllo
- Cerca segnali che indicano che una pagina contiene una finestra di dialogo modale: un elemento nativo
<dialog>, un elemento conrole="dialog"orole="alertdialog", un elemento conaria-modal="true"oppure un elemento con un nome di classe tipico delle finestre modali che contiene anche controlli focalizzabili. - Quando viene trovato uno di questi elementi, crea un prompt di revisione per la pagina.
Silktide non può aprire la finestra di dialogo e osservare il comportamento del focus durante l'esecuzione, quindi questo controllo non restituisce mai automaticamente un esito negativo: chiede di effettuare la verifica.
Risoluzione dei problemi
La pagina non contiene finestre modali visibili
Molti siti includono il markup delle finestre di dialogo in ogni pagina, ad esempio un popup per la newsletter, una finestra di dialogo per i cookie o una sovrapposizione di ricerca nascosta, che appare solo in determinate condizioni. Il prompt rimane applicabile: verifica il comportamento della finestra di dialogo nello stato in cui si apre. Se il markup è un residuo che non può mai essere aperto, valuta la possibilità di rimuoverlo.
Le nostre finestre di dialogo provengono da una libreria di terze parti
Le librerie di finestre di dialogo più note gestiscono generalmente correttamente il focus, ma la configurazione e i contenuti personalizzati possono comprometterne il funzionamento. Verifica il comportamento nelle tue pagine invece di fare affidamento sulla documentazione della libreria.