Using ARIA role of alert for Error Feedback in Forms
Contents
Status
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
- 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