Nested Aria hidden

Question

Is it possible to nest elements with aria-hidden="true" and aria-hidden="false"?

For example:

<div aria-hidden="true">  
    some hidden content  
    <div aria-hidden="false">  
        some visible content
    </div>  
</div>

This seems not to work for me. I tested it with NVDA and its functionality to display a full list of links on the page. If I set aria hidden true on the body I could not manage to get any links even when I started to set aria hidden to false on some child elements. Currently it looks like I cannot overwrite the aria hidden state in a child element.

I know this might be a quite unusual approach but the problem itself is unusual as well. A huge light box which contains a whole site itself(no simple modal dialog to be short).

Answer 1

No, that is not possible. You hide the element and its children.

As an example, when creating a modal window you hide everything but the modal, like this:

<div aria-hidden="true" id="page-wrap">
  <main role="main">
    <p>content</p>
  </main>
</div>
<div aria-hidden="false" id="myModal" aria-labelledby="myModal-title">
  <h1 id="myModal-title">Sign up!</h1>
  ...
</div>

This will then hide the #page-wrap and show the #myModal to assistive technologies