Usability and accessibility » Modals and popups

Sebastian Greger This is a living document
Last update:

Opening modal windows on a webpage easily throws off assistive technology. Luckily, lightweight and accessible options exist to ensure good UX for everybody.

While some of the popular lightbox/modal scripts are over-engineered and inaccessible behemoths, some developers created dependency-free (vanilla JS) libraries that explicitly provide a good UX for everybody.

This backgrounder summarizes all the accessibility aspects around modals — are we “using too many damn modals”?

“Lightboxes”

Lightbox implementations are a special kind of popups, generally used to enlarge images or other media content (often with a means to navigate between several media files).

For images:

This library is single-purpose for images only, which makes its setup very simple.

Another a11y-focused lightbox script, but with more options, including videos and other content.

Modal windows

For more general-purpose modals, there are also some accessibility-focused options:

Dialog windows

Two well-known a11y-friendly implementations of dialog/modal windows are:

I'm Sebastian, Sociologist and Interaction Designer aiming to bring toge­ther social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.

My monthly email newsletter has all of the above, and there are of course also an RSS feed and Twitter.