Skip to a section of this page:

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 functionality, for example:
    • the esc key should close the lightbox.
    • the tab and cursor (arrow) keys should allow navigation between all links and controls.

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.