Modals are widely supported in modern browsers. They can be used as notification popups, as opt-in fields, or even for photo slideshows.
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.
Powered by WPeMatico