Open aardrian opened 12 months ago
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.
Each tablist is made up of this elided HTML:
<div role="tablist" aria-orientation="vertical" aria-label="tabs example" […] tabindex="0" […]>
You can confirm there are 12 on this page by searching (Ctrl + F in browser dev tools) with this XPath:
Ctrl
F
//div[@role="tablist"][@aria-label="tabs example"]
The code as shown is problematic under the following WCAG 2.1 Success Criterion:
Consider using aria-labelledby to reference the preceding heading.
aria-labelledby
I suggest this over aria-label because aria-label does not auto-translate consistently.
aria-label
You will also need to add id values to the headings (or the <span>s in the headings owing to the hidden link) for this to work.
id
<span>
The resultant code might look like this:
<h3 class="[…] BlockTitleText"> […] <span […] id="H3_people"> People </span> </h3> […] <div role="tablist" aria-labelledby="H3_people" […]>
This would announce as "People tab control" in NVDA ("tab control" comes for free from using role="tablist").
role="tablist"
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
Expected Behavior
Actual Behavior
Related code
Each tablist is made up of this elided HTML:
You can confirm there are 12 on this page by searching (
Ctrl
+F
in browser dev tools) with this XPath:Additional Context
The code as shown is problematic under the following WCAG 2.1 Success Criterion:
Consider using
aria-labelledby
to reference the preceding heading.I suggest this over
aria-label
becausearia-label
does not auto-translate consistently.You will also need to add
id
values to the headings (or the<span>
s in the headings owing to the hidden link) for this to work.The resultant code might look like this:
This would announce as "People tab control" in NVDA ("tab control" comes for free from using
role="tablist"
).