Web Accessibility Criteria - User Errors

• Introduction
• Best Practices
• Examples
• How to Test for Input Errors
• WCAG 2.1 and References 

 Introduction

While the proper use of labels and instructions will vastly reduce the likelihood of an error when a user fills out a form it will not prevent all input errors from occurring and when these errors do occur it is important to have proper methods to handle the errors. According to the WCAG and input error is information provided by the user that is not accepted which includes:

• Information that is required on the form, but has been omitted by the user
• Information that is provided by the user, but is not in the required data format or allowed values.

Error handling when it comes to user input on forms can be split into to required methods which are error identification and error suggestion.

Error Identification

Error identification is necessary to ensure that the user is aware of the errors that have occurred in their submission. The error messages should be as specific as possible containing the location of the error, and the reason for the error so the user is able to easily identify what needs to be corrected.

Error Suggestion

Error suggestion requires that the user receives proper suggestions for the correction of an input error. Using error identification in conjunction with error suggestion can ensure that the user has clear guidelines on how to properly fix the input error. A suggestion will clear up any confusion the user has from the error and provide them with the necessary information to properly fix their error.

 Best Practice

Error Identification

There are two approaches that can be taken when identifying an input error. The first is to re-display the entire form with all previously entered data with a text description at the location of the field where the error occurred, or a text description which identifies the location of the error. The second approach is to provide an alert dialog box which identifies the input errors and their respective locations.

It is recommended to always include a message or alert since some users may not be aware that an error has occurred or could assume that the form is not functioning correctly. It is also recommended to include the error notification in the page title element so that screen reader users are properly notified that an input error is present.

Error Suggestion

When an error is identifies, additional information should be provided to the user to assist them in correcting the input errors. The suggestions should either provide examples of the correct data format for the field, describe the correct data entry for the field, or show values of the correct format that are similar to the user’s input with instructions as to how to enter one of the correct values.

 Examples

Example 1: Error Identification

A user attempts to submit a form but has neglected to provide input or select a choice in one or more mandatory fields. Using client-side validation, the omission is detected and an alert dialog appears informing the user that mandatory fields have not been completed. The labels of the fields with this problem are changed to identify the problem field, and links to the problem fields are inserted in the document after the submit button so the user can move to them after dismissing the alert.

Example 2: Error Suggestion

The user inputs invalid data on a form field. When the user exits the field, an alert dialog appears that describes the nature of the error so the user can fix it.

Back To Top 

 How to Test

Your page should alert the user when they have entered a value that does not make sense in the entry box. For example if the user enters an incorrect input type they should not be able to proceed in the page. To test this you simply have to:

1. Purposely input an incorrect value type.a.Ex. Enter digits for name fields.
2. Check to see that the page makes it clear that there is an error.
1. Check if the page shows which field has the error.
2. Check if the page displays an error message to guide users.

If the page works even though the user has entered an incorrect value type, review and apply the best practices for user errors.

 Back To Top 

 WCAG 2.1  and References