| id | 5c01ea | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | ARIA state or property is permitted | ||||||||||||||||||||||||||||||
| rule_type | atomic | ||||||||||||||||||||||||||||||
| description | This rule checks that WAI-ARIA states or properties are allowed for the element they are specified on. | ||||||||||||||||||||||||||||||
| accessibility_requirements |
|
||||||||||||||||||||||||||||||
| input_aspects |
|
||||||||||||||||||||||||||||||
| acknowledgments |
|
This rule applies to any WAI-ARIA state or property that is explicitly set on an HTML or SVG element that is included in the accessibility tree.
For each test target, one of the following is true:
- global: the test target is a global state or property; or
- semantic role: the test target is an inherited, supported, or required state or property of the semantic role of the element on which the test target is specified; or
- language feature: the test target is specified on an HTML element and is allowed on that element. Which ARIA states or properties may be used on which element is described in ARIA in HTML.
No test target is prohibited on the semantic role of the element on which it is specified.
There are no assumptions.
Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some elements can have a semantic role of none and their attributes fail this rule with some technologies but users of other technology would not experience any accessibility issue.
The presence of prohibited ARIA attributes is often the result of a developer using an incorrect role, or a misunderstanding of the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that a state or property which should exist is missing.
In HTML, there are language features that do not have corresponding implicit WAI-ARIA semantics. As per ARIA in HTML, those elements can have global states or properties. Some of those elements can also have inherited, supported, or required states or properties that correspond to a WAI-ARIA role. For example, the audio element has no corresponding ARIA semantics but it can have inherited, supported, or required states or properties of the application role.
This rule only applies to explicitly set attributes since these have been provided by authors and using the wrong one is therefore an author issue. If an implicitly set attribute is incorrect, this is not necessarily an author error, e.g., it can be the result of re-purposing an existing element.
Assessing the value of the attribute is out of scope for this rule.
- Understanding Success Criterion 4.1.1: Parsing
- Understanding Success Criterion 4.1.2: Name, Role, Value
- WAI-ARIA 1.2, Supported States and Properties
- WAI-ARIA 1.2, Global States and Properties
- ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component
- Document conformance requirements for use of ARIA attributes in HTML
The aria-pressed state is supported with button, which is the implicit role for button elements.
<button aria-pressed="false">My button</button>The aria-pressed state is supported with button, which is the explicit role of this div element.
<div role="button" aria-pressed="false">My button</div>The aria-busy state is a global state that is supported by all elements, even without any semantic role.
<div aria-busy="true">My busy div</div>The aria-label property is a global property. It is allowed on any semantic role.
<div role="button" aria-label="OK">✓</div>The aria-checked state is required for the semantic checkbox.
<div role="checkbox" aria-checked="false">My checkbox</div>The aria-controls property is required for the semantic combobox.
<div role="combobox" aria-controls="id1" aria-expanded="false">My combobox</div>The aria-controls property is required for the semantic combobox. WAI-ARIA states and properties with empty value are still applicable to this rule.
<div role="combobox" aria-expanded="false" aria-controls>My combobox</div>The aria-controls property is required for the semantic combobox. WAI-ARIA states and properties with empty value (specified as an empty string) are still applicable to this rule.
<div role="combobox" aria-expanded="false" aria-controls="">My combobox</div>The aria-label property is global. It is allowed on any semantic role, including roles from the WAI-ARIA Graphics Module. This rule is applicable to SVG elements.
<svg xmlns="http://www.w3.org/2000/svg" role="graphics-object" width="100" height="100" aria-label="yellow circle">
<circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>This button element has an explicit role of none. However, because it is focusable (by default), it has a semantic role of button due to Presentational Roles Conflict Resolution. The aria-pressed state is supported for the button role.
<button role="none" aria-pressed="false">ACT rules are cool!</button>This input element does not have an explicit role of textbox, but the aria-required property may be used on an input element with a type attribute value of password.
<label>Password<input type="password" aria-required="true"/></label>The aria-sort property may not be used on a semantic button.
<button aria-sort="">Sort by year</button>The aria-orientation property may not be used on audio element, nor can it be used on application (the semantic role for which inherited, supported, or required states or properties are also applicable to audio element).
<audio src="/test-assets/moon-audio/moon-speech.mp3" controls aria-orientation="horizontal"></audio>The aria-label property is prohibited for an element with a generic role.
<div aria-label="Bananas"></div>This div element has no WAI-ARIA state or property.
<div role="region">A region of content</div>This div element is not included in the accessibility tree, hence its WAI-ARIA state or property is not checked.
<div role="button" aria-sort="" style="display:none;"></div>This button does not have any explicitly set ARIA attribute. It has an implicitly set aria-checked state, due to the absence of a checked attribute on the input element with a type attribute value of checkbox.
<input type="checkbox" role="button" />