Rampsight

All rules

ARIA

Some ARIA attributes contradict the native element

Why it matters

A checkbox already reports whether it is checked. Adding aria-checked lets the two disagree, and the assistive technology believes the attribute — so the announced state can be the opposite of what the person sees.

How to fix it

  1. Remove the ARIA attribute and let the native element report its own state.
  2. Drive the state with the DOM property (checked, selected, disabled) instead.
  3. Keep ARIA states for custom controls built from generic elements, where nothing else reports them.

In markup

Fails
<input type="checkbox" aria-checked="true">
Passes
<input type="checkbox" checked>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on aria-conditional-attr (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.