## 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="showMessage('Hello')" /> <!-- Noncompliant -->

#### Compliant solution

    <div onClick="showMessage('Hello')" role="button" />

## Resources

### Documentation

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