Accessibilitat ≠ Overlay: quan una finestra modal bloqueja la navegació amb teclat

Prems «Continua» i s’obre un diàleg. La pantalla canvia, però el lector de pantalla continua llegint el contingut del darrere o el teclat no arriba a «Tanca». La tasca queda interrompuda.

Un diàleg modal concentra temporalment la interacció en una tasca. Mentre és obert, el contingut del fons no hauria de rebre el focus. No totes les finestres emergents han de ser modals.

Quan s’obre el diàleg, el focus ha d’anar a un element adequat del seu interior. Tab i Majúscules+Tab han de recórrer els controls sense sortir al fons. En tancar-lo, normalment el focus torna al control que l’ha obert.

El diàleg necessita un nom accessible, sovint vinculat al títol. Els botons han d’indicar «Desa els canvis», «Cancel·la» o «Tanca». Una icona de X sense etiqueta pot resultar incomprensible.

Habitualment, la tecla Esc ha de tancar el diàleg. Les confirmacions delicades requereixen un tractament específic, però les opcions per avançar o tornar han de ser clares.

El focus queda darrere de la finestra, es poden activar elements del fons, els missatges no s’anuncien o els botons desapareixen quan s’amplia el text.

Obre el diàleg només amb teclat. Comprova el focus inicial, Tab, Majúscules+Tab, Esc quan correspongui i el retorn del focus. Repeteix la prova amb lectors de pantalla i dispositius reals.

Blind Reader facilita l’orientació i la navegació juntament amb els lectors de pantalla habituals. Les seves correccions puntuals poden millorar algunes interaccions; el component modal també ha de gestionar correctament el focus.

Una finestra modal accessible permet entendre què ha passat, decidir i reprendre la tasca sense perdre’s.

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

Lliurament 20 · Accessibilitat ≠ Overlay