-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the "Accessibility assessment | Roadmaps" page, the multiple visual labels for the "Views:", "Hierarchy:", and "To" buttons are not programmatically associated.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the mentioned buttons and inspect the code.
- Observe that the buttons have multiple visual labels, that is, the external label and the internal value.
- Observe that all the visual labels are not associated with the buttons.
Screenshot
Actual Results
The "Views:", "Hierarchy:", and "To" buttons are visually labelled by multiple elements. That is, the external label and the internal value. However, these buttons are not associated with all these visual labels.
As a result, the purpose of the buttons may be unclear to users.
Expected Results
Make sure that the buttons are associated with their visual labels. The aria-labelledby attribute can be used when you need to construct the label using multiple elements. Associate the external label and the internal value of the components using the aria-labelledby attribute. If the above is not possible, you can add the visual label information to an aria-label. This has the same effect of adding to the accessible name of the buttons. This solution is less favourable, but it is particularly useful when there is no visible text.
Code Snippet
<span id="exLabel">Views:</span> <button id="intLabel" aria-labelledby="exLabel intLabel">Basic edited</button>
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest
- links to
