ARIA Usage
Checks for potentially problematic use of ARIA roles and attributes.
What is this check?
ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to make them more accessible, especially for complex UI components like menus or sliders. This check looks for common ARIA errors.
Why is it important?
While ARIA can be very powerful, incorrect usage can make a page even less accessible than it was before. The first rule of ARIA is 'Don't use ARIA' if a native HTML element with the right semantics already exists.
What is the impact?
Incorrect ARIA can confuse or mislead assistive technologies, leading to a frustrating user experience.
Example Implementation
<!-- BAD: Using a role that conflicts with the element -->
<h1 role="button">Click me</h1>
<!-- GOOD: Adding state to a custom button -->
<div role="button" aria-pressed="false" tabindex="0">Custom Button</div>