Issue description:
-
The "Errors associated" provision says that errors need to be visually and programmatically associated with the element that caused the error. But if you need to scroll to see the connection, or read the text above the submit button, many people will not understand why the form submit “is not working.” They will not see the error message. We suggest that the association does not require the user to scroll or look at text above the submit button. To ensure that people understand or see the problem, we need a combination of factors, including not just relying on an icon under a scroll bar. We also do not think this concern is adequately addressed in the next provision about co-location / collocation.
-
The second draft example is problematic: “When the user input does not meet the requested format.” Please remove or update this example, as it is not inclusive practice and breaks an assertion below. It is not a good example as the interface should accept the different formats because some people cannot convert the format (and developers can use an easy script that makes it inclusive).
Pass example
- Next to the Submit button is an error icon in red with text “Errors found with the phone number”
- Also the phone field is in red, with the error icon and the message: Your phone number is missing a digit. Please check your number and resubmit.
Note that this example uses multiple ways to help users realize the error. We feel it is necessary that there is both the collection with the error and where the user is right now (the submit button) as well as color/ font/ and icons.
Fail example
No icons or color changes. Just one error message and the user might have to read a lot of the form above to see the error message
Related user needs from Making Content Usable for People with Cognitive and Learning Disabilities (MCU)
- I need to reach important information and the controls I need without scrolling or carrying out other actions. They are not hidden or off screen. (MCU 3.2.1, bullet 2)
- I need icons and color to draw my attention to very important content such as warning or error messages.
- I need inputs to accept different formats and not mark them as mistakes. (MCU, 3.4.1, bullet 6)
- I need clear labels, step-by-step instructions, and clear error messages, so I know exactly what to do. (MCU 3.4.1, bullet 9)
Thanks,
The COGA Task Force
Issue description:
The "Errors associated" provision says that errors need to be visually and programmatically associated with the element that caused the error. But if you need to scroll to see the connection, or read the text above the submit button, many people will not understand why the form submit “is not working.” They will not see the error message. We suggest that the association does not require the user to scroll or look at text above the submit button. To ensure that people understand or see the problem, we need a combination of factors, including not just relying on an icon under a scroll bar. We also do not think this concern is adequately addressed in the next provision about co-location / collocation.
The second draft example is problematic: “When the user input does not meet the requested format.” Please remove or update this example, as it is not inclusive practice and breaks an assertion below. It is not a good example as the interface should accept the different formats because some people cannot convert the format (and developers can use an easy script that makes it inclusive).
Pass example
Note that this example uses multiple ways to help users realize the error. We feel it is necessary that there is both the collection with the error and where the user is right now (the submit button) as well as color/ font/ and icons.
Fail example
No icons or color changes. Just one error message and the user might have to read a lot of the form above to see the error message
Related user needs from Making Content Usable for People with Cognitive and Learning Disabilities (MCU)
Thanks,
The COGA Task Force