## Why is this an issue?

Non-interactive DOM elements are those that do not have built-in interactivity or do not require user interaction. Examples include `<div>`, `<p>`, `<img>`, `<h1>` to `<h6>`, and `<ul>`, among others. These elements are typically used to structure content and layout but do not have any inherent interactive behavior.

Interactive ARIA roles, on the other hand, are used to make elements interactive and accessible. These roles include `button`, `link`, `checkbox`, `menuitem`, `tab`, and others. They are used to communicate the type of interaction that users can expect from an element.

Non-interactive DOM elements should not use interactive ARIA roles because it can confuse assistive technologies and their users. For example, if a `<div>` (a non-interactive element) is given an interactive role like "button", assistive technologies like screen readers will announce it as a button. However, since `<div>` doesn’t have the inherent behavior of a button, it can confuse users who expect it to behave like a button when interacted with.

This can lead to a poor user experience and can make the website less accessible for users relying on assistive technologies. Therefore, it’s important to ensure that non-interactive DOM elements are not given interactive ARIA roles.

## How to fix it

Ensure that non-interactive DOM elements do not use interactive ARIA roles.

### Code examples

#### Noncompliant code example

    <li role="button">Foo</li> <!--Noncompliant; "li" isn't interactive, but "button" is-->

#### Compliant solution

    <li role="listitem">Foo</li>

## Resources

### Documentation

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