Devographics / Devographics/Monorepo
Every tablist on the page has the same accName
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
## Describe the bug
When navigating the tabs on the page, each tablist has the same accessible name. When announced by a screen reader a user may not immediately understand on which tablist they have landed.
## Steps to reproduce the bug
1. Fire up your preferred screen reader.
2. Navigate to the [Resources](https://2023.stateofcss.com/en-US/resources/) page.
2. Choose any tablist.
3. Observe it is announced as "tabs example" (or "tabs example tab control" or similar depending on your screen reader).
## Expected Behavior
* A tablist's accName would correspond to the preceding heading.
## Actual Behavior
* Every tablist's accName is "tabs example".
## Related code
Each tablist is made up of this elided HTML:
```HTML
```
You can confirm there are 12 on this page by searching (`Ctrl` + `F` in browser dev tools) [with this XPath](https://adrianroselli.com/2021/04/xpath-for-in-browser-testing.html):
```XPath
//div[@role="tablist"][@aria-label="tabs example"]
```
## Additional Context
The code as shown is problematic under the following WCAG 2.1 Success Criterion:
* [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html) (because the control name is not descriptive)
Consider using `aria-labelledby` to reference the preceding heading.
I suggest this over `aria-label` because [`aria-label` does not auto-translate](https://adrianroselli.com/2019/11/aria-label-does-not-translate.html) consistently.
You will also need to add `id` values to the headings (or the ``s in the headings owing to the hidden link) for this to work.
The resultant code might look like this:
```HTML
[…]
People
[…]
```
This would announce as "People tab control" in NVDA ("tab control" comes for free from using `role="tablist"`).
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.