We detected an element functioning as a tablist missing a tablist role
| Field | Value |
|---|---|
| Rule code | Manual_Tablist_Role_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
We detected a group of tabs that is missing the required "tablist" role. A tablist serves as a container for a set of tabs and helps assistive technologies understand the relationship between tabs and their content panels. Without the proper role="tablist" attribute on the container element, screen readers cannot identify the group as a set of related tabs, making navigation difficult for users who rely on assistive technology. The tablist role is essential for creating an accessible tab interface.
How to fix
Add role="tablist" to the container element that holds all tab elements. Also add an aria-label or aria-labelledby attribute to provide an accessible name that describes the purpose of the tab group.
<div role="tablist" aria-label="Product Information">
<button role="tab" id="details-tab" aria-selected="true" aria-controls="details-panel">Product Details</button>
<button role="tab" id="specs-tab" aria-selected="false" aria-controls="specs-panel">Specifications</button>
<button role="tab" id="reviews-tab" aria-selected="false" aria-controls="reviews-panel">Customer Reviews</button>
</div>
<div id="details-panel" role="tabpanel" aria-labelledby="details-tab">
Product details content
</div>
<div id="specs-panel" role="tabpanel" aria-labelledby="specs-tab" hidden>
Specifications content
</div>
<div id="reviews-panel" role="tabpanel" aria-labelledby="reviews-tab" hidden>
Reviews content
</div>
In more complex interfaces, you may need to set additional ARIA attributes like aria-orientation="horizontal" (default) or aria-orientation="vertical" to specify the orientation of the tabs.