Highlight errors in forms

For: Development

Error identification (3.3.1 level A)

Identify errors using aria-invalid.
Programmatically indicate required fields using the required or aria-required attributes.
Do not indicate required fields using CSS alone.
Make errors easy to discover, identify, and correct.
Make sure that error messages clearly describe what went wrong and how to fix the problem.
Include an error message wherever there is a problem with the input and check that it is visibly obvious that the message is connected to that input.
If you have an error summary at the top of a form, check that each error in the list has a link that moves the focus to the relevant form field. This helps users who rely on keyboard navigation.

Provide visible hints that will enable the users to avoid errors during form submissions, for example a password field may have the following hint text above it, “8 or more characters” which may help avoid an error.
If an input error is detected and if suggestions for correction are known, provide suggestions for fixing the submission, for example if an email address is invalid the following states the error and gives a suggestion “Invalid email address, enter example@yourdomain.com.”