'Using aria-labelledby to refer to self and others IDs is not working

I am new to web accessibility and learning it based on Youtube videos. I watched this video:

https://www.youtube.com/watch?v=z8xUCzToff8

and notice that using aria-labelledby to refer to self and others IDs is not working. From the following screenshot of this video

enter image description here

This code snippet (copied from the screenshot)

   <h2 id="lbl">Men's Outerwear</h2>
   <button id="btn" aria-labelledby="lbl btn">Shop Now</button>

should pronounce "men's outerwear, shop now, button" via screen reader. However, when I tested it with the Screen Reader extension in Chrome, I only heard "men's outerwear". What did I miss?

Actually, I need to use the same HTML structure as shown above in my real web application. So, I need to find out why the above code is not working.

htmlaccessibilitywai-aria


Solution 1:[1]

Sounds like a bug in your screen reader plugin. You're not testing with a standard screen reader that real users use. Try one of these:

  • JAWS (PC) - it has a free trial mode so you can test your example.
  • NVDA (PC) - completely free although donations are accepted.
  • VoiceOver (Mac) - already installed on Macs
  • VoiceOver (iOS) - already installed on iOS devices

I use aria-labelledby all the time and it works great with multiple IDs on all the above screen readers.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious

Related Questions