login: Errors indicated using colour alone

WCAG Level

Level A

Priority

High

Pages/screens/components affected

Description

When information is presented using colour, for example to indicate that a form field has an error, that same information must be available without colour or people who have difficulty seeing colours may not be aware the error exists.

The username and password fields in the Login component rely on colour to indicate if a field is invalid.

The login form with invalid username and password fields - only the background colour of the fields is changed

Note that in this case, the red dot after the label does not count as an additional non-colour indicator, because by default those dots are already present, but displayed in blue - so this indicator also just changes in colour.

User impact

When colour is the only way errors are presented, people with low vision or colour blindness may not realise there is an error they need to address. This can prevent them from successfully submitting a form or interacting with a control that expects a particular user input.

Required solution

Use text, font styling, icons, patterns, or some other form of visual formatting to indicate that an error is present on a form field. Showing an actual text-based error message (as noted in the separate issue) will also count as satisfying this criterion, as it will provide an additional visual error indication that does not rely on colour perception alone.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the components, their variants, and the documentation website.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the components, their variants, and the documentation website for instances of the same issue:

Check that errors on form fields are indicated using additional text or some other form of visual formatting that is not colour.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

All issues identified within the test sample have been resolved.
The rest of the components, their variants, and the documentation website have been tested for the same issue.
All issues identified throughout the rest of the components/website have been resolved or filed as new issues.