View source for Using ARIA role of alert for Error Feedback in Forms

[[Category: Techniques]]
[[Category: ARIA Techniques]]
[[Category: Techniques In Development]]

== Status ==
* [https://www.w3.org/2002/09/wbs/35422/ARIA_role_alert_error_feedback/results#xsection Surveyed by TF April 23,2012]
* [https://www.w3.org/2002/09/wbs/35422/20130502tfaria2/results#xrange 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:===
<pre>
<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>
</pre>

===  JavaScript Source===
<pre>
  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); 

}
</pre>

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

==Related Techniques==
# http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G83
# http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G85
# http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G84

(note: not sure of these?)

==Tests==
===Procedure===

#	Check that there is an ARIA role attribute with value of “alert”
#	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