Lightbox

The lightbox effect can come in handy and is arguably preferable in many instances to JavaScript alert boxes or spawning new independent windows.

Accessibility

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:
    1. focus must be set to the start of the lightbox content
    2. 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’).

Implementations

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.

Posted in

Leave a reply