axe-core "aria-required-attr" required ARIA attribute missing in CI
axe-core rule aria-required-attr found an element whose ARIA role mandates certain attributes that are absent. For example role="checkbox" requires aria-checked. Without them the role is incomplete and unusable.
What this error means
axe reports "aria-required-attr: Required ARIA attributes must be provided" naming the role and the missing attribute, such as aria-checked on a role="checkbox".
aria-required-attr: Required ARIA attributes must be provided (critical)
Fix any of the following:
Required ARIA attribute not present: aria-checked
<div role="checkbox" tabindex="0">Subscribe</div>Common causes
A custom widget uses a role without its required state
A div given role="checkbox" or role="slider" needs the state attribute (aria-checked, aria-valuenow) that its role requires.
A role was added without wiring the ARIA state
Someone applied an ARIA role for semantics but did not add and update the required attribute as the widget state changes.
How to fix it
Add and maintain the required attribute
- Read which attribute axe reports as missing for the role.
- Add it and update it when the widget state changes.
- Re-run axe to confirm the role now has its required attributes.
<div role="checkbox" tabIndex={0} aria-checked={checked}
onClick={toggle} onKeyDown={onKey}>Subscribe</div>Prefer native elements over ARIA roles
A native <input type="checkbox"> provides the required semantics automatically and avoids the whole class of aria-required-attr failures.
How to prevent it
- Prefer native HTML elements before reaching for ARIA roles.
- When using a role, wire every attribute the role requires.
- Run axe to validate custom widgets that rely on ARIA.