Guideline 3.3: Errare humanum est

Help users avoid and correct mistakes.

As we are going to make mistakes, web pages must prevent them and help us to recover from those errors.

3.3.1 Error Identification Level A

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Compulsory

If a form contains fields for which information from the user is mandatory.
  • Provide text descriptions to identify required fields that were not completed
  • Provide client-side validation and alert
If information provided by the user is required to be in a specific data format or of certain values.
  • Provide a text description when the user provides information that is not in the list of allowed values
  • Provide a text description when user input falls outside the required format or values
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM

Recommended

  • Create a mechanism that allows users to jump to errors
  • Validate form submissions on the server
  • Re-display a form with a summary of errors
  • Provide error notification as the user enters information
  • Assist the user in making corrections by providing links to each error
  • Highlight or visually emphasize errors where they occur
  • Complement text with non-text content when reporting errors
  • Provide success feedback when data is submitted successfully

3.3.2 Labels or instructions Level A

Labels or instructions are provided when content requires user input.

Compulsory

  • Provide descriptive labels and one of this techniques:
    • Provide expected data format and example
    • Provide text instructions at the beginning of a form or set of fields that describes the necessary input
    • Place labels to maximize predictability of relationships
    • Provide text descriptions to identify required fields that were not completed
  • Use label elements to associate text labels with form controls
  • Provide a description for groups of form controls using fieldset and legend elements
  • Use the title attribute to identify form controls when the label element cannot be used
  • Use an adjacent button to label the purpose of a field

Recommended

  • Describe what will happen before a change to a form control that causes a change of context to occur is made
  • Use Accessible Rich Internet Application describedby property to provide a descriptive, programmatically determined label
  • Use Accessible Rich Internet Applications to programmatically identify form fields as required
  • Provide linear form design and grouping similar items

Failures

  • Visually formatting a set of phone number fields but not including a text label

3.3.3 Error Suggestion Level AA

If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

Compulsory

If a mandatory field contains no information
  • Provide text descriptions to identify required fields that were not completed
If information for a field is required to be in a specific data format
  • Provide a text description when user input falls outside the required format or values
  • Provide suggested correction text
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM
Information provided by the user is required to be one of a limited set of values
  • Provide a text description when the user provides information that is not in the list of allowed values
  • Provide suggested correction text
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM

Recommended

Information to prevent errors
  • Identify required fields with the “required” property
  • Identify valid range information with the “valuemin” and “valuemax” properties
  • Provide “correct examples” for data and data formats as initial text in mandatory form fields
Validate the form
  • Accept input data in a variety of formats
  • Validate form submissions on the server
  • Provide client-side validation and alert
  • Provide client-side validation and adding error text via the DOM
  • Call a function from the submit action of a form to perform client side validation
  • Provide success feedback when data is submitted successfully
Report the errors
  • Provide a text description that contains information about the number of input errors, suggestions for corrections to each item, and instructions on how to proceed
  • Provide a text description that contains suggestions for correction as the first item (or one of the first items) of content, or emphasizing this information in the content
  • Create a mechanism that allows users to jump to errors
  • Display errors and suggestions in the context of the original form (for example, re-displaying a form where input errors and suggestions for correction are highlighted and displayed in the context of the original form)
  • Provide links to suggested corrections close to the form fields, or provide the suggested correction text itself directly on the web page next to the form fields
  • Make error messages easy to understand and distinguishable from other text in the Web page
  • When mandatory information has not been provided, including descriptions or examples of correct information in addition to identifying the field as mandatory
  • Repeat and emphasize suggestions for correcting each input error in the context of its form field
  • Provide a way for the user to skip from each item in a list of suggestions to its corresponding form field
  • Provide additional contextual help for the form field requiring change

3.3.4 Error Prevention (Legal, financial, or other important data) Level AA

For Web pages 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, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Compulsory

If an application causes a legal transaction to occur, such as making a purchase or submitting an income tax return
  • Provide a stated period of time after submission of the form when the order can be updated or canceled by the user
  • Provide the ability for the user to review and correct answers before submitting
  • Provide a checkbox in addition to a submit button
If an action causes information to be deleted:
  • Provide the ability to recover deleted information
  • Request confirmation to continue with selected action
  • Provide a checkbox in addition to a submit button
If the Web page includes a testing application
  • Provide the ability for the user to review and correct answers before submitting
  • Request confirmation to continue with selected action

Recommended

  • Tell the user what irreversible action is about to happen
  • Provide client-side validation and alert
  • Place focus in the field containing the error
  • Avoid use of the same words or letter combinations to begin each item of a drop-down list
  • Provide success feedback when data is submitted successfully

3.3.5 Help Level AAA

Context-sensitive help is available.

Compulsory

If a form requires text input
  • Provide a help link on every Web page
  • Provide help by an assistant in the Web page
  • Provide spell checking and suggestions for text input
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input
If a form requires text input in an expected data format
  • Provide expected data format and example
  • Provide text instructions at the beginning of a form or set of fields that describes the necessary input

Recommended

  • Use the title attribute to provide context-sensitive help
  • Checking byte of character and auto-converting to expected byte for text input if applicable

3.3.6 Error Prevention (all types of data) Level AAA

For Web pages that require the user to submit information, at least one of the following is true:

  • Reversible: Submissions are reversible.
  • Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
  • Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

Compulsory

  • Follow the mandatory techniques for Success Criterion 3.3.4 for all forms that require the user to submit information

More info