Techniques for WCAG 2.0

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:

-

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

Applicability

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

Editorial Note: This technique will be applicable when Accessible Rich Internet Application specifications reach W3C recommendation status.

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for WAI-ARIA for general information on 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 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: 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.

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 the user 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