I want to post some information I've been given by some folks:
By Graham Armfield of Coolfields:
Hi Mallory, I wrote this blog post late last year:
It obviously is talking more about an image lightbox but the principles are similar. There are also a couple of useful comments at the end.
I had a go at building an accessible one for a client a while back. It's not perfect but I have some ideas on how to improve it that I'll implement when I get a bit of time. You can see it at: http://harpcoventgarden.com/photos/
If you try out his harp lightbox, you'll notice it doesn't restrict or trap the keyboard the way a true modal dialog window does, and also if you continue tabbing, you simply fall out of the lightbox and it closes. Interesting. Graham also pointed out this comment from his blog: http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/#comment-2613
Follow-up comment by Chris Lamb:
I've been quite happy with jQuery simplemodal. With two little exceptions:
1. Having troubles making the focus properly move into the modal/lightbox. Possibly on account of...
2. The script adding a tabindex of -1 to one of the modals containing divs
I like the way Graham's solution moves focus to the lightboxes close button - then back to the original anchor when closed.
However I don't like how some of the other features that you'd expect from a lightbox don't work. For example:
- Cursor left and right for previous and next photos
- Esc/X/C keys to close the lightbox (what I'd consider to be the 'other standard exit methods' that are mentioned in WCAG2 2.1.2
- click on greyed-out background to close lightbox.
Chris Blouch from AOL added this, about jQuery:
jQueryUI 1.9 just came out which is supposed to incorporate the a11y changes made as part of the AEGIS project. You can take a look at the modal dialog sample created before the release here:
One tricky bit is that there are invisible objects in the tab order before and after the actual dialog content so if you tab out of the bottom you land on the tab stop and it moves your focus back to the top, and vice versa. It also has a few nice keyboard controls to move and resize the modal. If focus is on the title bar the arrows move it around. If focus is on the 'grabber' in the bottom right corner arrow keys stretch the dialog box.
These are good points. I'm going to look for examples by Filament Group or Paciello Group; they generally have pretty decent demos and tests, even for things that aren't quite "there" yet.