A: ARIA attributes must be used as specified for the element's role (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that ARIA attributes are used as described in the specification for the element's role.

This means

An element uses an ARIA attribute that is only allowed in certain roles or states (e.g., aria-selected only for selectable roles like tab/option, aria-checked only for checkbox/radio/switch). Outside of this context, the attribute is invalid.

Impact

Screen readers report incorrect states, keyboard patterns do not match the role, users lose orientation – a clear WCAG 4.1.2 violation.

Recommendation

• First choose the correct role, then set only the ARIA attributes intended for it.
• Where possible, use native HTML elements (better semantics “by default”).
• For selection states use aria-selected (e.g., tab, option), for toggles use aria-checked (checkbox, radio, switch).
• For expand/collapse use aria-expanded only on controlling elements with an aria-controls target.
• Remove invalid/unnecessary ARIA attributes.

Example

Problematic

<button class="tab" aria-selected="true">Home</button>   <!-- button is not selectable -->
<div role="tab" aria-checked="true">Profile</div>         <!-- aria-checked does not match 'tab' -->
<button aria-expanded="true">Menu</button>               <!-- no aria-controls target -->

Better

 <div role="tablist">
  <button role="tab" aria-selected="true"  aria-controls="panel-home"   id="tab-home">Home</button>
  <button role="tab" aria-selected="false" aria-controls="panel-profile" id="tab-profile">Profile</button>
</div>
<section role="tabpanel" id="panel-home"    aria-labelledby="tab-home">…</section>
<section role="tabpanel" id="panel-profile" aria-labelledby="tab-profile" hidden>…</section>
 
<label>
  <input type="checkbox" checked> Newsletter
</label> <!-- native element instead of aria-checked on wrong role -->
 
<button id="menuBtn" aria-expanded="false" aria-controls="menu-main">Menu</button>
<nav id="menu-main" hidden aria-labelledby="menuBtn">…</nav>