Why is this an issue?

Non-interactive DOM elements are HTML elements that are not designed to be interacted with by the user, for instance <div>, <span>, and <footer>, etc. They are typically used to structure content and do not have built-in interactivity or keyboard accessibility.

Interactive handlers, on the other hand, are event handlers that respond to user interactions. These include handlers like onClick, onKeyDown, onMouseUp, and more. When these handlers are added to an HTML element, they make the element respond to the specified user interaction.

When non-interactive elements have interactive handlers, it can lead to several problems:

• Unexpected behavior: Non-interactive elements are not designed to be interactive, so adding interactive handlers can cause unexpected behavior. For example, non-interactive elements do not naturally receive keyboard focus, so keyboard users might not be able to activate the handler.
• Confusing for assistive technologies: Assistive technologies might not announce non-interactive elements with interactive handlers correctly. This can make it difficult for users to understand how to interact with the content.
• Violation of HTML standards: Using interactive handlers on non-interactive elements can be seen as a misuse of HTML, as it goes against the intended use of these elements.

By enforcing that interactive handlers are only used on interactive elements, this rule helps create a more predictable and user-friendly experience for all users, and ensures that web content adheres to accessibility standards and best practices.

How to fix it

The simplest and most recommended way is to replace the non-interactive elements with interactive ones. If for some reason you can’t replace the non-interactive element, you can add an interactive role attribute to it and manually manage its keyboard event handlers and focus. Common interactive roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, and textbox.

Code examples

Noncompliant code example

<div onClick={() => {}} />; // Noncompliant

Compliant solution

<div onClick={() => {}} role="button" />;

Resources

Documentation

• WCAG - Name, Role, Value
• MDN web docs - WAI-ARIA Roles