Accessibilità ≠ Overlay: quando una finestra modale blocca la navigazione da tastiera

Selezioni «Continua» e compare una finestra. Lo screen reader continua però a leggere la pagina sottostante oppure la tastiera non raggiunge «Chiudi». Il percorso si interrompe.

Una finestra modale concentra temporaneamente l’interazione su un’attività. Finché è aperta, il contenuto sottostante non dovrebbe ricevere il focus. Non tutte le finestre a comparsa devono essere modali.

All’apertura il focus deve spostarsi su un elemento appropriato nella finestra. Tab e Maiusc+Tab devono scorrere i controlli senza raggiungere lo sfondo. Alla chiusura, il focus torna normalmente all’elemento che l’ha aperta.

La finestra necessita di un nome accessibile, spesso collegato al titolo. I pulsanti devono indicare «Salva», «Annulla» o «Chiudi». Una X senza etichetta può non essere comprensibile.

Di norma Esc deve chiudere la finestra. Le conferme delicate richiedono un comportamento specifico, ma le scelte devono rimanere chiare.

Focus perso dietro la finestra, controlli sullo sfondo ancora attivi, messaggi non annunciati e pulsanti irraggiungibili con testo ingrandito.

Apri la finestra usando solo la tastiera. Controlla il focus iniziale, Tab, Maiusc+Tab, Esc quando previsto e il ritorno del focus. Ripeti con screen reader e dispositivi mobili.

Blind Reader supporta orientamento e navigazione insieme agli screen reader abituali. Le sue correzioni mirate possono migliorare alcune interazioni; la finestra modale deve comunque gestire correttamente il focus.

Una finestra modale accessibile permette di capire, scegliere e riprendere l’attività senza perdersi.

• W3C WAI — Dialog (Modal) Pattern
• W3C WAI — Understanding Keyboard
• W3C WAI — Understanding Focus Order
• W3C WAI — Understanding Name, Role, Value

Episodio 20 · Accessibilità ≠ Overlay