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

> Canonical HTML version: https://rocketvalidator.com/html-validation/every-active-role-tab-element-must-have-a-corresponding-role-tabpanel-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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.