CODEWITHSUNDEEP
javascriptjquery
Sarah C
Sarah C

Reputation: 41

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.

Upvotes: 4

Views: 14134

Answers (3)

su lin
su lin

Reputation: 41

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.

Upvotes: 4

jacob Denis
jacob Denis

Reputation: 51

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

Upvotes: 0

user13532287
user13532287

Reputation:

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

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

Upvotes: 0

Related Questions