Rampsight

All rules

ARIA

Some roles require a specific parent

Why it matters

A role="tab" outside a tablist, or a listitem outside a list, has no context. Assistive technology cannot say "tab 2 of 5" because it does not know what the element belongs to.

How to fix it

  1. Wrap the children in an element with the parent role the specification requires.
  2. Keep the relationship direct — an intervening div needs role="presentation".
  3. If there is no such parent in the design, the child role is the wrong one.

In markup

Fails
<div>
  <button role="tab">Overview</button>
</div>
Passes
<div role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
</div>

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-required-parent (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.