CODEWITHSUNDEEP
htmlaccessibility
Squiggs.
Squiggs.

Reputation: 4474

A11Y - Screen reader doesn't read `aria-description` tag

I currently have a simple bit of markup on my site, and can't seem to get a screen reader to read it. Am I missing something?

<section aria-label="This is the text I want to be read "></section>

I've also tried:

<section aria-description="This is the text I want to be read "></section>

The section isn't tabbable as such as its not a link, not sure if that's connected to the problem, but my understanding of whether the screen reader should or should not be reading something is sketchy at best.

Screen reader in question, if it matters.

https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

Any help appreciated.

Upvotes: 0

Views: 2542

Answers (2)

slugolicious
slugolicious

Reputation: 17563

It might depend how you are navigating with the screen reader. Since the <section> is not a keyboard focusable element, I'm assuming you have some text content in it? Most screen readers will let you navigate to all elements on the page, including plain text, using the down arrow. The down arrow essentially walks the DOM. (It actually walks the accessibility tree but for now think of it as walking the DOM.)

If you can navigate to a focusable element before the <section> using the tab key, then you can start using the down arrow to get to the section.

With NVDA, I heard "This is the text I want to be read, region". Note that it's saying "region" because a <section> element has a default role of "region".

With JAWS, it did not read the aria-label, but that's because of the JAWS default verbosity settings which does not include regions. If you change your verbosity setting from the default "medium" to "high", then you will hear the section label when you arrow down to it. (Or you can configure your current verbosity setting to include regions.)

With JAWS, you can also navigate by landmarks. Since a <section> has a "region" role, and a region is a landmark, I can navigate by landmarks with JAWS using the R key and when I do that, I hear "This is the text I want to be read region", regardless of my verbosity setting.

So, as someone else posted, if you use a "standard" screen reader, the label will be read. If you use a lesser known screen reader, then it's hard to say what will happen.

Regarding aria-description, that's not production yet. It's part of the ARIA 1.3 specs which is still in draft form. The production ARIA 1.2 does not have aria-description so it's doubtful it will be read.

Upvotes: 2

QuentinC
QuentinC

Reputation: 14872

ACcording to ARIA specification, the <section> can perfectly have the aria-label attribute. Most other HTML5 structural elements also allow aria-label because they are landmark regions.

So, conforming screen readers are supposed to read it, and, as far as I have tested, they indeed do.

Attribute aria-description is more recent than aria-label, so you should prefer aria-label in order to maximize the chances to have it read.

IN order to make good and relevant tests, I suggest you to use a true screen reader really used by users, rather than a browser extension that nobody use in the real life. You may try one or more of the following, depending on your target systems and possibilities: (Non exhaustive list)

  • NVDA, Jaws and Supernova under windows
  • VoiceOver under MacOS, iOS and iPadOS
  • Talkback and VoiceAssistant under Android

NVDA, VoiceOver and Talkback are totally free, and VoiceOver is even always available out of the box without the need to install anything. So you really have no reason to don't try them out.

Upvotes: 1

Related Questions