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.
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).
The following paragraph is ignored by screen readers:
<p aria-hidden="true"> Hello folks! </p>
<p> This content is perceivable by screen readers. </p> <p aria-hidden="true"> This content is not perceivable by screen readers. </p>
|Keyboard only||✔ (pass) pass||-||2018-3-26|
|NVDA 2018.1 + FF Quantum 59.0.2||✔ (pass) pass||-||2018-3-27|
|JAWS 2018.3 + IE 11||✔ (pass) pass||-||2018-3-26|
|JAWS 2018.3 + FF ESR 52.7.3||✔ (pass) pass||-||2018-3-27|
Peculiarities and side effects
All children hidden
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.
<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.
<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
<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
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.