Details
-
Type:
Sub-task
-
Status: OPEN
-
Priority:
Major
-
Resolution: Unresolved
-
Affects Version/s: 20.0, 21.0 [Tentative]
-
Fix Version/s: None
-
Component/s: Accessibility
-
Labels:
-
Environment:Windows, Chrome
-
Test Plan:
Description
Issue: In the synoptic Calendar widget, the controls of the Options form under the heading Priority Events are not properly grouped together using <fieldset> elements. Consequently, when a screen reader user tries to interact with the form, the combination of the accessible name and accessible description and other programmatic associations (i.e., headings that should identify the form controls associated with them) do not describe the input field including all relevant instructions and cues.
Additionally, the Move up and Move down button behavior is confusing because you can click them when they either should not be available (and consequently they have no effect) and it's not clear where you are moving the items to.
Other details of the bad behavior: Under the Colors section, the text boxes for choosing colors have form labels of High Priority, Medium Priority, and Low Priority. When a screen reader user navigates this page, they must use the tab key to jump from form field to form field. Because the section label "Colors" is outside a form control, this visual text label will be skipped causing the Text box form labels to be confusing. Screen reader users do not know they are supposed to type in a HEX code into the text box, because label is missing relevant cues. Also, the section above contains other form fields with same form labels (High, Medium and Low Priority).
Proposed fixes:
- Make the form elements nested under the appropriate heading and be properly associated to the corresponding heading text for assistive technology users (information for devs about how to fix this issue). An aria-label is also needed to tell screen reader users that the thing you need to enter in the color field is a hex code. W3C explanation: using aria-label.
- Make the behavior of Move up and Move down consistent and make sense to users.
Desired behavior: When assistive technology user navigates into the form field for High Priority, it should read "Color, High Priority, Enter hex code." Other elements of the same group, e.g., Medium Priority, should behave similarly, i.e., "Color, Medium Priority, Enter hex code." It should be clear what can be moved up or down and where the item will go.
Gliffy Diagrams
Zeplin
Attachments
Issue Links
- is depended on by
-
SAK-43809 Accessibility: Keyboard-only and Screen reader users cannot use the Calendar Widget Color Picker
-
- Awaiting Review
-