How do I prevent user errors on my website?
Question
Answer
Error prevention is an important piece of user experience, including for people with disabilities. When users need to submit information or complete a task, several strategies are effective at preventing errors and should be used together.
Label components clearly. Each form field or interactive element needs both a visible label and a matching accessible name that describes its purpose.
Communicate which components are required, read-only, or disabled. This information needs to be conveyed both visually (such as an asterisk on a required form field label) and to the accessibility tree (such as the required attribute).
Provide additional instructions where needed, and programmatically relate them to the element they describe. Helpful information includes required formats, required character counts, or additional information about what a component will do. For example, a delete button may have the additional information “This action cannot be undone.”
If an error is automatically detected, identify what is causing the error, describe the error in text, and provide a suggestion on how to correct the error (if known). If these details refer to a specific element, programmatically relate the text with the element it describes. When this information is available, users can more efficiently find and fix problems.
When users are submitting information, include a mechanism to check for errors, a confirmation step where the user reviews their submission before finalizing, or a method to undo the submission. Under the Web Content Accessibility Guidelines, this is a WCAG 2.1 AA requirement for forms that "cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses." It is both helpful for everyone and a WCAG 2.1 AAA requirement for any type of information submission to include one of these error prevention mechanisms.
Conduct accessibility testing with real users. User feedback provides valuable insights on why errors may be occurring, such as inadequate instructions or a confusing design.
For a deeper dive into technical methods to implement these strategies, explore the Forms: Labels, Cues, and Errors course from Accessible Web Academy.
