Rhiana Heath in Code 2015

Pop-up Accessibility

Sign up for a free membership to watch this and hundreds of other videos

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)

You may also be interested in

More presentations from Code 2015