Is there a way to do an accessible modal?

Question

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?

Accepted 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.

Is there a way to do an accessible modal?

Solution

Problem