-
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 "Day", and "Period" form fields in the "Show the past" and "Show the next" sections do not have programmatically defined accessible names.
Steps to Reproduce
- Navigate to the above mentioned page.
- Navigate onto the "Filter" button and activate it.
- Navigate onto the "Custom" button and activate it.
- Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
- Observe that the form fields do not have an accessible name.
Screenshot
Actual Results
The "Day" and "Period" form fields do not have programmatically defined accessible names.
As a result, users of assistive technologies will not be able to understand the purpose or the functionality associated with the form fields.
Expected Results
Interactive elements must have programmatically defined accessible names so that their functionality is communicated to assistive technology users. In this scenario, use <label> element to provide an accessible name to the form fields. Make sure that the <label> element is associated with the form fields using "for" and "id" attributes.
When there is no visible text and you cannot add text to the page, use aria-label to manually name elements.
Make sure that the accessible name signposts the purpose or the functionality of the form fields.
Code Snippet
<fieldset> <legend>Show the next</legend> <input type="text" name="example" id="example01" ...> <label for="example01">Day</label> <input type="text" name="example" id="example02"> <label for="example02">Period</label> ... </fieldset>
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
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|