Hiding elements from screen readers using aria-hidden

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.

Background

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).

Intended use

The following paragraph is ignored by screen readers:

<p aria-hidden="true">
  Hello folks!
</p>

Hiding an element using aria-hidden

Show HTML code

+ ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass) , + ✔ (pass)

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

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-3-26
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-8-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-3-27
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2023-7-13

Peculiarities and side effects

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.

Trying to unhide an aria-hidden child

<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>

Does not work on focusable elements

You must never use aria-hidden="true" on any focusable element, or on any element that itself contains focusable children.

This is due to the fact that aria-hidden indeed is respected by screen readers even on focusable elements while reading them in browse mode - but during usage of focus mode, focusable elements are still reachable by the browser (with the Tab key), which leads to strange (or missing) announcements of hidden elements.

Hiding an element with a focusable child

<div aria-hidden="true">
  <p>
    This whole content is not perceivable by screen readers.
  </p>
  <a href="#">This link can still be focused though</a>
</div>

Not hidden anymore as description

Elements hidden using aria-hidden are not hidden anymore when referencing them using aria-describedby.

Elements hidden with aria-hidden are not hidden when referenced

<p>
  Is the following link great or not?
</p>
<a aria-describedby="description" href="...">Please click me</a>
<p id="description">
  This link is <span aria-hidden="true">not </span>great.
</p>

In focus mode, a screen reader's announcement of the link will be:

Please click me. Link. This link is not great.

But the "not" in the describing paragraph is hidden using aria-hidden. Look at it in browse mode, and it will be announced by screen readers like this:

This link is great.

Very confusing stuff.

Real world use (and 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.