CODEWITHSUNDEEP
htmlcssaccessibility
Jon
Jon

Reputation: 2584

Assign a role using CSS instead of adding it to the HTML tags

Is it possible to assign a role to all elements with a given class? I'd want to turn this:

<div class="a" role="button">Text!</div>
<div class="a" role="button">More text!</div>

into this

<div class="a">Text!</div>
<div class="a">More text!</div>
<style>
.a { 
  role: button
}
</style>

I've found solutions for filtering by role in css but nothing to assign a role to elements using css.

Upvotes: 2

Views: 1159

Answers (2)

Raeesh Alam
Raeesh Alam

Reputation: 3480

You can achieve with pure JavaScript through forEach() method.

document.querySelectorAll(".a").forEach(function(role){
  role.setAttribute('role', 'button');  
});
<div class="a">Text!</div>
<div class="a">Text #2</div>
<div class="a">More text!</div>

Upvotes: 0

J&#250;lius Ľuptovec
J&#250;lius Ľuptovec

Reputation: 337

let buts = document.getElementsByClassName("a");

for(let i = 0; i < buts.length; i++){
  buts[i].setAttribute("role", "button");
}
<div class="a">Text!</div>
<div class="a">More text!</div>

Upvotes: 2

Related Questions