G85

Status

In-progress

Notes on the WCAG Technique Sections

Applicability: no change
Description: Needs to include a mention of specific HTML5 input types which may negate the need for specific client or server-side validation of input value. This is not a mobile-specific change, of course, but needed nevertheless.
Examples: Add native HTML5 examples
Related: no change
Tests: Being quite generic the test probably needs no change - but check after changing Description and Examples

- Detlev Fischer, 26 Feb 2014

Original

Description

The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted. When users enter data input that is validated, and input errors are detected, information about the nature and location of the input error is provided in text to enable the users to identify the problem. One approach is to use client-side validation and provide an alert dialog box that describes the error immediately when users enter invalid data in field. Another approach, using server-side validation, is to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an error, describes the nature of the problem, and provides ways to easily locate the field(s) with a problem.

However the text description is provided, it should do one of the following things to assist the user:

Provide examples of the correct data entry for the field,
Describe the correct data entry for the field,
Show values of the correct data entry that are similar to the user's data entry, with instructions to the user as to how to enter one of these correct values should the user choose to do so.

Examples

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.
The user inputs invalid data on a form field and submits the form. The server returns the form, with the user's data still present, and indicates clearly in text at the top of the page that there were input errors. The text describes the nature of the error(s) and clearly indicates which field had the problem so the user can easily navigate to it to fix the problem.
The user inputs invalid data on a form field and attempts to submit the form. Client side scripting detects the error, cancels the submit, and modifies the document to provide a text description after the submit button describing the error, with links to the field(s) with the error. The script also modifies the labels of the fields with the problems to highlight them.

Suggested Changes

Description

The objective of this technique is to provide assistance in correcting input errors where the information supplied by the user is not accepted. When users enter data input that is validated, and input errors are detected, information about the nature and location of the input error is provided in text to enable the users to identify the problem. One approach is to use client-side validation and provide an alert dialog box that describes the error immediately when users enter invalid data in field. Another approach, using server-side validation, is to re-display the form (including any previously entered data), and a text description at the top of the page that indicates the fact that there was an error, describes the nature of the problem, and provides ways to easily locate the field(s) with a problem. @@ Inline error messages can also be accessible when programmatically associated to the form field with the error message. @@

@@The method used to provide error indication and suggestion may vary depending on the platform or devices that are intended to be supported. For example, for a device with a smaller screen an inline error may be displayed to indicate that an error has occurred.@@

However the text description is provided, it should do one of the following things to assist the user:

Provide examples of the correct data entry for the field,
Describe the correct data entry for the field,
Show values of the correct data entry that are similar to the user's data entry, with instructions to the user as to how to enter one of these correct values should the user choose to do so.

Examples

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.
The user inputs invalid data on a form field and submits the form. The server returns the form, with the user's data still present, and indicates clearly in text at the top of the page that there were input errors. The text describes the nature of the error(s) and clearly indicates which field had the problem so the user can easily navigate to it to fix the problem.
The user inputs invalid data on a form field and moves on the the next field. Client side scripting or @@native error handling@@ detects the error and modifies the document to provide a text description after the submit button describing the error, with links to the field(s) with the error and also modifies the labels of the fields with the problems to highlight them.

Possible split of last bullet into two:

The user inputs invalid data on a form field and moves on to the next field. Client side scripting or native error handling detects the error and modifies the document to provide a text description describing the error, associates the text description with the field which is in error, places focus back on the field, and also modifies the labels of the fields with the problems to highlight them. Keyboard focus is not trapped in the field.
The user inputs invalid data on one or more form fields and attempts to submit the form. Client side scripting or native error handling detects any errors prior to the form being submitted and modifies the document to provide a text description describing any errors, with links to any fields with errors, and also modifies the labels of the fields with the problems to highlight them.