Aria-hidden=true on parent does not make its children also aria-hidden

Question

I am reading a bit on aria uses, and came across this piece of documentation:Fourth Rule of ARIA Use. One part that is not clear to me is this:

"Applying aria-hidden to a parent/ancestor of a visible interactive element will also result in the interactive element being hidden,"

I tried the following snippet, but the anchor tag is still accessible (even though I put an aria-hidden on its parent). What am I missing here?

body, html {
  background-color: #333;
  height: 100%;
}

#main {
  margin: 0 auto;
  width: 80%;
  background-color: #fff;
  height: 100%;
  padding: 50px;
}

.test {
  border: 1px solid #555;
  padding: 10px;
}

<div id="main">
  <div tabindex="0">Woohoo</div>
  <div class="test" aria-hidden="true" role="presentation">
    <div class="one" aria-hidden="true">
        <span aria-hidden="true">
          <a href="#">Testing</a>
        </span>
    </div>
  </div>
</div>

score 15 · Accepted Answer · answered Sep 06 '18 at 16:06

Depends on what you mean by the link still being "accessible". Adding aria-hidden="true" will prevent the element from being included in the accessibility tree (similar to the DOM) so that a screen reader user will not be able to find the link when walking the accessibility tree (typically done by using the up/down arrow keys).

ARIA attributes affect how the screen reader accesses elements. It does not provide any behavior. In the "rules of aria use" link you provided, look a little further down to "What Adding a Role Does Not Do".

So while adding aria-hidden="true" does prevent the element from being inserted into the accessibility tree, it does not remove the element from the normal keyboard tabbing order. You can still tab to the link and select it. You would have to add tabindex="-1" to the link to prevent tabbing to it.

I know your sample snippet was just for testing purposes, but hopefully you don't have a case where an interactive element, such as a link, is being hidden from a screen reader user. aria-hidden should be used to hide non-important stuff (decorative things) from screen readers, or if you are visually hiding something temporarily and also want the thing hidden from screen readers, for example if you have an expand/collapse thing and when the element is collapsed, you are visually hiding the contents by moving it off screen (instead of using display:none), you would want to have aria-hidden="true" set on the contents too.

thank you for the comment! By "accessible", I was meaning the normal keyboard tabbing order you already mention. The code snippet was indeed only for testing purposes because I was a bit confused by the documentation I mention in the question. Thanks for clearing the confusion! — coffeeak, Sep 06 '18 at 18:54

Aria-hidden=true on parent does not make its children also aria-hidden

1 Answers1