How to Fix Missing Required ARIA Attributes WCAG

Why this matters

Screen readers rely on required ARIA attributes to understand the state and behavior of custom widgets. A checkbox without aria-checked cannot tell users whether it is checked or unchecked. Missing required attributes render custom components non-functional for assistive technology.

Code examples

<!-- checkbox role missing required aria-checked -->
<div role="checkbox" tabindex="0">Subscribe</div>

<!-- combobox missing required aria-expanded -->
<div role="combobox">Select option</div>

<!-- checkbox with required aria-checked -->
<div role="checkbox" aria-checked="false" tabindex="0">Subscribe</div>

<!-- combobox with required attributes -->
<div role="combobox" aria-expanded="false" aria-controls="listbox-id">Select option</div>

How to fix it — step by step

1. 1
   Check the ARIA specification for required attributes for each role you use
2. 2
   role='checkbox' requires aria-checked (true/false/mixed)
3. 3
   role='combobox' requires aria-expanded and aria-controls
4. 4
   role='slider' requires aria-valuenow, aria-valuemin, and aria-valuemax
5. 5
   role='progressbar' requires aria-valuenow
6. 6
   Update ARIA state attributes dynamically with JavaScript when state changes
7. 7
   Use native HTML elements where possible — <input type='checkbox'> has aria-checked built in

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.