Conditional ARIA attributes

How to fix this issue?

Only add ARIA attributes when the element is in a state that requires them. The most common example is aria-expanded, which is only valid on elements that can open or close something:

<button aria-expanded="false" aria-controls="menu">Open menu</button>
<ul id="menu" hidden>
  <li>Item 1</li>
</ul>

<a href="/page" aria-expanded="false">Go to page</a>

Another example is aria-checked, which is only valid on checkboxes, radio buttons, and similar roles:

<div role="checkbox" aria-checked="true">Accept terms</div>

<div aria-checked="true">Some text</div>

Remove any ARIA attribute that does not apply to the current role or state of the element.

Why is this important?

Screen readers read ARIA attributes to describe the state of elements to users. An attribute used outside its valid context produces incorrect or confusing announcements. Users may be told an element is expanded, checked, or selected when it has no such meaning.

Follow the WAI-ARIA specification to check which attributes are valid for each role and under which conditions they apply.