Design for all » Inclusive usability » Modals and popups

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/deoostfreese/Parvus

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

github.com/midzer/tobii

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/Ghosh/micromodal

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/KittyGiraudel/a11y-dialog

Filament Group Modal | A simple, accessible modal dialog web component

filamentgroup.github.io/fg-modal/demo/

Last edited: Oct 2022