A: Elements must only use ARIA supported attributes (WCAG 4.1.2)

• Meaning
• Impact
• Recommendation
• Examples

Ensure that ARIA attributes are allowed for the assigned role of an element.

This means

Each ARIA attribute specifies for which roles it is permitted. For example, using aria-selected on a button or aria-pressed with role="switch" causes a role/attribute mismatch. Assistive technologies cannot correctly convey state and purpose.

Impact

Misuse, incorrect screen reader announcements, broken keyboard patterns, and thus WCAG violation. This impairs orientation, conversion, and compliance.

Recommendation

• Prefer native HTML (e.g., <button>, <input type="checkbox">, <ul>/<li>).
• Use only role-compatible states/properties:
  • button → optionally aria-pressed (toggle).
  • role="switch" → aria-checked (not aria-pressed).
  • role="tab" → aria-selected, aria-controls (within tablist).
  • role="checkbox", menuitemcheckbox → aria-checked.
  • Avoid contradictions (no redundant/conflicting ARIA attributes).
  • Decoration/no interaction: remove ARIA or use aria-hidden="true".

Example

Problematic

<button aria-selected="true">Send</button>             <!-- 'selected' not for button -->
<div role="switch" aria-pressed="true">Sound</div>         <!-- switch needs aria-checked -->
<li role="listitem" aria-checked="true">Option A</li>    <!-- 'checked' not for listitem -->

Better

<button aria-pressed="true">Send</button>              <!-- toggle button correct -->
<div role="switch" aria-checked="true" aria-label="Sound"></div>
<label><input type="checkbox" checked> Option A</label>  <!-- native instead of incorrect ARIA -->