Using aria-describedby and alert for Error Feedback in Forms (early draft as of February 14 2012 – comments welcome)

Status

Surveyed by TF March 8, 2012 ?

Applicability

As of this writing this technique applies to HTML5 technologies. WAI ARIA will eventually be extended to other technologies.

This technique relates to:

Success Criterion 3.3.3 Error Suggestion

Description

The purpose of this technique is to ensure that users receive appropriate suggestions for correction of an input error using ARIA and HTML5. A description of the error is provided based on ARIA-specific, programmatically determined information. Persons with cognitive limitations may find it difficult to understand how to correct the errors. People with visual disabilities may not be able to figure out exactly how to correct the error. In the case of an unsuccessful form submission, users may abandon the form because they may be unsure of how to correct the error even though they are aware that it has occurred. Providing information about how to correct input errors allows users who have learning disabilities to fill in a form successfully. Users who are blind or have impaired vision understand more easily the nature of the input error and how to correct it. People with motion impairment can reduce the number of times they need to change an input value.

This technique uses aria-describedly and alert for error feedback in forms. ARIA roles of aria-required, aria-invalid, and aria-describedby help assistive technology (AT) users receive timely and proper feedback when errors occur in filling out forms, so those errors can be corrected. For example, if invalid entries are created in form fields, and validation occurs, then the entries are rejected and the users are notified immediately. These attributes are relatively easy to implement and could be typically added to a webpage in a few minutes. They represent a good cost/benefit ratio because of their ease of implementation and fundamental help to AT users.

The following aria roles and attributes are involved:

aria-required attribute indicate if the form control is required.
aria-invalid attribute indicate if the form value is valid.
role attribute with the value alert is used to tell assistive technologies to monitor this node and speak changes.
aria-describedby attribute is used to provide a reference to the error if the user wants the message repeated

Examples

Example 1:

The following example shows using aria-describedby and alert for error feedback [1] on an HTML5 form. The form has text fields of first name (required), last name (required), birth date, SSN, and phone (required). If an error is made, role alert is activated.

<div> 
    <h2>Sample Form</h2> 
    <p>Fields marked with an <img src="images/required.png" class="required" alt="Required" /> are required.</p> 
    <form id="SampleForm" action="#" method="post"> 
      <div class="text"> 
        <label for="fname"> 
          First Name 
          <img src="images/required.png" alt=""/> 
        </label> 
         
        <input type="text" 
                    name="fname" 
                    id="fname" 
                    size="12" 
                    onblur="checkFirst(event)" 
                    aria-required="true" 
                    aria-invalid="false" 
                    aria-describedby="fname_error"/> 
          <div class="error" id="fname_error" role="alert"></div> 
      </div> 
       
      <div class="text"> 
        <label for="lname"> 
          Last Name 
          <img src="images/required.png" alt="" /> 
        </label> 
        <input type="text" 
                    name="lname" 
                    id="lname" 
                    size="20" 
                    onblur="checkLast(event)"               
                    aria-required="true" 
                    aria-invalid="false" 
                    aria-describedby="lname_error"/> 
          <div class="error" id="lname_error" role="alert"></div> 
      </div> 

      <div class="text"> 
        <label for="date">Birth Date</label> 
        <input type="text" 
                    name="date" 
                    id="date" 
                    size="12" 
                    onblur="checkDate(event)" 
                    aria-required="false" 
                    aria-invalid="false" 
                    aria-describedby="date_error"/> 
        <div class="error" id="date_error" role="alert"></div> 
      </div> 
       
      <div class="text"> 
        <label for="ssn"><abbr title="Social Security Number">SSN</abbr></label> 
        <input type="text" 
                    name="ssn" 
                    id="ssn" 
                     size="10" 
                     onblur="checkSSN(event)" 
                    aria-required="false" 
                    aria-invalid="false" 
                    aria-describedby="ssn_error"/> 
        <div class="error" id="ssn_error" role="alert"></div> 
      </div> 

      <div class="text"> 
        <label for="phone"> 
            Phone   
            <img src="images/required.png" alt="Required" /> 
         </label> 
        <input type="text" 
                    name="phone" 
                    id="phone" 
                    size="14" 
                    onblur="checkPhone(event)" 
                    aria-required="true" 
                    aria-invalid="false" 
                    aria-describedby="phone_error"/> 
        <div class="error" id="phone_error" role="alert"></div> 
         
      </div> 
      <div class="button"> 
        <input type="button" 
                    value="Check Form" 
                    onclick=" validateForm()"/> 
      </div> 
    </form> 

  </div>

Example 2:

A user attempts to submit a form using HTML5 but has neglected to provide input or select a choice in one or more mandatory fields. Using the above-mentioned ARIA roles/properties, the omission is detected and an alert notification informs the user that mandatory fields have not been completed.

Example 3:

A user attempts to submit a form using HTML5 but has neglected to provide input or select a choice in one or more mandatory fields. Using the above-mentioned ARIA roles/properties, the omission is detected and the form is re-displayed with an alert (containing text description?) at the top informing which mandatory fields were omitted. Each omitted mandatory field is also identified so that the user does not have to return to the list at the top of the form to find the omitted fields.

Example 4:

The user inputs invalid data on a form field using HTML5 and ARIA roles/properties mentioned above. When the user exits the field, an alert notification appears that describes the nature of the error so the user can fix it.

Resources

Related Techniques

(note: not sure of these?)

References

From iCITA

Tests

Procedure

Open a form in HTML5 with ARIA describedby and alert supported
Enter an invalid entry (for example, numerics where characters are expected) in a text field on the form (and attempt to exit the field?)
An error alert is generated

Expected Results

2 and #3 are both true