Accessible Modal Script: Micromodal.js – WAI-ARIA Compliant
The web is constantly advancing towards more support for average users. This means topics like accessibility are huge.
If you want to take your UX accessibility a little more seriously then try Micromodal.js. It’s a free open source modal window script designed to be fully compliant with WAI-ARIA accessibility requirements.
Designer’s Guide to the Basics of Web Accessibility Design
The internet should be universally accessible, allowing everyone to access the same content no matter where they are... Read more
Some websites can get by without worrying too much on this topic.
However many larger sites, especially government websites, require full accessibility compliance.
The library is on the larger side totaling about 2KB when minified. I know that’s not huge but it’s not the smallest modal script out there.
Still I think it’s a valuable asset for most webmasters because it supports every type of visitor on every modern device imaginable.
And it’s not jumpy or poorly-designed like most a18y scripts. This actually uses custom CSS/JS animations for the fades and it stops the hash symbol(#) from jumping the page up to the top with every click.
These are minor details to developers but they’re massive details to the user experience.
Take a look at the main page for a live demo along with documentation. The install section is pretty clear-cut and you should be able to get this running with 10-15 minutes of editing.
And if you’re looking for some demo styles for this modal window check out this Gist.
It was created as a free demo for frontend developers who don’t want to create their own custom modal UI from scratch. And I have to say, the defaults are pretty nice.
Just grab a free copy of the script off GitHub and get started right away.
Your visitors will appreciate the effort.