People with visual, cognitive and physical impairments are particularly prone to making errors when entering data through forms. When errors resulting from form input happen, it’s important to make sure that error messages are shown accessibly.
- Provide error messages that give assistance: Describe the related problem in straightforward terms and, where possible, give advice on how to resolve them.
- Make it easy to locate the problem: Programmatically associate each error message with its corresponding form control using the aria-describedby attribute. If there’s a list of errors, move focus to the container of the list once it is generated so that screen reader users can find it.
For each input control where an error could be made, enter incorrect data and check:
- Is an error message displayed?
- Does it clearly explain the error and how to resolve it?
- When a screen reader is running, is it possible to find the location of the error message and the associated form control?