Is there a way to do an accessible modal?
I'm working on a project with Twitter Bootstrap and playing around the JavaScript components using a screen reader.
When I trigger the modal dialog, Jaws skips the modal going to the next link in the page.
Is there a way to implement a accessible modal?
Another solution that I think is to make a static page to the functionality of the modal, and redirect to this page when the user use a screen reader. Can I detected somehow if the user are using a screen reader?
Answer
EDIT 2019: N. Hoffmann wrote and maintains an accessible modal component both in vanilla JS (along other components in its van11y project) and jQuery.
Behavior and styles are easily modified via data-* attributes and classes.
It's been tested in way more conditions (screen readers, etc) that what you'd do with your own script ;-)
Also Bootstrap 4 has a fairly accessible modal and Bootstrap 3 in its latest versions (much or all of the Paypal Bootstrap accessibility plugin was backported to 3.3.x).
Modern ressources: Access & Use european initiative details a lot of interesting aspects in a simple manner and points to other resources, including the latest ARIA Deisgn Pattern.
Here's an accessible modal dialog: http://hanshillen.github.com/jqtest/#goto_dialog
Once the modal is activated, keyboard navigation is trapped inside the dialog till it's explicitly closed by the user.
http://irama.org/web/dhtml/lightbox/ details such an accessible implementation (there's little difference between a lightbox and a modal dialog, the important thing is the modal part and keyboard management).
You can also read in Unofficial copy of the DHTML Style Guide the dialog modal part and W3C/WAI-ARIA Making a Dialog Modal.
J. Wajsberg wrote a jQuery plugin able to trap the keyboard input inside a DOM element if you need a more DIY approach.