nonInteractiveElementRoles

Reports non-interactive elements with interactive ARIA roles.

✅ This rule is included in the jsx logical preset.

Non-interactive HTML elements such as <div> and <span> are not given interactions such as Tab focus by browsers. Giving a non-interactive HTMl element an interactive role will not fill in those interactions, and so causes accessibility issues on pages that do so. It’s generally more accessible to use native interactive elements instead.

Examples

❌ Incorrect

<h1 role="button" />

<div role="link" />

<img role="checkbox" />

✅ Correct

<button />

<a href="/" />

<input type="checkbox" />

<ul role="menu" />

<li role="menuitem" />

When Not To Use It

If you are using a framework that fully recreates browser interaction events for elements, you can safely disable this rule. However, native browser interactions are exceedingly difficult to fully recreate. It is strongly recommended to use native interactive elements instead.

Further Reading

• WCAG 4.1.2 - Name, Role, Value
• WAI-ARIA Roles

Equivalents in Other Linters

• ESLint: jsx-a11y/no-noninteractive-element-to-interactive-role