W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2012

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

From: Bryan Garaventa <bryan.garaventa@whatsock.com>
Date: Fri, 12 Oct 2012 15:52:08 -0700
Message-ID: <CCCD640CCBA2424F97775D293C2112AE@WAMPAS>
To: <w3c-wai-ig@w3.org>, "WebAIM Discussion List" <webaim-forum@list.webaim.org>
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
    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: w3c-wai-ig@w3.org 
    Sent: Monday, October 08, 2012 4:35 PM
    Subject: How do you use aria-hidden on modal dialogs?

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

    Take the following syntax:

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

    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">
    Lots of content here
    <div class="myDialog" aria-hidden="false">
    dialog content

    Yet, according to the discussion at
    This is incorrect.

    What is the correct method for doing this?

Received on Friday, 12 October 2012 22:52:42 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:42 UTC