missing-contextual-labeling
Web validation
Some components rely on a programmatic name to convey their purpose. Non-interactive roles such as tabpanel and named regions require an accessible name, even when their meaning looks clear from the surrounding layout.
When the required name is missing, screen reader users reach the component without the context that explains it. Visible text inside the component is not always treated as its name, so use aria-label or aria-labelledby to provide one.
Pass Patterns
Named tab panel
The tabpanel takes its name from the tab through aria-labelledby, so its purpose is clear.
<div role="tablist" aria-label="City information">
<button id="london-tab" role="tab" aria-controls="london-panel" aria-selected="true">London</button>
</div>
<div id="london-panel" role="tabpanel" aria-labelledby="london-tab">
<p>Information about London</p>
</div>Named region
The region takes its name from its visible heading through aria-labelledby, so assistive technology exposes it as a distinct, named page area.
<section aria-labelledby="news-heading">
<h2 id="news-heading">Latest news</h2>
<p>News items appear here.</p>
</section>Fail Patterns
Tab panel with no name
The tabpanel requires a name, but none is provided. Its visible heading text does not count as the name, so its purpose is not available programmatically.
<div role="tabpanel">
<h2>London</h2>
<p>Information about London</p>
</div>WCAG techniques
Sufficient techniques
- ARIA13: Using aria-labelledby to name regions and landmarks
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- H71: Providing a description for groups of form controls using fieldset and legend elements
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move into the tab panel or region.
- Listen to how the component is announced.
Expected results: The component is announced with a name that explains its purpose.
Actual results: The component is announced with only its role, such as “tab panel”, and no name.
Inspecting the browser dev-tools
- Inspect the component in your browser's dev tools.
- Open the Accessibility panel and read the Name.
- Confirm the name comes from
aria-labeloraria-labelledby.
Expected results: The component has an accessible name.
Actual results: The Name is empty, because the visible text inside the component is not used as its name.
FAQ
How does this issue relate to 1.3.1 Info and Relationships?
SC 1.3.1 requires relationships and context conveyed visually to also be available in code. When a component's purpose is clear on screen but it exposes no accessible name, that context is missing programmatically, so the criterion is not met.
Why is this issue marked as Serious?
People using screen readers reach the component with no idea of its purpose. In a form group or a page made of several regions, that can stop them from understanding what a section asks for or contains, so the severity is serious. The content inside the component is still available, which keeps the issue below critical. Native labels and grouping elements give the strongest support across browsers and assistive technology.
Can I use aria-label or aria-labelledby instead of fieldset and legend?
Use native grouping when it fits the content: for related form controls that need a group-level description, <fieldset> and <legend> are usually clearest. Use aria-label or aria-labelledby when an element has no native labeling method, or when visible text elsewhere on the page already names it.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 9.1.3.1 Info and Relationships | Same as the WCAG text. |