1

I have this div <div role="status" aria-label="chicken"></div> and NVDA screen reader is unable to read it. If I change the role to button it works. Am I doing something wrong or is it a bug on NVDA part? It works with other screen readers.

Tested on Chrome.

Example: https://jsfiddle.net/4yachrtx/

Lunny
  • 852
  • 1
  • 10
  • 23
  • Aria-label is guaranteed to work everywhere only with interactive elements. The status role don't define an interactive element, that's why it doesn't work. – QuentinC Apr 19 '23 at 15:29
  • @QuentinC I see. Then what would be the recommended approach to label a div with role status? – Lunny Apr 19 '23 at 15:42
  • With respect, @QuentinC, yes, interactive elements have robust support for aria-label but `
    ` elements with a role are also supposed to be supported. See "[2.10 Practical Support: aria-label, aria-labelledby and aria-describedby](https://www.w3.org/TR/using-aria/#label-support)". The first bullet point talks about interactive elements, as QuentinC mentioned, but the 3rd last bullet point talks about roles on `
    ` elements. The accessibility tree for the example shows the accname for the `
    ` is "chicken" but neither NVDA nor JAWS announce it. I've never labelled a "live" region.
     – slugolicious Apr 19 '23 at 16:15
  • 1
    @slugolicious it seems in the 3rd last bullet it says. "Other roles besides Landmarks (discussed above) are ignored." So I'm guessing that's why. – Lunny Apr 19 '23 at 17:10
  • Oh yeah, I read that but I've looked at it so often that my eyes just skimmed over it. Interactive roles and landmark roles seem to honor aria-label but other roles are not guaranteed. Some screen readers might announce them. But as mentioned, I've never used a label on a live region before. I have not seen a use case where it makes sense. – slugolicious Apr 19 '23 at 22:00
  • 1
    So perhaps that one possible answer is to wrap the live region inside an element with a landmark role. I was about to recommend `
    ` or `
     – QuentinC Apr 21 '23 at 06:05
  • I’ve used an `aria-label` on `
    `and `
     – slugolicious Apr 21 '23 at 15:59

1 Answers1

0

One fix for non-interactive elements is to fall back to the good old visually-hidden class and add a node inside.

<div role="status">
  <p class="visually-hidden`>Chicken</p>
  [... other info if applicable]
</div>

The item with a visually-hidden class will still be accessible to screen readers and other assistive tech, but will not affect the visual aspect of your site.

You can find a visually hidden class that is battle tested (albeit overkill for modern development as it works all the way back to IE6 lol) here: https://stackoverflow.com/a/62109988/2702894

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64