How can I use the ARIA "REQUIRED" State to create accessible form fields?
This example uses scripting to add the required state to a form element. In user agents which support namepaces, the required state is assigned using the setAttributeNS() application programming interface (API). For other user agents the required state is assigned using the setAttribute() API and the namespace is simulated by adding a static text string to the front of the required attribute.
In the example below an array variable, requiredIds, is created with the ids of the elements which need to marked as required. The setRequired() function is called from the onload event of window object.
The setRequired() function loops through all of the ids provided, retrieves the element and assigns the required state of true using the setAttrNS() function.
The setAttrNS() function will call the setAttributeNS() API when it is available to set the required attribute. It uses the appropriate namespace URI, "http://www.w3.org/2005/07/aaa", for the Dynamic Web Content Accessibility States and Properties Module. If the setAttributeNS() API is not available in the user agent, a static, simulated namespace of, "aaa:" is added to the required attribute name and it is set using the setAttribute() API.
When this page is accessed using Firefox 2.0 or later or Window-Eyes 5.5 or later, Window-Eyes will speak "required" when reading the label for the input fields
Note:
As of October, 2006, Dynamic Web Content Accessibility is fully supported in Firefox 1.5 or later on Windows and Window-Eyes version 5.5 or later. Support in other user agents and assistive technologies is in progress. Since this is not yet supported in all technologies, it is important to also use other sufficient techniques to mark a field as required. This particular technique relies on updates made to Firefox 2.0 to allow the use of the required attribute by itself without also defining a role for the
Please enter the following data. Required fields have been programmatically identified as required and marked with an asterisk (*) following the field label.
<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 required role 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]);
setAttrNS(field, "required", "true");
}
}
}
// method to set the attribute values based on the capability of the browser.
// Use setAttributeNS if it is availaible,
// otherwise append a namespace indicator string to the attribute and set its value.
function setAttrNS(elemObj, theAttr, theValue){
if (typeof document.documentElement.setAttributeNS != 'undefined') {
elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
}else{
elemObj.setAttribute("aaa:" + theAttr, theValue);
}
}
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>