ARIA state or property has valid value

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

Applicability

This rule applies to any WAI-ARIA 1.1 state or property that is not empty (""), and that is specified on an HTML or SVG element.

Expectation

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 in the same shadow tree as the element that specifies the target attribute.

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

Assumptions

This rule catches values that are undefined in WAI-ARIA Specifications, and where the resulting behavior in user agents are also undefined in WAI-ARIA. This might lead to accessibility issues, if the intention was to use behavior defined in WAI-ARIA Specifications. When values are used that do not have a defined behavior in WAI-ARIA Specifications, the HTML/SVG specification decides what default values should be used, since it is defined here what should happen when an invalid value is used for an attribute. If the default value for invalid attribute values happens to match the author's intention for the value, there will not be an accessibility issue.

Accessibility Support

Some user agents treat the value of aria-* attribute as case-sensitive (even when these are not ID) while some treat them as case-insensitive.

Background

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. For example, the value of the aria-errormessage attribute on an input does not need to reference an id that exists within the same document, because an HTML element with such and id may be created in response to an event that may or may not happen.

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

Related rules

• ARIA state or property is permitted

Bibliography

• Understanding Success Criterion 4.1.2: Name, Role, Value
• ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component
• WAI-ARIA 1.1, Definitions of States and Properties
• WAI-ARIA 1.1, Characteristics of States and Properties, Value
• Uniform Resource Identifier (URI): Generic Syntax (RFC 3986)

Test Cases

Passed

aria-required property with valid true/false value

<div role="textbox" aria-required="true" aria-label="A required textbox"></div>

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

<div role="button" aria-expanded="undefined">A button</div>

aria-pressed state with valid tristate value

<div role="button" aria-pressed="mixed">An other button</div>

aria-errormessage property with valid ID reference value

<div role="textbox" aria-errormessage="my-error" aria-label="A textbox"></div>

aria-owns property with valid ID reference list value

<h1>Shopping list</h1>
<div role="list" aria-owns="item1 item2"></div>
<div id="item1">Apples</div>
<div id="item2">Bananas</div>

aria-rowindex property with valid integer value

<div role="gridcell" aria-rowindex="2">Fred</div>

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

<div role="spinbutton" aria-valuemin="1.0" aria-valuemax="2.0" aria-valuenow="1.5" aria-label="Select a value"></div>

aria-placeholder property with valid string value

<div role="textbox" aria-placeholder="MM-DD-YYYY" aria-label="Your birthdate">
	MM-DD-YYYY
</div>

aria-dropeffect property with valid token list value

<div role="dialog" aria-dropeffect="copy move"></div>

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.

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

Failed

aria-required property with invalid true/false value

<div role="textbox" aria-required="undefined" aria-label="A required textbox"></div>

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

<div role="button" aria-expanded="mixed">A button</div>

aria-pressed state with invalid tristate value

<div role="button" aria-pressed="horizontal">An other button</div>

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

<div role="textbox" aria-errormessage="error1 error2" aria-label="A textbox with an error"></div>

aria-rowindex property with invalid integer value

<div role="gridcell" aria-rowindex="2.5">Fred</div>

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

<div role="spinbutton" aria-valuemin="one" aria-valuemax="three" aria-valuenow="two" aria-label="Choose a value"></div>

aria-live property with invalid token value

<div role="main" aria-live="nope"></div>

Element with invalid token list value

<div role="dialog" aria-dropeffect="invalid move"></div>

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

<my-button role="button" aria-expanded="collapsed">My button</my-button>

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

<div
	role="scrollbar"
	aria-controls="content1"
	aria-orientation="vertical"
	aria-valuemax="100"
	aria-valuemin="0"
	aria-valuenow="25"
></div>

Inapplicable

Element does not have any ARIA states or properties

<div>Some Content</div>

Element has ARIA role, but no ARIA states or properties

<div role="button">Some Content</div>

aria-checked state with empty value

Note: The HTML validator flags an aria-checked attribute with an empty value as an issue. However WAI-ARIA 1.1 indicates aria-checked has a default value of undefined.

<div role="checkbox" aria-checked>Accept terms and conditions</div>

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

<math aria-hidden="true"></math>