ARIA attributes need to suit their element's role

Rule: axe/aria-conditional-attr
Checks: ARIA attributes must be used as specified for the element’s role
WCAG: 4.1.2
Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

People who use a screen reader or a braille display, most of them blind.

How to fix it

A native checkbox or radio button has an `aria-checked` that disagrees with its checked state

Remove aria-checked and let the browser report the state from checked. For a partly checked checkbox, set the element’s indeterminate property from script, since HTML has no attribute for it.

<label><input type="checkbox" name="select-all" checked> Select all</label>

A row in a `table` or `grid` has `aria-expanded`, `aria-level`, `aria-posinset` or `aria-setsize`

Those attributes belong to rows of a treegrid. If the rows really nest and expand, build a treegrid with its keyboard behavior; otherwise remove them, and put aria-expanded on the button inside the row that shows more.

<table>
  <caption>Orders</caption>
  <tr><th scope="col">Order</th><th scope="col">Items</th></tr>
  <tr>
    <td>1042</td>
    <td><button type="button" aria-expanded="false" aria-controls="order-1042">Show items</button></td>
  </tr>
  <tr id="order-1042" hidden><td colspan="2">Trail shoes, rain jacket</td></tr>
</table>

Fixes that fail

Setting `aria-checked` to match the checkbox’s state

axe passes until someone clicks, and from then on script has to keep the two in step. Browsers already report the native state, so the attribute adds nothing and fails again at the first slip.

Changing a `table` or `grid` to `role="treegrid"` to clear the failure

A treegrid promises arrow-key navigation and rows that expand and collapse. Without that behavior, screen reader users get instructions that do not work.

In React

The part of the fix that differs in React, in its syntax. The rest of the guidance holds.

A checkbox component sets `aria-checked="mixed"` to show a partly checked state

React has no indeterminate prop, so set the DOM property through a ref and drop aria-checked. The browser then reports the mixed state itself.

function SelectAll({ checked, indeterminate, onChange }) {
  return (
    <label>
      <input
        ref={(input) => {
          if (input) input.indeterminate = indeterminate;
        }}
        type="checkbox"
        checked={checked}
        onChange={onChange}
      />
      Select all
    </label>
  );
}

Fixes that fail in React

Mirroring the `checked` prop into `aria-checked`

The two agree only until the box is partly checked or the state lags a click. checked already sets the state the browser reports.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.