-
Bug
-
Resolution: Fixed
-
High
-
5.12.14, 10.5.0
-
Severity 3 - Minor
-
3
-
-
Accessibility
🚨 This ticket was initially created for Proforma but, we found that the same could be improved in servicedesk.
Proforma ticket here: https://jira.atlassian.com/browse/FORMDC-845
Issue Summary
Some labels are not properly associated with their corresponding form fields.
Steps to Reproduce
- Open the Help Center page of the JSM DC instance.
- Navigate to the "Portals" section in the main content area and activate the "A11y Test" control.
- Navigate to the main content area and activate the "Apple Investigation" > "VO Test" control.
- Navigate to the mentioned form fields and inspect the code.
- Observe that the "id" attribute is missing from the form fields.
Screenshot
Actual Results
When screen reader users navigate through the "VO Test" proforma form, the labels for the "Description", "iOS Version", and "Model Year" form fields are not announced by the screen reader.
This issue occurs because the labels are not properly associated with these form fields.
Although the "for" attribute is provided in the <label> element, the "id" attribute is missing in the corresponding <input> elements of these form fields.
As a result, screen reader users may not understand the purpose of these form fields.
Expected Results
The screen reader should correctly announce the labels for the form fields.
To ensure screen readers announce the labels correctly, the following changes should be applied to the form fields that have a <label> element with the for attribute but are missing the id attribute on the corresponding <input> element.
Add the id Attribute to the <input> Elements:
- Identify each form field where the label has a for attribute but the corresponding <input> element is missing the id attribute.
- Add the id attribute to each <input> element to match the label.
Ensure Proper Association Between Labels and Form Fields:
- Verify that the value of the id attribute in the <input> element exactly matches the value of the for attribute in the <label> element.
- This establishes the correct relationship between the label and the form field, enabling proper screen reader behavior.
Code Snippet:
<label for="a1">Description</label>
<textarea id="a1">
....
</textarea>
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 Sonoma 14.7
Operations - Windows11
Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest
- was cloned as
-
-
- Waiting for Release
-
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|