no-invalid-role
This rule disallows the use of invalid role on elements.
Why?
This rule checks for the following two cases
If a role that doesn't exist in this list is used
If using
role="presentation"
orrole="none"
on certain HTML tags- Certain HTML elements have built-in semantic roles that convey important meaning to assistive technologies (e.g., screen readers). Using
role="presentation"
orrole="none"
removes this meaning, making the content harder to interpret for users relying on assistive tools. - Interactive elements, such as
<button>
,<a>
, or<input>
, are inherently focusable and actionable. Using role="presentation" or role="none" on these elements breaks their expected functionality and prevents users from interacting with them effectively.
- Certain HTML elements have built-in semantic roles that convey important meaning to assistive technologies (e.g., screen readers). Using
How to use
.eslintrc.js
module.exports = {
rules: {
"@html-eslint/no-invalid-role": "error",
},
};
Rule Details
Examples of incorrect code for this rule:
<button role="presentation"></button>
<div role="foo"></div>
Examples of correct code for this rule:
<img role="presentation" alt="">
<span role="none"></span>