Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

ARIA3: Identifying valid range information with the "valuemin" and "valuemax" properties

Applicability

Technologies that support States and Properties for Accessible Rich Internet Applications.

This technique relates to:

User Agent and Assistive Technology Support Notes

WAI-ARIA is partially supported in Firefox 2.0, which maps roles and properties to platform accessibility APIs. JAWS and Window-Eyes have been successfully tested presenting these properties to the user. FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access.

At this time there is not additional user agent support.

Description

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.

Various types of data can be constrained in this way. For instance, a form control may accept a range of numbers, or a range of dates. The WAI-ARIA datatype property should be used to indicate to what type of data the range constraint applies. The value of the "datatype" property should be the name of an XML Schema Datatype, and the values of "valuemin" and "valuemax" must match the constraints of that datatype.

WAI-ARIA States and Properties is a module supported in XHTML 1.1 and higher, and the specification documents how to provide the properties in XHTML and other XML-based languages. Refer to Embedding Accessibility Role and State Metadata in HTML Documents for information on how to provide WAI-ARIA States and Properties with HTML and XHTML 1.0. ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Note: 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, this technique is anticipated to become a sufficient technique.

Examples

Example 1: A text entry field that accepts dates during the year 2007

The following text entry field requires the user to enter a date value with a value during the year 2007:

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/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:aaa="http://www.w3.org/2005/07/aaa"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
  xml:lang="en">
<head>
  <title>Date Entry</title>
</head>
<body>
  <h1>Date Entry</h1>
  <p>Text entry accepts a date in the year 2007.</p>
  <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>
</body>
</html>
 

Example 2: A spinner control that provides values between 1 and 100

The following spin button allows users to enter a number between 1 and 100.

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/2005/07/aaa/xhtml11-aaa.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
  xmlns:aaa="http://www.w3.org/2005/07/aaa"
  xmlns:xsd="http://www.w3.org/2001/XMLSchema-datatypes"
  xml:lang="en">
<head>
  <title>Spin Button</title>
</head>
<body>
  <h1>Spin Button</h1>
  <p>Spin button allows users to enter a number between 1 and 100. It is 
    implemented as a text input, to which user agents that do not support 
    ARIA roles fall back.</p>
  <form action="http://example.com/submit">
    <p><label for="test">Enter a number between 1 and 100</label>
    <input name="test" id="test" role="wairole:spinbutton" 
      aaa:valuemin="1" aaa:valuemax="100" aaa:datatype="xsd:integer" /></p>
    <p><input type="submit" value="Submit" /></p>
  </form>
</body>
</html>
 

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Access a page with form fields that require data in a certain range, using a user agent that supports the Accessible Rich Internet Applications specification.

  2. Provide information that is outside the allowable range, and attempt to submit the form.

  3. Check that the user agent notifies of the invalid data.

  4. Provide information that is inside the allowable range, and attempt to submit the form.

  5. Check that the user agent accepts the data and allows the submit to proceed.

Expected Results