What should be the value of the role attribute when I apply onclick to a div. I read the documentation WAI-ARIA Roles, but not able to find any specific role value of a div. I am working in React and this ponent is inside a loop, on this ponent I have to go to another page when clicking on this ponent. What should be the value of the role attribute, If I do not use the role attribute then ES-Lint gives me a warning which is not acceptable.
What should be the value of the role attribute when I apply onclick to a div. I read the documentation WAI-ARIA Roles, but not able to find any specific role value of a div. I am working in React and this ponent is inside a loop, on this ponent I have to go to another page when clicking on this ponent. What should be the value of the role attribute, If I do not use the role attribute then ES-Lint gives me a warning which is not acceptable.
Share Improve this question edited Jul 8, 2021 at 13:19 Tushar Shahi 21k2 gold badges23 silver badges46 bronze badges asked Jul 8, 2021 at 13:18 Zeeshan SafdarZeeshan Safdar 4671 gold badge5 silver badges15 bronze badges2 Answers
Reset to default 5On rereading your question, EDIT: since you are performing a navigation : role ="link".
For actions, you need role="button"
But, try to use the correct semantic whenever possible.
As it goes to another page - role="link" as it is effectively a hyperlink (<a>)
However if you have your routing set up correctly just swap your <div> for an anchor <a> and set the href attribute to the target.
With that being said role="link" has good support so you should be fine with that.
Also consider that if this is a <div> then you need to add tabindex="0" to it so it can be focused with a keyboard and also handle the Enter and Space keys being pressed to also activate the link.
Much easier to use an <a> element from the start as you can imagine!