15 July 2011
A look at the current trend towards using lightboxes and the implications for users of assistive technologies such as screen readers.

Lightboxes are quite common across the web now. Personally, I love them. It helps the product or image you are viewing stand out from the surrounding page.

However, lightboxes can often cause considerable accessibility problems for users of screen readers and users who navigate the web using the keyboard or another similar tab based device.

What are the issues?

The main issue is that with many lightbox implementations, keyboard users cannot access the lighbox and can only navigate around links in the (now greyed out) original page state.

Lightboxes can also prevent the back button from working properly due to the effect being generated within the one page. Users who move backwards through the history return to the previous page, not the current page in it’s previous state.

In general, providing keyboard accessibility has been considered elsewhere in the site, users generally have no issue activating the lightbox effect and gaining benefits from the enhanced display features lightboxes can provide. The real issue arises when it comes to either closing the lightbox down or interacting with navigation elements within the lightbox itself.

In my experience as a consultant, lightbox implementation failures tend to fall into two categories:-

Where users of assistive technology can navigate around all of the underlying (greyed out) page elements ad infinitum but not actually gain access to the lightbox itself.

Where the lightbox navigation appears to be tagged on to the end of the original page navigation.

The first example above is completely inaccessible to keyboard users. Ironically, it does not have such a huge impact on screen reader users as the page will render as normal to them, albeit without having access to the lightbox content. For keyboard users who are not screen reader users, this type of implementation is the most inaccessible, as they can see the lightbox but can’t interact with it. Even worse, they may struggle to interact with the original page effectively because it has been greyed out to such an extent that it is illegible.

The second example is slightly more accessible but very labour intensive. In fact, some keyboard users and screen reader users may not persist long enough to discover that the navigation is indeed present. Indeed, due to the linear reading nature of a screen reader, some screen reader users may think that nothing has actually happened or wonder why they still appear to be on the original page.

So how do we solve the problem?

Immediately placing the keyboard focus into the lightbox upon activation would be one method.

Provision of a way to quickly and easily close the lightbox using the keyboard alone (perhaps the ‘Esc’ key’). Whatever key you choose to do this, make sure that users are notified within the lightbox itself that this in an option.

Jonathan Avila provides an excellent suggestion on how to identify the lightbox as an overlaid panel for screen reader users. Basically, this is done by creating two text markers either end of the panel and then hiding them off screen using the CSS margin property.

Any content held within the lightbox should be keyboard navigable. For example, if it’s an image gallery or product gallery then let users navigate through the various images in sequence using either link controls or perhaps also the cursor keys.

Lightboxes are hugely useful to users with disabilities. Many disabled users shop online and the ability to view products such as clothes (often with associated close-up views) can be of real benefit to users who may find accessing high street stores challenging. Providing better control of the lightbox experience for keyboard users can only mean a better user experience all round.

Also published at http://www.uservisionblog.co.uk/