¿Hay alguna manera de hacer un modal accesible?

Question

Estoy trabajando en un proyecto con Twitter Bootstrap y jugando con el JavaScript components usando un lector de pantalla.

Cuando disparo el diálogo modal, Jaws omite el modal yendo al siguiente enlace de la página.

¿Hay alguna manera de implementar un modal accesible?

Otra solución que creo que es hacer una página estática a la funcionalidad del modal, y redirigir a esta página cuando el usuario usa un lector de pantalla. ¿Puedo detectar de alguna manera si el usuario está usando un lector de pantalla?

Answer 1

He aquí un diálogo modal accesible: http://hanshillen.github.com/jqtest/#goto_dialog

Una vez que se activa el modal, navegación mediante el teclado está atrapado dentro del diálogo hasta que se ha cerrado explícitamente por el usuario.

http://irama.org/web/dhtml/lightbox/ detalla una implementación accesible (hay poca diferencia entre una caja de luz y un cuadro de diálogo modal, lo importante es la parte modal y la administración del teclado).
También puede leer en Copia no oficial de la Guía de estilo DHTML la parte dialog modal y W3C/WAI-ARIA Making a Dialog Modal.

J. Wajsberg escribió un complemento jQuery capaz de trap the keyboard input inside a DOM element si necesita un enfoque más bricolaje.

Answer 2

No conozco ninguna solución para detectar automáticamente si el usuario usa un lector de pantalla. pero existe la solución de Google para ocultar un enlace al principio de la página (con la izquierda: -1000em y posición: absoluta) que se puede activar si usa el teclado y muestra un "modo especial".

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

para su intento de diálogo modal de usar aria y aria-atómica = "true" aria-live = atributo "firme" en el div html diálogo. debe anunciar el contenido de su cuadro de diálogo.