Las WCAG 2.0 (Web Content Accessibility Guidelines 2.0) incluyen cuatro técnicas (Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0) específicas relacionadas con WAI- ARIA.
ARIA1: Using Accessible Rich Internet Application describedby property to provide a descriptive, programmatically determined label
The purpose of this technique is to demonstrate how to use the Accessible Rich Internet Application (ARIA) descibedby property to provide descriptive information about a user interface control that can be programmatically determined by user agents.
ARIA techniques provide the ability to add programmatically determined information to an element which can provide additional information about the element. The user agent can provide this additional information to assistive technology for presentation to the user.
Ejemplo:
<p>The link in the next paragraph has been updated with the Accessible Rich Internet Applications describedby property to provide more information about the link</p>
<p><span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span>
A bad storm in Alaska last October generated an ocean swell that broke apart a giant iceberg near Antarctica six days later, U.S. researchers reported on Monday.
<a href="http://www.sciencemag.com/iceberg.html" id="iceberg" waistate:describedby="icebergInfo">More Info...</a>.
</p>
ARIA2: Identifying required fields with the "required" property
The objective of this technique is to indicate that the completion of a user input field is mandatory in a programmatically determinable way. The WAI-ARIA required state indicates that user input is required before submission. The "required" state can have values of "true" or "false". For example, if a user must fill in an address field, then "required" is set to true.
Note: The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the "required" property makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner.
Ejemplo:
<label for="test">Test (required)</label>
<input name="test" id="test" aaa:required="true" />
ARIA3: Identifying valid range information with the "valuemin" and "valuemax" properties
The objective of this technique is to provide information about the allowable range of an entry field in a programmatically determinable way. The WAI-ARIA valuemin and valuemax states provide the minimum and maximum (respectively) values that may be provided by the user. User agents will not permit users to enter values outside that range, or will generate a validation error if users do so.
Ejemplo:
<form action="http://example.com/submit">
<p><label for="test">Enter a date in 2007:</label>
<input name="test" id="test" aaa:valuemin="2007-01-01" aaa:valuemax="2007-12-31" aaa:datatype="xsd:date" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
ARIA4: Using Accessible Rich Internet Applications to programmatically identify form fields as required
La manera de implementar la técnica ARIA2 de forma dinámica se ejemplifica así:
Ejemplo:
<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>
Artículos relacionados
