ARIA3: Identifying valid range information with the aria-valuemin and aria-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 aria-valuemin and aria-valuemax states provide the minimum and maximum (respectively) values that may be provided by the user. Some user agents will not permit users to enter values outside that range, or will generate a validation error if users do so. The developer is still responsible for providing validation that the value is within the range.

Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-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, it is anticipated that this technique will become a sufficient technique.

Examples

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

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

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/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  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="spinbutton" 
      aria-valuemin="1" aria-valuemax="100" /></p>
    <p><input type="submit" value="Submit" /></p>
  </form>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

WAI-ARIA Overview

Related Techniques

ARIA2: Identifying required fields with the aria-required property

Tests

Procedure

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.
Provide information that is outside the allowable range, and attempt to submit the form.
Check that the user agent notifies the user of the invalid data.
Provide information that is inside the allowable range, and attempt to submit the form.
Check that the user agent accepts the data and allows the submit to proceed.

Expected Results

#3 and #5 are true

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.