Build Accessible Modal Windows with A11y Dialog

By Jake Rocheleau. in Toolkit. Updated on June 29, 2020.

Modals are widely supported in modern browsers. They can be used as notification popups, as opt-in fields, or even for photo slideshows.

You can build these windows using pure CSS but this isn’t the most accessible solution. Instead, check out A11y Dialog, a fully-functioning modal window that places the focus on accessibility first.

It runs on vanilla JavaScript with its own custom API and supports all modern browsers across all devices. You can check out this demo to see how it looks in action.

It does appear much like a typical modal window. But, this script uses ARIA tags to support modern accessibility for all users.

By default, A11y Dialog also supports touchscreens, so tapping has the same effect as clicking. You can click or tap anywhere outside the window to close it, or on a computer hit the ESC key.

Somehow, this library is pretty small, only 1.2kb, including all the CSS and JS code. This makes it lightweight on top of fully accessible.

You can learn more by reading through the GitHub repo and A11y Dialog has its own documentation page, too. This includes a section on installation & setup for complete beginners. There’s also a lengthy section covering the DOM API for adding buttons to your page that can open (or close) the modal window.

If you’re trying to build more accessible websites seriously consider running A11y Dialog in your projects. You can get the source code from GitHub or download it from a package manager such as npm or Bower.

Take a look at the main page to learn more about the setup and basic JavaScript features. This library comes with a lot more than ARIA accessibility, so it’s worth testing if you want to expand the features of your modal windows.