Skip to Content (Press Enter)

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.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

SCR25: Using Dynamic Web Content Accessibility to programmatically identify form fields as required


Editorial Note: Moved to ARIA Techniques and modified to remove references to "Dynamic Web Content Accessibility

HTML and XHTML with scripting and Dynamic Web Content Accessibility.

Editorial Note: This technique will be applicable when Dynamic Web Content Accessibility specifications reach W3C recommendation status.

This technique relates to:

User Agent and Assistive Technology Support Notes

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 element.


The purpose of this technique is to demonstrate how to use Dynamic Web Content Accessibility to programmatically identify form components for which user input or selection are required. Dynamic Web Content Accessibility 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.


Example 1

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, "", 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.

 <script type="text/javascript">
 // 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("", theAttr, theValue);
 		elemObj.setAttribute("aaa:" + theAttr, theValue);
 <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">
 <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="" />


Resources are for information purposes only, no endorsement implied.

Editorial Note: These URIs will need to be updated to the public drafts when they become available.

(none currently listed)



  1. Load the page using an user agent and/or assistive technology that supports Dynamic Web Content Accessibility.

  2. Navigate to each required form element and verify that "required" is spoken.

Expected Results