ARIA state or property has valid value

Last updated:

Created by:

Success Criterion:

Description

This rule checks that each ARIA state or property has a valid value

Accessibility Requirements

This conformance rule relates to:

Test procedure

Applicability

Any non-empty WAI-ARIA 1.1 state or property that is specified on an HTML or SVG element.

Expectation 1

Each test target has a valid value according to its WAI-ARIA 1.1 value type.

For value types ID Reference and ID Reference List for WAI-ARIA required properties at least one of the elements with the given ids exists in the same document tree or shadow tree as the element that specifies the target attribute.

For value type URI the value matches the generic URI syntax.

Note: Only for WAI-ARIA required properties with value types ID Reference and ID Reference List is there a requirement that the elements with the given ids actually exists. For non-required properties, this is not a requirement.

Note: For value type URI, this rule does not require that the destination URI exists.

Assumptions

This rule assumes that elements that are not included in the accessibility tree or are focusable can still impact users. Therefore the applicability of this rule is not limited to WAI-ARIA 1.1 states and properties on elements that are included in the accessibility tree or are focusable.

Note: For example, anything referenced through aria-labelledby does not have to be included in the accessibility tree in order for it to become part of the accessible name.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed example 1

aria-required property with valid true/false value

Code Snippet: 
 <div role="textbox" aria-required="true"></div>
Example Output: Open in a new tab/ window

Passed example 2

aria-expanded state with valid true/false/undefined value

Code Snippet: 
 <div role="button" aria-expanded="undefined"></div>
Example Output: Open in a new tab/ window

Passed example 3

aria-pressed state with valid tristate value

Code Snippet: 
 <div role="button" aria-pressed="mixed"></div>
Example Output: Open in a new tab/ window

Passed example 4

aria-errormessage property with valid ID reference value

Code Snippet: 
 <div role="textbox" aria-errormessage="my-error"></div>
Example Output: Open in a new tab/ window

Passed example 5

aria-owns property with valid ID reference list value

Code Snippet: 
 <div role="combobox" aria-owns="my-textbox my-grid"></div>
Example Output: Open in a new tab/ window

Passed example 6

aria-rowindex property with valid integer value

Code Snippet: 
 <div role="gridcell" aria-rowindex="2">Fred</div>
Example Output: Open in a new tab/ window

Passed example 7

aria-valuemin, aria-valuemax and aria-valuenow properties with valid number values

Code Snippet: 
 <div role="spinbutton" aria-valuemin="1.0" aria-valuemax="2.0" aria-valuenow="1.5"></div>
Example Output: Open in a new tab/ window

Passed example 8

aria-placeholder property with valid string value

Code Snippet: 
 <div role="searchbox" aria-placeholder="MM-DD-YYYY">MM-DD-YYYY</div>
Example Output: Open in a new tab/ window

Passed example 9

aria-orientation property with valid token value (property inappropriate for the role)

Code Snippet: 
 <div role="button" aria-orientation="horizontal"></div>
Example Output: Open in a new tab/ window

Passed example 10

aria-dropeffect property with valid token list value

Code Snippet: 
 <div role="dialog" aria-dropeffect="copy move"></div>
Example Output: Open in a new tab/ window

Passed example 11

aria-controls, which is a required property for the role scrollbar, has ID Reference list that references at least one element existing in the same document tree.

Code Snippet: 
 <div id="content1">Lorem ipsum...</div>
<div role="scrollbar" aria-controls="content1 content2" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div>
Example Output: Open in a new tab/ window

Failed

Failed example 1

aria-required property with invalid true/false value

Code Snippet: 
 <div role="textbox" aria-required="undefined"></div>
Example Output: Open in a new tab/ window

Failed example 2

aria-expanded state with invalid true/false/undefined value

Code Snippet: 
 <div role="button" aria-expanded="mixed"></div>
Example Output: Open in a new tab/ window

Failed example 3

aria-pressed state with invalid tristate value

Code Snippet: 
 <div role="button" aria-pressed="horizontal"></div>
Example Output: Open in a new tab/ window

