Every active “role=tab” element must have a corresponding “role=tabpanel” element.

An element with role="tab" requires a corresponding element with role="tabpanel" in the same document. Without this pairing, assistive technologies cannot associate the tab with the content it controls.

The WAI-ARIA specification defines a tab interface as a set of layered content areas, where only one panel is visible at a time. Each role="tab" element must reference a role="tabpanel" element through the aria-controls attribute, and each role="tabpanel" should reference its tab back using aria-labelledby.

The tabs themselves must be wrapped in a container with role="tablist". The selected tab gets aria-selected="true", while inactive tabs get aria-selected="false". Each tabpanel that is not currently visible should be hidden with the hidden attribute or equivalent CSS.

The W3C validator flags this error when it finds a role="tab" element but no matching role="tabpanel" exists in the document. This can happen when the tab panels are missing entirely, or when they exist but lack the role="tabpanel" attribute.

Invalid example

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
</div>

<div id="panel-1">Content for tab 1</div>
<div id="panel-2" hidden>Content for tab 2</div>

The two div elements exist but have no role="tabpanel", so the validator reports the error.

Valid example

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Content for tab 1
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Content for tab 2
</div>

Each role="tab" now has a corresponding role="tabpanel". The aria-controls on each tab points to the id of its panel, and aria-labelledby on each panel points back to the id of its tab.

Learn more:

MDN Reference

Using ARIA: Roles, states, and properties - Accessibility | MDN

→

MDN Reference

ARIA: tabpanel role - Accessibility | MDN

→

W3C Reference

ARIA Authoring Practices Guide - Tabs Pattern

→