WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: are these modal popups screen reader accessible ?

for

From: Bryan Garaventa
Date: Nov 1, 2012 2:37PM

I agree, it's much more reliable to use aria-hidden="true" on the first
level childNodes of the body tag to hide the background content for screen
reader users, then append the modal dialog to the body tag so that it's the
only content exposed to a screen reader, then use scripting to control the
forward and backwards tab order so that it loops.

This makes a standard HTML dialog modal for both screen reader and keyboard
only users without disrupting default keyboard functionality via role=dialog
or role=application, and it works in IE, FF, Chrome, and iOS Safari with
equal accessibility.

This is what I was trying to show an example of earlier.