CODEWITHSUNDEEP
htmlaccessibilitywai-aria
curious1
curious1

Reputation: 14717

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.

Upvotes: 1

Views: 898

Answers (1)

slugolicious
slugolicious

Reputation: 17445

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.

Upvotes: 1

Related Questions