Elements Hidden with aria-hidden are not Hidden when Referenced

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

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

Working Example

Is the following link great or not?

This link is not great.

Explanation

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.

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

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

NIL

NIL