WebAIM - Web Accessibility In Mind

E-mail List Archives

Fixed: How do you use aria-hidden on modal dialogs?

for

From: Bryan Garaventa
Date: Oct 12, 2012 4:52PM

Excellent, with the newly released version of NVDA beta, aria-hidden works perfectly in IE, FF, and Chrome, so modal dialogs can be made modal without accidentally impeding navigation via role=dialog as seen with the earlier referenced lightbox.

----- Original Message -----
Subject: Fixed: How do you use aria-hidden on modal dialogs?


Never mind, I got it.

I've updated the Lightbox template at
http://whatsock.com/modules/standard_dynamic_control_templates/demo.htm
to do this automatically.

Tested successfully using:
Voiceover using iOS Safari.
JAWS 12 and 13 using Firefox and Chrome.
JAWS 13 using IE 8 and 9.

It doesn't look like NVDA supports aria-hidden in any of these browsers, which is a bug worth reporting.


----- Original Message -----
From: Bryan Garaventa
To: <EMAIL REMOVED>
Sent: Monday, October 08, 2012 4:35 PM
Subject: How do you use aria-hidden on modal dialogs?


Hi,
I'm not referring to role=dialog or anything like that.

Take the following syntax:

<body>
<div>
Lots of content here
</div>
<div class="myDialog">
dialog content
</div>
</body>

I have a mobile app with a page like this, and I'm trying to hide the background text so that only the dialog is visible to Voiceover in Safari.

So I tried the following:

<body aria-hidden="true">
<div>
Lots of content here
</div>
<div class="myDialog" aria-hidden="false">
dialog content
</div>
</body>

Yet, according to the discussion at
http://lists.w3.org/Archives/Public/wai-xtech/2012May/0017.html
This is incorrect.

What is the correct method for doing this?

Thanks,
Bryan