10 lines
1.3 KiB
Plaintext
10 lines
1.3 KiB
Plaintext
== 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.
|