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:
midzer/tobii: An accessible, open-source lightbox with no dependencies
An accessible, open-source lightbox with no dependencies
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:
