Valid ARIA attributes for element roles

How to use only allowed ARIA attributes?

Check which ARIA attributes are permitted for the role you are using. Below are correct examples:

<!-- role="checkbox" allows aria-checked -->
<div role="checkbox" aria-checked="false">Accept terms</div>

<!-- role="listbox" allows aria-multiselectable -->
<ul role="listbox" aria-multiselectable="true">
  <li role="option" aria-selected="false">Option A</li>
  <li role="option" aria-selected="true">Option B</li>
</ul>

<!-- role="slider" allows aria-valuemin, aria-valuemax, aria-valuenow -->
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">Volume</div>

The following is incorrect because aria-checked is not allowed on a role="link":

<a href="/page" role="link" aria-checked="true">Page</a>

Why is this important?

Screen readers rely on ARIA attributes to describe the state and properties of elements. When an attribute is not valid for a given role, assistive technology may ignore it or produce confusing output.

Use the WAI-ARIA specification to find the supported attributes for each role.