no-abstract-roles

This rule disallows the use of abstract ARIA roles.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/no-abstract-roles": "error",
  },
};

Rule Details

Abstract roles are part of the ARIA (Accessible Rich Internet Applications) specification, but they are not intended for direct use in HTML. Using these roles has no effect and may lead to accessibility issues.

The following abstract roles are disallowed by this rule:

  1. Abstract roles
    1. command
    2. composite
    3. input
    4. landmark
    5. range
    6. roletype
    7. section
    8. sectionhead
    9. select
    10. structure
    11. widget
    12. window

Examples of incorrect code for this rule:

<div role="command"></div>
<div role="composite"></div>
<div role="input"></div>

Examples of correct code for this rule:

<div role="button"></div>

Further Reading

  1. HTML spec - Abstract Roles