time-picker: Errors indicated using colour alone

WCAG Level

Level A

Priority

High

Pages/screens/components affected

Time Picker

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.

We found one instance of an invalid time picker fields in the documentation page which only relies on colour to indicate if the field is invalid. This may not necessarily be an issue of the component itself, but just of the documentation/example provided.

For the Minimum & Maximum Value example, manually entering a time outside of the allowed range only leads to a change in colour of the field.

The time picker with an invalid time entered - only the background colour of the control is changed

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.