Trying to Unhide an aria-hidden Child

ARIA provides an attribute which allows to hide elements from screen readers. It works pretty uniformly on non-focusable elements in modern browsers and screen readers, but it still has some very odd peculiarities. So you better try to create solutions that do not need it.

While it is only possible using a workaround to hide elements visually but leave it there for screen readers (see Hiding elements visually by moving them off-screen), there exists a specific ARIA attribute aria-hidden to hide elements from screen readers (but leaving them there visually).

All children hidden

When setting aria-hidden="true" to an element, all children will also be hidden. It is not possible to override this by setting aria-hidden="false" to a child element.

Working Example

Conclusion

While you can use aria-hidden=”true” on any element that is not focusable and does not contain any focusable element itself, you must never use it on focusable elements. Also be careful when referencing hidden elements using aria-describedby.

In general: whenever you think about hiding something from any audience, better ask yourself whether this is really a good solution. Most of the time it is better to create a solution that works the same way for everybody, and which does not need any shaky ARIA .

Code

<div aria-hidden="true">
  <p>
    This content is not perceivable by screen readers.
  </p>
  <p aria-hidden="false">
    This content still is not perceivable by screen readers.
  </p>
</div>

NIL

NIL