# Bad value “tabpanel” for attribute “role” on element “article”.
> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-tabpanel-for-attribute-role-on-element-article
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `article` element has an implicit ARIA role of `article`, which signals to assistive technologies that it contains a self-contained, independently distributable piece of content—like a blog post, news story, or forum entry. When you add `role="tabpanel"` to an `article`, you're attempting to override this strong semantic meaning with a widget role, which the HTML specification does not permit. The ARIA in HTML specification defines a strict set of allowed roles for each HTML element, and `tabpanel` is not in the list of permissible roles for `article`.
This matters for several reasons. First, assistive technologies like screen readers rely on accurate role information to communicate the purpose of elements to users. An `article` element claiming to be a `tabpanel` creates a confusing and contradictory signal. Second, the W3C validator flags this as an error, meaning your markup is technically invalid. Third, browsers may handle this conflict inconsistently—some might honor the explicit `role`, while others might prioritize the element's native semantics, leading to unpredictable behavior across platforms.
The `tabpanel` role is designed for use in a tab interface pattern alongside `role="tablist"` and `role="tab"`. According to the WAI-ARIA Authoring Practices, a tab panel should be a generic container that holds the content associated with a tab. Elements like `div` and `section` are ideal because they don't carry conflicting implicit roles (`div` has no implicit role, and `section` maps to `region` only when given an accessible name, which gets properly overridden by `tabpanel`).
To fix the issue, simply change the `article` element to a `div` or `section`. If you genuinely need the semantic meaning of `article` within a tab panel, nest the `article` inside the `div` that carries the `tabpanel` role.
## Examples
### Incorrect: `tabpanel` role on an `article` element
```html
Latest News
Tab panel content here.
```
This triggers the validation error because `article` does not allow the `tabpanel` role.
### Correct: `tabpanel` role on a `div`
```html
Latest News
Tab panel content here.
```
### Correct: Nesting an `article` inside the tab panel
If you need the `article` semantics for the content within the panel, nest it:
```html
Latest News
This is a self-contained article displayed within a tab panel.
```
### Full tab interface example
Here's a complete, valid tab interface implementation:
```html
Tab Interface Example
Latest news content goes here.
Sports content goes here.
```
Note the use of `aria-controls` on each `tab` to reference its corresponding panel, `aria-labelledby` on each `tabpanel` to reference its controlling tab, and the `hidden` attribute on inactive panels. These associations ensure assistive technologies can properly navigate the tab interface.