Web checklist

Checkpoint AA3.3.3: *WCAG 2.0 AA* Error Suggestions

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.


Rationale

This checkpoint ensures that the application offers users suggestions to correct input errors. People with visual impairment or cognitive disabilities can correct input errors easier if the application suggests a correct value or enables users to select a correct value from a list. The ability to select a suggested or correct value from a list requires less movement of the hands and fingers for people with physical disabilities.

Required development and unit test techniques


Use the following list to select a situation that matches your content. To comply with this checkpoint, you must meet at least one technique for each applicable situation:

These techniques are defined in the WCAG 2.0 Level AA Success Criterion 3.3.3 (link resides outside of ibm.com).

  1. Blank fields: Provide text descriptions to identify required fields that were not completed.
  2. Value out of range: Provide a text description when user input falls outside the required format or values.
  3. Suggest correction: Provide suggested correction text.
  4. Error alert: Provide client-side validation and alert.
  5. Error text in DOM: Provide client-side validation and add error text via the DOM.
  6. Text description: Provide a text description when the user provides information that is not in the list of allowed values.

Note: The examples presented in the techniques are not exhaustive. The examples are meant to illustrate the spirit of this checkpoint.

At this time WAI-ARIA examples are only fully supported in Firefox version 3.6 or later and version JAWS 12 or later. If your product needs to be accessible in Internet Explorer and mobile Safari/VoiceOver, one or more of the required HTML/CSS specific techniques must be implemented, as well as a WAI-ARIA technique. When WAI-ARIA becomes an approved W3C recommendation and Internet Explorer and mobile Safari/VoiceOver fully support it, then WAI-ARIA techniques alone will be sufficient to comply with this checkpoint.

Applications that provide WAI-ARIA must add the following statement to the checkpoint comments column of the Web Accessibility Checklist:

Note: This product uses WAI-ARIA to comply with this checkpoint. WAI-ARIA is supported on Windows using Firefox version 3.6 or later and JAWS version 12 or later, and supported on iOS v5.0 and later using Safari and VoiceOver.

General examples

  1. Blank fields: Provide text descriptions to identify required fields that were not completed.

    General example 1

    A user is completing a form and tabs away from a required field without entering a value. A client-side validation script detects that the field is empty and displays a WAI-ARIA alert message to notify the user that the field is required. The validation script also adds an aria-invalid="true" to the <input> element to inform a screen reader user that the input is invalid. The field label is changed so that the user can easily identify the field where information must be entered.

    Checkpoint 3.3b of the Web checklist states that when the required field is initially rendered, an aria-required="true" property is added to it. When a blind user tabs to the field, a screen reader says that the field is required.

    For additional information, refer to the WCAG 2.0 examples for providing text descriptions to identify required fields that were not completed (link resides outside of ibm.com).

    Required unit tests for general development technique 1

    For required form fields, manually perform the following unit tests:

  2. Value out of range: Provide a text description when user input falls outside the required format or values.

    General example 2

    While completing a form, the user enters an invalid value into a field. A client-side validation script detects the invalid input and displays a WAI-ARIA alert message. The message describes the nature of the error and the expected values to enable the user to correct the invalid input. The validation script also adds an aria-invalid="true" to the <input> element to inform a screen reader user that the input is invalid.

    For additional information, refer to the WCAG 2.0 examples for providing a text description when user input falls outside the required format or values (link resides outside of ibm.com).

    Required unit tests for general development technique 2

    For form fields that require input in a specific format or values, manually perform the following unit tests:

  3. Suggest correction: Provide suggested correction text.

    General example 3

    When searching for a term on a Web site, the user misspells the search term. The site detects the misspelling and displays a list of suggested correct spellings. The user selects the correct spelling, which automatically populates the search field.

    For additional information, refer to the WCAG 2.0 examples for providing suggested correction text (link resides outside of ibm.com).

    Required unit tests for general development technique 3

    For form fields in which correct text could be determined from incorrect text, manually perform the following unit tests:

  4. Error alert: Provide client-side validation and alert.

    There is no general example for this technique. See scripting example 1.

  5. Error text in DOM: Provide client-side validation and add error text via the DOM.

    There is no general example for this technique. See scripting example 2.

  6. Text description: Provide a text description when the user provides information that is not in the list of allowed values.

    General example 4

    While completing a form, a user enters a value into a field that is not in a list of expected values. A client-side validation script detects the invalid input and displays a WAI-ARIA alert message. The message describes the nature of the error to enable the user to correct the invalid input. The validation script also adds an aria-invalid="true" to the <input> element to inform a screen reader user that the input is invalid.

    Required unit tests for general development technique 6

    For any form fields where the input value should be in a list of expected values, manually perform the following unit tests:


Scripting examples

  1. Blank fields: Provide text description to identify required fields that were not completed.

    There is no scripting example of this technique. See general example 1.

  2. Value out of range: Provide a text description when user input falls outside the required format or values.

    There is no scripting example of this technique. See general example 2.

  3. Suggest correction: Provide suggested correction text.

    There is no scripting example of this technique. See general example 3.

  4. Error alert: Provide client-side validation and alert.

    Scripting example 1

    While completing a form, a user enters an invalid value into a field. A client-side validation script detects the invalid input and displays a WAI-ARIA alert message. The message describes the nature of the error so the user can correct the invalid input. The validation script also adds an aria-invalid="true" to the <input> element to inform a screen reader user that the input is invalid.

    Note that although general example 2 and this example are identical, technique 2 does not require client-side validation. The validation for technique 2 could occur on the server.

    For additional information, refer to the WCAG 2.0 examples for providing client-side validation and alert (link resides outside of ibm.com).

    Required unit tests for scripting development technique 4

    Locate the form elements and manually perform the following unit tests:

  5. Error text in DOM: Provide client-side validation and add error text via the DOM.

    Scripting example 2

    While completing a form, a user enters an invalid value into a field. A client-side validation script detects the invalid input and displays a message describing the nature of the error so the user can correct the invalid input. The message is rendered as a DOM node and a WAI-ARIA alert role is specified on the message container, enabling assistive technologies to recognize the message when it is rendered. The validation script also adds an aria-invalid="true" to the <input> element to inform a screen reader user that the input is invalid.

    For additional information, refer to the WCAG 2.0 examples for providing client-side validation and adding error text via the DOM (link resides outside of ibm.com).

    Required unit tests for scripting development technique 5

    Locate the form elements and manually perform the following unit tests:

  6. Text Description: Provide a text description when the user provides information that is not in the list of allowed values.

    There is no scripting example for this technique. See general example 4.


Recommended development techniques

Although you are not required to implement the recommended techniques in order to comply with this checkpoint, you should review these techniques because they can improve the accessibility and usability of the application. See WCAG 2.0 Additional Techniques (Advisory) for 3.3.3 (link resides outside of ibm.com) for a list of techniques and examples.


©2012 IBM Corporation

Last updated February 1, 2012.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.