Details
-
Bug
-
Resolution: Unresolved
-
Low
-
1
-
Minor
-
Description
Issue Summary
There are multiple accessibility issues in JSM forms:
Expected Results
Forms should be designed for accessibility
Actual Results
| Issue Description |
| For all custom form elements that function as dropdowns (e.g. custom select elements), the <label> element is not properly associated with the <input> element. Consequently, these form elements are not programmatically labeled for screen reader technology. Inspection of source code reveals that the "for" attribute value of the <label> element did not match the id value of the <input> element. Because these custom elements do not have an accessible name, a screen reader user does not know the question or label that corresponds to the dropdown. |
| For all radio button groups, questions are not programmatically associated with radio buttons. Consequently, screen reader technology does not speak the underlying question when entering a radio button group. For example, a screen reader user hears, "Yes" and "No" but does not hear the question. Inspection of code reveals that <fieldset? and <legend> were not used to associate the underlying question with radio buttons. |
| The text area fields are not programmatically associated with the underlying question. Consequently, the screen reader does not speak the underlying question when encountering text areas. The text area is labeled using aria-label which is being used to provide instructions (e.g. "start entering text here"). The for attribute cannot be used to associate a <label> element with a <div>. Moreover, aria will always override html labels. Aria-labelledby is the better labeling technique here; the label text and any instructions can be associated with the text area field by concatenating their id values. |
| The borders of text fields and custom dropdowns do not pass minimum contrast specifications of 3:1 against the background. Consequently, users with low vision have trouble perceiving these form elements. |
| There is no alt attribute on the profile image that accompanies a person's name. This image should be coded as decorative using alt="". |
| In the upload file component, color alone is used to distinguish the "browse" link from paragraph text. |
Steps to Reproduce
- Create a new Form in JSM and add it to a request type.
- Try to open a new request with the form
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Attachments
Issue Links
- Wiki Page
-
Wiki Page Loading...