-
Bug
-
Resolution: Fixed
-
High
-
4.2.2, 5.0.2
-
Severity 3 - Minor
-
Issue Summary
The group of form controls is not associated with its group label. The group-level label helps to completely convey the purpose of individual controls in the group.
Element Name: "External user importer" group label.
Location of the element: Located inside the main content.
The problem it causes: Screen reader users are unable to determine the relationship between the form fields and their group label.
Steps to Reproduce
- Open the home page.
- Navigate to the "User" link and activate it.
- Navigate to the "Import user" link and activate it.
- Navigate to the mentioned form controls and observe the screen reader does not announce the group label.
Actual Results
The group label "External user importer" is not provided using <legend> element inside the <fieldset> for grouping of "Atlassian importer", "Directory importer", and so on radio buttons.
Expected Results
Fix Information
Group labels MUST be programmatically associated with the group if the individual labels for each element in the group are insufficient on their own.
HOW TO FIX:
Fix this issue by doing ALL of the following:
1. Enclose the group label in an <legend> element.
2. Enclose the <legend> element and all of the related form fields in a <fieldset> element.
Code snippet:
<fieldset class="group"> <legend>"External user importer"</legend> <div class="radio"> <input type="radio" checked="checked" name="importType" id="importType_0" value="ATLASSIAN" class="radio"> <label for="importType_0">Atlassian importer</label> (...) </div> <div class="radio"> <input type="radio" name="importType" id="importType_1" value="DIRECTORY" class="radio"> <label for="importType_1">Directory importer</label> (...) </div> (...) </fieldset>
REFERENCE:
Deque University: https://dequeuniversity.com/class/forms2/group-labels/semantic
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/forms/
BACKGROUND:
People who are blind cannot use the visual layout of a group of related form elements and their shared group label - such as a question with a set of radio button answers - to determine the relationship between the form fields and the group label. In order to understand the relationship of the form fields, their individual labels, and their group label, the relationships must be expressed semantically. When grouped form elements and their group label are expressed semantically, a screen reader user can put focus on a form element and the screen reader will read the form element label and element type as well as the group label.
Grouping controls are most important for related radio buttons and checkboxes.
Screenshot
Workaround
Not Available
Bug Ref: 360122
[CWD-5846] Import Users : Group of form controls not associated with group label.
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Waiting for Release [ 12075 ] | New: Closed [ 6 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 783657 ] |
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-crowd ax-high-priority ax-platform-dc ax-qa ax-qa-verified ax-vpat-critical | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-crowd ax-platform-dc ax-qa ax-qa-verified ax-vpat-critical |
| Fix Version/s | New: 5.2.0 [ 104001 ] |
| Status | Original: In Review [ 10051 ] | New: Waiting for Release [ 12075 ] |
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-crowd ax-dev-ready ax-high-priority ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-crowd ax-high-priority ax-platform-dc ax-qa ax-qa-verified ax-vpat-critical |
| Attachment | New: Screenshot 2023-06-09 at 12.24.03 PM.png [ 439493 ] |
| Status | Original: In Progress [ 3 ] | New: In Review [ 10051 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 770493 ] |
| Story Points | New: 3 |