Lightboxes can be accessible, but implementations must remember:
- The lightbox viewport must respect the initial window size respond to window resize events to ensure that important content or functionality doesn’t get clipped outside the window.
- If the lightbox is launched by explicit user action:
- focus must be set to the start of the lightbox content
- when the lightbox is closed, focus should be returned to where the user launched the lightbox from.
- If the lightbox is launched without explicit user action, aria live region semantics must be employed to allow users of assistive technologies to be aware of the new content.
- When open, the lightbox must respond to common keyboard and browser functionality, for example:
- the esc key should close the lightbox.
- the back button should take the user back to the previous state (either a previous slide, or close the lightbox if it was just opened).
- the tab should allow navigation between all links and controls within the lightbox.
- links and controls outside of the lightbox should be suppressed from the tab order until the lightbox is closed.
- cursor (arrow) keys and the Home and End keys should allow navigation between lightboxes (if multiple lightboxes are grouped as a ‘gallery’).
Butterfly was created to provide a robust and accessible approach to lightbox functionality.
The following site offers a great comparison of other available lightbox implementations. Note: many of these implementations don’t represent best practice in terms of accessibility.