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?

Answer 1

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.

Answer 2

i don't know any solution to detected automatically if user using a screen reader. but there is the google solution to hide a link at the begining of the page (with left:-1000em and position:absolute) that can be activate if you use keyboard and display a "special mode".

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

for your modal dialog try to use aria and aria-atomic="true" aria-live="assertive" attribute on the dialog html div. it should announce the content of you dialog box.