o-forms: valid state of inputs are not available to assistive technologies - ID: DAC_Use_Of_Colour_01

[JakeChampion]

Issue

This is from page 131 of the audit report

Issue can be found on: https://www.ft.com/__origami/service/build/v3/demo?component=o-forms@9.0.1&demo=text-input&system_code=origami-repo-data&brand=master

The ‘Text input with a valid input’ uses colour to display if the user has been successful at entering information correctly. This issue may affect screen reader users, for whom there is no alternative provided to inform them if they have entered the information correctly.

Proposed Solution:

If it is necessary to inform the user that they have entered the information successfully into the text input field, ensure there is an alternative to the use of colour for screen reader users. Further information can be found in Ensuring that information conveyed by color differences is also available in text.

[notlee]

If it is necessary to inform the user that they have entered the information successfully

Questions:

• How is this used in products? Is it necessary or a nicety to convey that a form field is correct (as opposed to wrong)?
• If a nicety, is it acceptable to have no other feedback?
• What about colour blindness? Should we use iconography too?
• How to do this well for screen reader users?

[notlee]

We decided in design system guild to remove the valid state. It is quite confusing:

• Green does not guarantee it is correct, we have server side validation to go yet.
• Is only applied when there has been a previous error, so some valid things don't show as valid.
• Also gives the input low contrast against paper.