Modals and pop-ups can be a really useful tool for displaying additional information or getting users to enter information in a way that doesn’t clutter up your screen. However as yet (one coming soon) there is no official HTML element that lets us display modals in a consistent way. As a result screen readers, such as JAWS and NVDA, have a hard time reading them resulting in a lot of pop-ups not being accessible to people with disabilities.
Today we will look at how to make a modal accessible for people who use screen readers. This uses a combination of ARIA attributes and hidden text to speak with the screen reader. As well as helping of JavaScript to help with some custom keyboard control. All while keeping a pleasing look and feel for all users using JavaScript and CSS.
Websites use modals and popups a lot… but screen readers tend not to know about them as there’s no really standard way to do them.
Working on a project was using bootstrap – which has been improving, but still isn’t perfect.
Tested JAWS and NVAccess NVDA – these two form about 70% of screen reader users. Voiceover is also quite popular; Chromevox is nice but less than 1% usage.
WAI-ARIA sends extra information to the browser, which helps with non-standard interactions and content.
Bootstrap has <div class=”modal” role=”dialog”> …advice was actually remove the dialog role as it forces all-in-one reading. Otherwise you need to also insert role=”document” to reinstate the usual fine-grained control.
Mistake: used aria-hidden=”false” and display:none together… it didn’t work on the big screen readers. Correction: use the clip rect visually hidden style.
Aria-label is useful for giving extra cues, similar to title but without triggering tooltips.
ARIA implementation is often as simple as updating your existing show/hide functions so they also update aria-hidden’s boolean. It’s not hard at all.
To keep focus inside the dialog – focusable hidden element at start and end of the dialog, plus a third to close it.
Screen readers read things fast – it’s hard to get used to when you don’t use a reader all the time, but people who do use them run them even faster than the default.
(check slides for a demo of NVDA in action)
