Add aria-label on button

Question

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.

Answer 1

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.