Lightboxes and keyboard accessibility

The Lightbox effect is showing up pretty much everywhere on the web these days. There are approximately one million different implementations that basically do the same thing: when the user clicks on an image, the screen is dimmed and a larger version of the image is displayed until the user closes it by clicking a ”Close” link or icon.

Many people love this effect, and it definitely can be very useful. There are some problems though. One, which Jonathan Christopher talks about in The Trouble with Lightbox (and its Variants), is that most lightboxes break the back button. Another is keyboard accessibility.

Lightboxes can be very annoying to people who do not use a mouse. The problem with keyboard accessibility isn’t launching lightboxes. That part usually works well. But after that the trouble starts.

Once you’ve launched a lightbox there are a variety of ways to interact with them. Some seem to ignore keyboard input, others let you close them by pressing the Escape key. Sometimes you can step through images in a slideshow by using the left and right arrows, sometimes you can’t. And hardly any of them handle keyboard focus very well.

Here’s what I want from a lightbox script in the way of keyboard accessibility:

Let me use the left and right arrow keys to step through images in a slideshow
When I press Esc, close the lightbox
Do one of the following:
- Either add focusable elements (links or buttons) for close/next/previous, put keyboard focus on the first focusable object in the lightbox, make sure I can’t tab to something behind the lightbox, and make it visually obvious which object has keyboard focus
- or close the lightbox when I press Tab
When the lightbox closes, return keyboard focus to where it was when I opened it

This may not seem difficult to implement, and it probably isn’t. Despite that I haven’t been able to find a single lightbox implementation that offers all of this, but that doesn’t mean there isn’t one. Maybe I just haven’t been looking hard enough.

I’m not the only one to have noticed this—Josh Habdas describes some usability and accessibility issues with lightboxes in Building a Better Lightbox.

Posted on October 20, 2009 in Accessibility, Usability, JavaScript