Is there a way to do an accessible modal?

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.