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:

deoostfreese/Parvus: An accessible, open-source image lightbox with no dependencies. github.com

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

midzer/tobii: An accessible, open-source lightbox with no dependencies github.com

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:

ghosh/Micromodal: Tiny javascript library for creating accessible modal dialogs github.com

Dialog windows

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

a11y-dialog: A very lightweight and flexible accessible modal dialog script github.com
Filament Group Modal | A simple, accessible modal dialog web component filamentgroup.github.io

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 occasionally sent email newsletter has all of the above, and there is of course also an RSS feed or my Mastodon/Fediverse profile.