Print this page|
Web Accessibility: Specification for an Accessible Lightbox
Lightbox is a feature that highlights a page or image on an active window so you can quickly read through the content without clicking on to that page or moving away from the current web page. This post looks at key accessibility and
usability problems with most lightboxes used on websites and proposes a specification for an improved lightbox that could work for everyone.
Lightbox or pop-up panel functionality is very popular on sites these days. It’s a way of showing extra information on a page without having to move away from the page.
However one problem of using lightbox functionality on a site is that most implementations are not fully accessible, and for some people the functionality can appear to break the site.
There’s no point in having lightbox functionality on a site if users don’t know it’s there
What is a lightbox?
The term is used on the web to refer to functionality which pops open a panel seemingly above the main content of a web page or application. Typically the functionality is used to show a larger version of an image, but occasionally the panels shown can contain other content like logon forms or context sensitive help.
Why people use them?
I can see that lightboxes to display large versions of images can be useful. Placing thumbnail images in a page rather than the full size image can reduce the download weight of a page and so speed up its time to load – especially useful when sites are viewed on a mobile phone. Also, using a lightbox it is possible to present much larger images to users than might fit within the constraints of the page design.
I myself would hesitate to use lightbox panels to present other content – including form fields. The accessibility issues covered in this post might mean that key functionality of a website might be hard or impossible for some to reach.
So what are the problems with using lightboxes?
Typical lightbox accessibility issues
Triggering the functionality from a mouse whilst hovering over one of the thumbnail images presents no problem at all.
The problems start when using a keyboard to interact with the functionality. It is possible to tab around the example page and focus will arrive at one of the thumbnail images.
Assuming that users can see where focus is they can use the enter key to trigger the opening of the lightbox to show the larger version of the image. The issue now is that the keyboard focus has not been moved and it still sits on the thumbnail image. But the main page has been mainly obscured by the large image and the semi opaque layer that has been placed on top of it and so the focus is very hard to determine – even in browsers which try to highlight keyboard focus.
This particular lightbox can be closed by pressing the Escape key but there is nothing on the screen to tell you that.
The result is that a user will think that the page or site is unusable. If users perceive a site to be broken they are likely to abandon it and worse still, tell others that it’s broken and not useful.
So what can be done to rescue the situation?
A truly accessible lightbox? Keyboard users as well as mouse users
As we’ve seen, one of the key accessibility issues with lightboxes is that they are seldom easily accessed/operated by keystrokes.
So the two key requirements here are:
Once the lightbox is open it is vital that focus is placed into the lightbox to enable keyboard users to successfully interact with the lightbox controls (close, next image, etc). Almost all lightboxes on the web fail to do this – which can completely destroy a page’s usability for keyboard users.
Tabbing beyond or before the lightbox controls has to be catered for as well. There are two options here:
There’s no point in having lightbox functionality on a site if users don’t know it’s there or conversely if it’s likely to get triggered by mistake.
So warn people about what’s going to happen if they click on or press the enter key whilst on a link. This warning needs to be in different forms to cater for the needs and abilities of a user audience.
The simplest method could be a text link that states something like “View full size version of my photo of the moon”. However, often a thumbnail version of an image is itself the trigger for the lightbox so that becomes a bit trickier. Including the “View full size…” text in the image’s alt attribute would work for screen reader users, including the text in the title attribute might help those using a mouse. But sighted keyboard users won’t get either of those pieces of information.
This post originally appears here: http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/