This document is a draft, and is designed to show changes from a previous version. It is presently showing added text, changed text, deleted text, [start]/[end] markers, and Issue Numbers.
Changes are displayed as follows:
HTML and XHTML with scripting and Accessible Rich Internet Application support.
Editorial Note: This technique will be applicable when Accessible Rich Internet Application specifications reach W3C recommendation status.
This technique relates to:
As of January 2007, the current version of the Accessible Rich Internet Application (ARIA) specification is supported in Firefox 1.5 or later on Windows using Window-Eyes version 5.5 or later and partially supported using JAWS 8.0 or later. Support in other user agents and assistive technologies is in progress. Since ARIA 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 element.
The purpose of this technique is to demonstrate how to use Accessible Rich Internet Applications to programmatically identify form components for which user input or selection are required. Accessible Rich Internet Applications techniques provide the ability to add additional information about elements which can be programmatically determined. The user agent can provide this additional information to assistive technology for presentation to the user.
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 Accessible Rich Internet Applications 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.
<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 available, // 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>
Resources are for information purposes only, no endorsement implied.
(none currently listed)
Load the page using an user agent and/or assistive technology that supports Accessible Rich Internet Applications.
Navigate to each required form element and verify that "required" is spoken.
Check #2 is true