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.

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.

• javascript
• jquery

• 1 Your button does not have an id of owl-dot so getElementById doesn't find it. Either get by class or give it the id. Once it has an id, the setAttribute works fine: jsfiddle/fb3pxdoq – fdomn-m Commented Sep 16, 2020 at 17:05

3 Answers 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:

1. The DOMs inside are have too many levels, then the count string might not be read out.
2. The aria-label is different from inside content string.

Try this, it provides good documentation as to when or how to use.

https://www.aditus.io/aria/aria-label/

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");