We detected an element functioning as a tabpanel missing a tabpanel role
| Field | Value |
|---|---|
| Rule code | Manual_Tabpanel_Role_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
We detected content that appears to be controlled by tabs but is missing the required "tabpanel" role. Tabpanels are containers that display content associated with a selected tab. Without the proper role="tabpanel" attribute, assistive technologies cannot identify the relationship between tabs and their content, making the interface confusing for screen reader users. Each section of content controlled by a tab must have role="tabpanel" to create the proper semantic structure.
How to fix
Add role="tabpanel" to each content container that is controlled by a tab. Also ensure proper association by adding an aria-labelledby attribute that references the ID of the corresponding tab.
<div role="tablist">
<button role="tab" id="sports-tab" aria-selected="true" aria-controls="sports-panel">Sports</button>
<button role="tab" id="news-tab" aria-selected="false" aria-controls="news-panel">News</button>
<button role="tab" id="weather-tab" aria-selected="false" aria-controls="weather-panel">Weather</button>
</div>
<div id="sports-panel" role="tabpanel" aria-labelledby="sports-tab">
Sports content goes here
</div>
<div id="news-panel" role="tabpanel" aria-labelledby="news-tab" hidden>
News content goes here
</div>
<div id="weather-panel" role="tabpanel" aria-labelledby="weather-tab" hidden>
Weather content goes here
</div>
Ensure that only the active tabpanel is visible at any time, with others hidden using the hidden attribute or CSS.