C'è un modo per fare una modal accessibile?

Question

Sto lavorando a un progetto con Twitter Bootstrap e giocando allo JavaScript components utilizzando uno screen reader.

Quando si attiva la finestra di dialogo modale, Jaws salta la modale andando al collegamento successivo nella pagina.

C'è un modo per implementare una modale accessibile?

Un'altra soluzione che penso sia quella di creare una pagina statica per la funzionalità del modale e di reindirizzare a questa pagina quando l'utente utilizza uno screen reader. Posso rilevare in qualche modo se l'utente sta usando uno screen reader?

Answer 1

Ecco un dialogo modale accessibile: http://hanshillen.github.com/jqtest/#goto_dialog

Una volta che il modal è attivato, la navigazione da tastiera è intrappolato all'interno della finestra di dialogo fino a che non è esplicitamente chiusa dall'utente.

http://irama.org/web/dhtml/lightbox/ dettagli come un'implementazione accessibile (c'è poca differenza tra un lightbox e una finestra di dialogo modale, l'importante è la parte modale e la gestione della tastiera).
È anche possibile leggere Copia non ufficiale della guida di stile DHTML la parte dialog modal e W3C/WAI-ARIA Making a Dialog Modal.

J. Wajsberg ha scritto un plugin jQuery in grado di trap the keyboard input inside a DOM element se è necessario un approccio più fai-da-te.

Answer 2

Non conosco alcuna soluzione da rilevare automaticamente se l'utente utilizza uno screen reader. ma esiste la soluzione google per nascondere un collegamento all'inizio della pagina (con sinistra: -1000em e posizione: assoluta) che può essere attivato se si utilizza la tastiera e si visualizza una "modalità speciale".

<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a> 

per la finestra di dialogo modale tentativo di utilizzare aria e aria-atomico = "true" aria-live = attributo "assertivo" sul div html finestra di dialogo. dovrebbe annunciare il contenuto della tua finestra di dialogo.