-
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 "Roll-up" checkbox group is not associated with its visual group label.
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate onto the "View settings" button and activate it.
- Navigate onto the mentioned instances and inspect their code.
- Observe that the checkboxes are not associated with their visual group label.
Screenshot
Actual Results
The "Dates", and "Others" checkboxes are not programmatically associated with their visual group label.
As a result, the purpose of these checkboxes may be unclear for the users of a screen reader.
Expected Results
Make sure that form fields are associated with their visual labels. This can be done with <fieldset> and <legend> elements. If this is not possible, you can use aria-labelledby. This can be used with custom checkboxes created with ARIA.
Code Snippet 1
(with <fieldset and <legend> elements <fieldset> <legend>Roll-up</legend> <input type="checkbox" name="example" id="example01" checked> <label for="example01">Dates</label> <input type="checkbox" name="example" id="example02"> <label for="example02">Others</label> (... ) </fieldset>
Code Snippet 2
(with aria-labelledby attribute) <div id="groupLabel">Roll-up</div> <div role="group" aria-labelledby="groupLabel"> <!-- Custom checkboxes --> </div>
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
