About This HTML Issue
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
<article role="tabpanel" id="panel1">
<h2>Latest News</h2>
<p>Tab panel content here.</p>
</article>
This triggers the validation error because article does not allow the tabpanel role.
Correct: tabpanel role on a div
<div role="tabpanel" id="panel1">
<h2>Latest News</h2>
<p>Tab panel content here.</p>
</div>
Correct: Nesting an article inside the tab panel
If you need the article semantics for the content within the panel, nest it:
<div role="tabpanel" id="panel1">
<article>
<h2>Latest News</h2>
<p>This is a self-contained article displayed within a tab panel.</p>
</article>
</div>Full tab interface example
Here’s a complete, valid tab interface implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tab Interface Example</title>
</head>
<body>
<div role="tablist" aria-label="Topics">
<button role="tab" id="tab1" aria-controls="panel1" aria-selected="true">News</button>
<button role="tab" id="tab2" aria-controls="panel2" aria-selected="false">Sports</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
<p>Latest news content goes here.</p>
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
<p>Sports content goes here.</p>
</div>
</body>
</html>
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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.