Failed example 4

aria-errormessage property with invalid ID reference value, since space is not allowed in a single ID

Code Snippet: 
 <div role="textbox" aria-errormessage="error1 error2"></div>
Example Output: Open in a new tab/ window

Failed example 5

aria-rowindex property with invalid integer value

Code Snippet: 
 <div role="gridcell" aria-rowindex="2.5">Fred</div>
Example Output: Open in a new tab/ window

Failed example 6

aria-valuemin, aria-valuemax and aria-valuenow property with invalid number values

Code Snippet: 
 <div role="spinbutton" aria-valuemin="one" aria-valuemax="three" aria-valuenow="two"></div>
Example Output: Open in a new tab/ window

Failed example 7

aria-live property with invalid token value

Code Snippet: 
 <div role="main" aria-live="nope"></div>
Example Output: Open in a new tab/ window

Failed example 8

Element with invalid token list value

Code Snippet: 
 <div role="dialog" aria-dropeffect="invalid move"></div>
Example Output: Open in a new tab/ window

Failed example 9

aria-expanded state with invalid true/false/undefined value for custom element

Code Snippet: 
 <my-button role="button" aria-expanded="collapsed"></my-button>
Example Output: Open in a new tab/ window

Failed example 10

aria-controls, which is a required property for the role scrollbar, references an element that does not exist in the same document tree.

Code Snippet: 
 <div role="scrollbar" aria-controls="content1" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"></div>
Example Output: Open in a new tab/ window

Inapplicable

Inapplicable example 1

Element does not have any ARIA states or properties

Code Snippet: 
 <div>Some Content</div>
Example Output: Open in a new tab/ window

Inapplicable example 2

Element has ARIA role, but no ARIA states or properties

Code Snippet: 
 <div role="button">Some Content</div>
Example Output: Open in a new tab/ window

Inapplicable example 3

aria-checked state with empty value

Code Snippet: 
 <div role="checkbox" aria-checked></div>
Example Output: Open in a new tab/ window

Inapplicable example 4

aria-labelledby property with empty value

Code Snippet: 
 <div role="searchbox" aria-labelledby=""></div>
Example Output: Open in a new tab/ window

Inapplicable example 5

aria-hidden state on an element that is not an HTML or SVG element

Code Snippet: 
   <math aria-hidden="true"></math>
Example Output: Open in a new tab/ window

Glossary

Non-empty text string

A string of characters (text) is considered “non-empty” if it contains 1 or more characters that are contained within any of the following unicode categories:

  • Ll: Letter, Lowercase
  • Lu: Letter, Uppercase
  • Lt: Letter, Titlecase
  • Lo: Letter, Other
  • Lm: Letter, Modifier
  • Nd: Number, Decimal Digit

For more details on unicode categories, check out www.fileformat.info/info/unicode/category/

Focusable

Elements that can become the target of keyboard input as described in https://www.w3.org/TR/html/editing.html#focusable and https://www.w3.org/TR/html/editing.html#can-be-focused.

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are [included in the accessibility tree][] can be found in the HTML accessibility API mappings and the SVG accessibility API mappings.

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Accessible Name

The programatically determined name of a user interface element that is included in the accessibility tree.

The accessible name is calculated using the accessible name and description computation.

For native markup languages, such as HTML and SVG, additional information on how to calculate the accessible name can be found in HTML Accessibility API Mappings 1.0, Accessible Name and Description Computation and SVG Accessibility API Mappings, Name and Description.

Test Aspects

Test aspects are defined as part of the ACT Rules format 1.0.

  • DOM Tree

  • CSS Styling

Contribute






GitHub

Contributing is open to anyone. We welcome any new issues or pull requests for changes. Auto WCAG Rules has conference calls every 4 weeks. If you are interested in becoming an active contributor or reviewer, we ask that you join the Auto WCAG Rules community group through the W3C Website. This requires setting up a W3C account, may require approval by the organization you work for if they are a W3C member.

Learn more about contributing to Auto WCAG Rules Join the Auto WCAG Rules community group now!