3.3.1 Error Identification
We recommend that you customize a consistent way of showing error messages in the service. It should communicate to the user what is wrong and where, and should be consistent in design and function.
In the example below the user has entered their information, activated the login-button, and the error message “Felaktigt användarnamn eller lösenord” is shown under the login button.
The error message here doesn’t specify which field is wrong, it’s not visually placed with the fields, nor is it connected in the code.
It must always be easy to understand what’s wrong, where the issue is, and how to resolve it. For this the text in the error message is important, but its placement is also critical. And the error message must be connected in the code with its relevant field, for example with aria-describedby.
Formulär app
The following does not fail the WCAG-criterion, but it is a recommendation according to best practice.
In many places, the required-attribute is used to validate and generate error messages, but there are issues with how this attribute functions:
- The error message shown with this attribute disappears after a while, which makes it harder for users with short-term memory issues.
- The message shown isn’t always relevant to the situation, in the screenshot below for instance choosing one of the checkboxes would be enough but the message says that the user must choose a specific one
- The error message is only shown for one object at a time
- Some assistive technologies might not find the error message
As mentioned earlier our recommendation is that you design and implement custom error messages. That way you would not need to rely on the required-attribute, the design will be consistent with other parts of the service and it will work better for the users.
Design and build error messages that:
- Show which element they’re relevant for
- Clearly explains what’s wrong, and when possible how to resolve it
- Remain on the page until the user has resolved them
- Use these instead of the required-attribute