CODEWITHSUNDEEP
accessibilitywai-ariavoiceoverjaws-screen-readernvda
user1486133
user1486133

Reputation: 1457

Using aria-describedby and a screenreader-only element, not read out by some screenreaders

I am attempting to give screenreader users some additional information about a list of links and what they represent.

Rather than putting an aria-label on a <ul>, which I understand is discouraged, I have put a screenreader only element in place. I have then bound the and this element together using aria-describedby.

<span id="describer" aria-hidden=true> I'm a screenreader only element hidden with CSS</span>
<ul aria-describedby="describer">...</ul>

This seems to be suggested as the correct use for aria-describedby and it works excellently when using VoiceOver on OSX. When a user navigates over the <ul> the describer text is read out.

However, it does not work on NVDA, nor does it work on VoiceOver iOS, or TalkBack on Android. It does not read out the screenreader only text.

I am struggling to find a solution that satisfies the major screenreaders (VO, NVDA, TalkBack, JAWS).

What have I done wrong?

Upvotes: 1

Views: 1649

Answers (1)

QuentinC
QuentinC

Reputation: 14687

When an element has aria-hidden=true, it's totally removed from the accessibility tree, as if it didn't exists at all for screen readers.

In the aria-describedby attribute, you are referencing an element supposed to be absent from the accessibility tree. So you have obviously created an undefined behavior. Some screen readers will consider aria-hidden=true stronger than aria-describedby and so will behave as if it didn't exists, while some other screen readers will consider aria-describedby stronger and read the description although it's supposed to be hidden.

It's not very clear why you would do something as in your example. Why do you hide the element from the accessibility tree if it should be a description for something else? Why do you hide it in the first place then?

Additionally, aria-describedby, just like aria-label and aria-labelledby, may not work with all screen readers when applied to a non-interactive element. The safest alternative to present different content for normal and screen reader users on non-interactive elements is by using visually hidden text, like this:

<span class="sr_only">This text is read by screen readers, but invisible on screen</span>
<span aria-hidden="true">This text is visible on screen, but ignored by screen readers</span>

You will find the corresponding sr_only CSS class in popular frameworks, sometimes called visually-hidden or screenreader or screen-reader.

Upvotes: 2

Related Questions