'Add aria-label on button
How do I add aria-label to a button? From:
<button type="button" class="owl-dot active"><span></span></button>
to:
<button role="button" aria-label="slide-dot" class="owl-dot active"><span></span></button>
I've tried to use document.getElementById('owl-dot').setAttribute('aria-label', 'slide-dot'); but it's not working.
Solution 1:[1]
Try this, it provides good documentation as to when or how to use.
Solution 2:[2]
your code is not working because the owl-dot is a class. if want to use your code add the owl-dot id to your button but you can also use the class to set the aria-label value.
$(".owl-dot").attr('aria-label',"slide-dot");
Solution 3:[3]
Your solution is correct, please make sure it runs after DOM is ready.
document.getElementById('owl-dot').setAttribute('aria-label', 'slide-dot')
In fact, you do not need to add aria-label for current button DOM since the inside content could be read out instead.
The aria-label should be added to button DOM only when:
- The DOMs inside are have too many levels, then the count string might not be read out.
- The
aria-labelis different from inside content string.
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 | |
| Solution 2 | jacob Denis |
| Solution 3 | su lin |