Tabpanel accessible name is missing
| Field | Value |
|---|---|
| Rule code | Manual_Tabpanel_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
We detected a tabpanel that does not have an accessible name. Tabpanels must be programmatically associated with their corresponding tab through proper labeling. This association helps screen reader users understand which tab controls which panel of content. Each tabpanel should have an accessible name, typically provided through the aria-labelledby attribute referencing the ID of its associated tab. Without this association, users of assistive technology cannot understand the relationship between tabs and their content.
How to fix
Add an aria-labelledby attribute to each tabpanel that references the ID of its corresponding tab. Ensure each tab has a unique ID that can be referenced.
<div role="tablist">
<button role="tab" id="tab1" aria-selected="true" aria-controls="panel1">Weather Forecast</button>
<button role="tab" id="tab2" aria-selected="false" aria-controls="panel2">Traffic Updates</button>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1">Weather forecast content here</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>Traffic updates content here</div>
Alternatively, you can use aria-label to provide a direct label, though aria-labelledby is preferred for maintaining the connection with the tab:
<div id="panel1" role="tabpanel" aria-label="Weather Forecast">Weather forecast content here</div>