Using ARIA role of alert for Error Feedback in Forms

Status

• Surveyed by TF April 23,2012
• Surveyed More ARIA techniques for 02 May 2013

May 30, 2013 decision taken to combine into http://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms

Applicability

As of this writing this technique applies to HTML technologies used with scripting.

This technique relates to:

• Success Criterion (SC) 3.3.1. (Error identification):
• Success Criterion 3.3.3 Error Suggestion

User Agent and Assistive Technology Support Notes

To be provided..

Description

This technique uses the ARIA role attribute with the value of “alert” in order to provide a suggestion to the user for correction on form input errors. Aria roles of "alert" have an implicit aria-live value of "assertive" which informs assistive technologies to monitor an applicable node and convey changes. The specific suggestion conveyed would be contained in the “content” of the associated alert.

NOTE: The ARIA describedby attribute may be provided as a helpful addition to provide a reference to the error if the user desires the error message to be conveyed again, but is not strictly necessary for successful application of this technique, and is incidental to the application of this technique.

Example:

The following example (derived from: http://html.cita.illinois.edu/nav/form/aria/index.php?example=3 ) shows using ARIA role attribute with value of “alert” attached to an HTML DIV element (and aria-describedby as an additional help) for error feedback on an HTML form. The form has a text field of last name (required). If an error is made (no text entered for last name), role alert is activated. Associated JavaScript processes the alert if activated. First the HTML source code is presented, and then the associated Javascript:

HTML Source:

<div> 
    <h2>Sample Form</h2> 
    <p>All fields are required.</p> 
    <form id="SampleForm" action="#" method="post"> 
             
      <div class="text"> 
         <input type="text" 
                    name="lname" 
                    id="lname" 
                    size="20" 
                    onblur="checkLast(event)"               
                    aria-describedby="lname_error"/> 
          <div class="error" id="lname_error" role="alert"></div> 
      </div> 

            <div class="button"> 
        <input type="button" 
                    value="Check Form" 
                    onclick=" validateForm()"/> 
      </div> 
    </form> 

  </div>

JavaScript Source

  function validateForm() { 
      var errorMessage = "Please complete the following fields:"; 
      var errorElements = new Array(); 
      var node; 
      var result; 
      var node_focus = null;
   // Check last name 
      node = document.getElementById("lname"); 
      if( node && node.value == "" ) { 
       
          result = "\nYou must enter your last name"; 
          errorElements.push(result); 
          showError(node, result); 

          if( node_focus == null ) 
             node_focus = node;
       }
     }
function checkLast(event) { 
     var node = getTarget(event); 
     var result; 
     
     if( node && node.value == "" ) { 
       result =  "You must enter your last name"; 
      } else { 
       result = ""; 
      } // endif 

    showError(node, result); 
     
    return stopPropagation( event); 

}

Resources

1. http://html.cita.illinois.edu/nav/form/aria/
2. http://www.msfw.com/accessibility/
3. http://www.w3.org/TR/2008/REC-WCAG20-20081211/#minimize-error
4. http://www.w3.org/TR/2011/CR-wai-aria-20110118/states_and_properties#aria-describedby
5. http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#alert
6. http://www.w3.org/TR/2011/WD-html5-20110525/

Related Techniques

1. http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G83
2. http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G85
3. http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G84

(note: not sure of these?)

Tests

Procedure

1. Check that there is an ARIA role attribute with value of “alert”
2. Check that the script associated with the HTML form includes a correct error message as the “contents” of the above-referenced “alert” value

Expected Results

Both #1 and #2 are true