-
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
[JSWSERVER-25706] Accessibility assessment | Roadmaps : Form fields with no accessible name
| Labels | Original: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 | New: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A ril wcag21 |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 963881 ] |
| Priority | Original: High [ 2 ] | New: Medium [ 3 ] |
| Introduced in Version | Original: 9.12 | New: 8.2 |
| Affects Version/s | New: 8.20.30 [ 106364 ] | |
| Affects Version/s | New: 9.4.17 [ 106909 ] |
| Labels | Original: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 | New: 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 |
| Component/s | Original: Accessibility [ 62491 ] | |
| Component/s | Original: (Advanced Roadmaps) Other [ 73719 ] | |
| Component/s | New: (Advanced Roadmaps) Accessibility [ 74392 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |
| Description |
Original:
h3. 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. h3. 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. h3. Screenshot h3. 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. h3. 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> {code:java} {code} h3. 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 |
New:
h3. 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. h3. 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. h3. Screenshot !image-2024-02-12-10-21-49-755.png|thumbnail! h3. 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. h3. 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* {code:java} <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> {code} h3. 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 |
| Attachment | New: image-2024-02-12-10-21-49-755.png [ 451951 ] |
| Component/s | New: (Advanced Roadmaps) Other [ 73719 ] |