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

user_1524950 0
Viewed 276

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.

accessibility css html
2 Answers

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>

user_92798350

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>

user_70529270
Related