date-time-picker: Errors indicated using colour alone

WCAG Level

Level A

Priority

High

Pages/screens/components affected

Date 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 instances of invalid date picker fields in the documentation page which only rely on colour to indicate if a field is invalid. These may not necessarily be issues of the component itself, but just of the documentation/examples provided.

For the Min & Max Value example, manually entering a date outside of the allowed 60 day time window, or manually entering a time outside of the allowed values (which are not explained in the helper text below the field either) leads to a change in colour of the fields.

The date time picker with an invalid date and time - only the background colour of the controls is changed

For the Custom Validation example, if the user chooses both an invalid date and an invalid time, an error text is shown that only mentions the date, meaning the error for the time field is only indicated using colour.

The date time picker with an invalid date and time - the displayed error message only mentions the date

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.