Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
See User Agent Support for WAI-ARIA for general information on user agent support.
The objective of this technique is to indicate in a programmatically determinable way that the completion of a user input field is mandatory. The WAI-ARIA
aria-required
property indicates that user input is required before submission. The aria-required property can have values of "true" or "false". For example, if a user must fill in an address field, then aria-required is set to "true".
Note 1:
The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.
Note 2: At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.
The following example shows an XHTML document using the aria-required property to indicate that a form field must be submitted. The mandatory nature of the field is also indicated in the label as a fallback for user agents that do not support WAI-ARIA.
Example Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
This example uses scripting to add the aria-required property to a form element. The required property is assigned using the setAttribute() API.
The array variable, requiredIds, is created with the ids of the elements which need to be marked as required. The setRequired() function is called from the onload event of the window object.
The setRequired() function loops through all of the ids provided, retrieves the element and assigns the aria-required property of true using the setAttribute() function.
When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader will speak "required" when reading the label for the input fields.
Example Code:
<head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the aria-required property on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
field.setAttribute("aria-required", "true");
}
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</p>
<form action="submit.php">
<p>
<label for="firstName">First Name *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">Last Name *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
Resources are for information purposes only, no endorsement implied.
Access a page with mandatory form fields in a user agent that supports the Accessible Rich Internet Applications specification.
Leaving mandatory form fields empty, attempt to submit the form.
Check that that the user agent notifies of the missing information.
Provide values for the mandatory fields.
Check that the user agent allows form submission to proceed.
#3 and #5 are true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.