Skip to content

Proposed ARIA state or property is permitted

Description

This rule checks that WAI-ARIA states or properties are allowed for the element they are specified on.

Applicability

This rule applies to any [WAI-ARIA state or property][] that is explicitly set on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][].

Expectation

For each test target, one of the following is true:

Background

The use of ARIA attributes that are not supported by a role is often the result of a developer using either an incorrect role, or misunderstanding the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that information that should exist is missing to assistive technology users.

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][global]. Some of those elements can also have [inherited][], [supported][], or [required][] [states][state] or [properties][property] 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][state] or [properties][property] of the application role.

Note that required WAI-ARIA states or properties for a role may change with the advance of the WAI-ARIA specifications. For example, both aria-expanded and aria-controls were required in ARIA 1.2 for combobox role, but the aria-controls was removed from required states or properties in ARIA 1.3. The examples in this rule follow ARIA 1.3.

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.

Assumptions

There are no assumptions.

Accessibility Support

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.

Other Resources

Accessibility Requirements Mapping

Secondary Requirements

This rule is related to the following accessibility requirements, but was not designed to test this requirements directly. These secondary requirements can either be stricter than the rule requires, or may be satisfied in ways not tested by the rule:

Input Aspects

The following aspects are required in using this rule.

Test Cases

Passed

Passed Example 1

Open in a new tab

The aria-pressed [state][] is [supported][] with button, which is the [implicit role][] for button elements.

<button aria-pressed="false">My button</button>

Passed Example 2

Open in a new tab

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>

Passed Example 3

Open in a new tab

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>

Passed Example 4

Open in a new tab

The aria-label [property][] is a [global][] [property][].

<div role="button" aria-label="OK">✓</div>

Passed Example 5

Open in a new tab

The aria-checked [state][] is [required][] for the [semantic][semantic role] checkbox.

<div role="checkbox" aria-checked="false">My checkbox</div>

Passed Example 6

Open in a new tab

The aria-expanded [property][] is [required][] for the [semantic][semantic role] combobox.

<div role="combobox" aria-controls="id1" aria-expanded="false" aria-label="My combobox">My combobox</div>

Passed Example 7

Open in a new tab

The aria-expanded [property][] is [required][] for the [semantic][semantic role] combobox.

<div role="combobox" aria-expanded="false" aria-controls="id1" aria-label="My combobox">My combobox</div>

Passed Example 8

Open in a new tab

The aria-expanded [property][] is [required][] for the [semantic][semantic role] combobox. [WAI-ARIA states and properties][wai-aria state or property] with undefined value are still applicable to this rule.

<div role="combobox" aria-expanded="undefined" aria-controls="id1" aria-label="My combobox">My combobox</div>

Passed Example 9

Open in a new tab

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>

Passed Example 10

Open in a new tab

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>

Passed Example 11

Open in a new tab

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>

Passed Example 12

Open in a new tab

This div element has an [explicit role][] of switch; the aria-required [property][] is [inherited][] from the checkbox superclass role.

<div role="switch" aria-checked="false" tabindex="0" aria-required="true">
	<span class="label">Notifications</span>
	<span
		class="switch"
		style="position: relative; display: inline-block; top: 6px; border: 2px solid black; border-radius: 12px; height: 20px; width: 40px;"
	>
		<span
			style="position: absolute; top: 2px; left: 2px; display: inline-block; border: 2px solid black; border-radius: 8px; height: 12px; width: 12px; background: black;"
		></span>
	</span>
	<span class="on" aria-hidden="true" style="display: none;">On</span>
	<span class="off" aria-hidden="true">Off</span>
</div>

Passed Example 13

Open in a new tab

This div element has an [explicit role][] of separator. The aria-valuemin, aria-valuemax and aria-valuenow [properties][property] are [supported][] for the separator role when the element is [focusable][].

<div role="separator" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0">My separator</div>

Failed

Failed Example 1

Open in a new tab

The aria-sort [property][] may not be used on a [semantic][semantic role] button.

<button aria-sort="">Sort by year</button>

Failed Example 2

Open in a new tab

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][state] or [properties][property] are also applicable to audio element).

<audio src="/test-assets/moon-audio/moon-speech.mp3" controls aria-orientation="horizontal"></audio>

Inapplicable

Inapplicable Example 1

Open in a new tab

This div element has no [WAI-ARIA state or property][].

<div role="group">A group of content</div>

Inapplicable Example 2

Open in a new tab

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>

Inapplicable Example 3

Open in a new tab

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

Glossary

Attribute value

The attribute value of a content attribute set on an HTML element is the value that the attribute gets after being parsed and computed according to specifications. It may differ from the value that is actually written in the HTML code due to trimming whitespace or non-digits characters, default values, or case-insensitivity.

Some notable case of attribute value, among others:

This list is not exhaustive, and only serves as an illustration for some of the most common cases.

The attribute value of an [IDL attribute][] is the value returned on getting it. Note that when an [IDL attribute][] [reflects][reflect] a content attribute, they have the same attribute value.

Explicit Semantic Role

The explicit semantic role of an element is determined by its [role attribute][] (if any).

The [role attribute][] takes a list of tokens. The explicit semantic role is the first valid role in this list. The valid roles are all non-abstract roles from [WAI-ARIA Specifications][]. If the element has no [role attribute][], or if it has one with no valid role, then this element has no explicit semantic role.

Other roles may be added as they become available. Not all roles will be supported in all assistive technologies. Testers are encouraged to adjust which roles are allowed according to the accessibility support base line. For the purposes of executing examples in all rules, it should be assumed that all roles are supported by assistive technologies so that none of the roles fail due to lack of accessibility support.

Focusable

An element is focusable if one or both of the following are true:

Exception: Elements that lose focus and do not regain focus during a period of up to 1 second after gaining focus, without the user interacting with the page the element is on, are not considered focusable.

Notes:

Implicit Semantic Role

The implicit semantic role of an element is a pre-defined value given by the host language which depends on the element and its ancestors.

Implicit roles for HTML and SVG, are documented in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs are exposed to assistive technologies. This allows users of assistive technology to access the elements in a way that meets 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 (working draft) and the SVG accessibility API mappings (working draft).

For more details, see [examples of included in the accessibility tree][].

Programmatically hidden elements are removed from the accessibility tree. However, some browsers will leave focusable elements with an aria-hidden attribute set to true in the accessibility tree. Because they are hidden, these elements are considered not included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.

Marked as decorative

An element is marked as decorative if one or more of the following conditions is true:

Elements are marked as decorative as a way to convey the intention of the author that they are [pure decoration][]. It is different from the element actually being [pure decoration][] as authors may make mistakes. It is different from the element being effectively ignored by assistive technologies as rules such as [presentational roles conflict resolution][] may overwrite this intention.

Elements can also be ignored by assistive technologies if they are [programmatically hidden][]. This is different from marking the element as decorative and does not convey the same intention. Notably, being [programmatically hidden][] may change as users interact with the page (showing and hiding elements) while being marked as decorative should stay the same through all states of the page.

Namespaced Element

An [element][] with a specific [namespaceURI][] value from [HTML namespaces][]. For example an “SVG element” is any element with the “SVG namespace”, which is http://www.w3.org/2000/svg.

Namespaced elements are not limited to elements described in a specification. They also include custom elements. Elements such as a and title have a different namespace depending on where they are used. For example a title in an HTML page usually has the HTML namespace. When used in an svg element, a title element has the SVG namespace instead.

Outcome

A conclusion that comes from evaluating an ACT Rule on a [test subject][] or one of its constituent test target. An outcome can be one of the five following types:

Note: A rule has one passed or failed outcome for every [test target][]. When a tester evaluates a test target it can also be reported as cantTell if the rule cannot be tested in its entirety. For example, when applicability was automated, but the expectations have to be evaluated manually.

When there are no test targets the rule has one inapplicable outcome. If the tester is unable to determine whether there are test targets there will be one cantTell outcome. And when no evaluation has occurred the test target has one untested outcome. This means that each [test subject][] always has one or more outcomes.

Outcomes used in ACT Rules can be expressed using the [outcome property][] of the [EARL10-Schema][earl10-schema].

Programmatically Hidden

An HTML element is programmatically hidden if either it has a computed CSS property visibility whose value is not visible; or at least one of the following is true for any of its [inclusive ancestors][] in the [flat tree][]:

Note: Contrary to the other conditions, the visibility CSS property may be reverted by descendants.

Note: The HTML standard suggests setting the CSS display property to none for elements with the hidden attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the hidden attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS display property can reveal elements with the hidden attribute.

Semantic Role

The semantic role of an element is determined by the first of these cases that applies:

  1. Conflict If the element is [marked as decorative][], but the element is [included in the accessibility tree][]; or would be [included in the accessibility tree][] when it is not [programmatically hidden][], then its semantic role is its [implicit role][].
  2. Explicit If the element has an [explicit role][], then its semantic role is its [explicit role][].
  3. Implicit The semantic role of the element is its [implicit role][].

This definition can be used in expressions such as “semantic button” meaning any element with a semantic role of button.

WAI-ARIA specifications

The WAI ARIA Specifications group both the WAI ARIA W3C Recommendation and ARIA modules, namely:

Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

[dom attribute value]][dom-attribute-value]: https://dom.spec.whatwg.org/#concept-attribute-value ‘DOM Specification of Attribute Value’ [earl10-schema]: https://www.w3.org/TR/act-rules-format-1.1/#biblio-earl10-schema [element]: https://dom.spec.whatwg.org/#element ‘DOM element, 2021/05/31’ [enumerated attributes]: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute ‘HTML Specification of Enumerated Attribute’ [examples of included in the accessibility tree]: https://act-rules.github.io/pages/examples/included-in-the-accessibility-tree/ [explicit role]: #explicit-role ‘Definition of Explicit Role’ [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree ‘Definition of flat tree’ [focusable]: #focusable ‘Definition of focusable’ [global]: https://www.w3.org/TR/wai-aria-1.2/#global_states ‘Definition of Global ARIA States and Properties’ [html aam]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings ‘Specification of HTML attributes value mapping to ARIA states and properties’ [html attribute value]: https://html.spec.whatwg.org/multipage/dom.html#attributes ‘HTML Specification of Attribute Value’ [html namespaces]: https://infra.spec.whatwg.org/#namespaces ‘HTML namespace, 2021/05/31’ [idl attribute]: https://heycam.github.io/webidl/#idl-attributes “Definition of Web IDL Attribute (Editor’s Draft)” [implicit role]: #implicit-role ‘Definition of Implicit Role’ [included in the accessibility tree]: #included-in-the-accessibility-tree ‘Definition of Included in the Accessibility Tree’ [inclusive ancestors]: https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor ‘DOM Definition of Inclusive Ancestor’ [inherited]: https://www.w3.org/TR/wai-aria-1.2/#inheritedattributes ‘Definition of Inherited ARIA States and Properties’ [marked as decorative]: #marked-as-decorative ‘Definition of Marked as Decorative’ [namespaced element]: #namespaced-element [namespaceuri]: https://dom.spec.whatwg.org/#dom-element-namespaceuri ‘DOM Element namespaceURI, 2021/05/31’ [numbers]: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#numbers ‘HTML Specification of Number Parsing’ [outcome property]: https://www.w3.org/TR/EARL10-Schema/#outcome [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none ‘Presentational Roles Conflict Resolution’ [programmatically hidden]: #programmatically-hidden ‘Definition of Programmatically Hidden’ [property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property ‘Definition of ARIA Property’ [pure decoration]: https://www.w3.org/TR/WCAG22/#dfn-pure-decoration ‘WCAG definition of Pure Decoration’ [reflect]: https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes ‘HTML specification of Reflecting Content Attributes in IDL Attributes’ [required]: https://www.w3.org/TR/wai-aria-1.2/#requiredState ‘Definition of Required ARIA States and Properties’ [role attribute]: https://www.w3.org/TR/role-attribute/ ‘Specification of the role attribute’ [rules for parsing integers]: https://html.spec.whatwg.org/#rules-for-parsing-integers [semantic role]: #semantic-role ‘Definition of Semantic Role’ [sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation [space separated]: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#space-separated-tokens ‘HTML Specification of Space Separated Tokens’ [state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state ‘Definition of ARIA State’ [supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState ‘Definition of Supported ARIA States and Properties’ [tabindex attribute]: https://html.spec.whatwg.org/#attr-tabindex [tabindex value]: https://html.spec.whatwg.org/#tabindex-value [test subject]: https://www.w3.org/TR/act-rules-format-1.1/#test-subject [test target]: https://www.w3.org/TR/act-rules-format/#test-target [wai-aria specification]: https://www.w3.org/TR/wai-aria-1.2/#propcharacteristic_value ‘WAI-ARIA Specification of States and Properties Value’ [wai-aria specifications]: #wai-aria-specifications ‘Definition of WAI-ARIA specifications’ [wai-aria state or property]: https://www.w3.org/TR/wai-aria-1.2/#state_prop_def ‘Definition of ARIA States and Properties’

Rule Versions

This is the first version of this ACT rule.

Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date.

Implementation Type Consistency Report
Alfa (fully automated) 0.108.2 Automated tool Consistent Alfa (fully automated) Report
Alfa (semi-automated) 0.108.2 Semi-automated tool Consistent Alfa (semi-automated) Report
Axe DevTools Pro 4.37.1 Semi-automated tool Partial Axe DevTools Pro Report
Axe-core 4.10.2 Automated tool Partial Axe-core Report
Equal Access Accessibility Checker 3.1.42-rc.0 Automated tool Consistent Equal Access Accessibility Checker Report
QualWeb 3.0.0 Automated tool Partial QualWeb Report
Total Validator 17.4.0 Linter Consistent Total Validator Report
Total Validator (+Browser) 17.4.0 Automated tool Consistent Total Validator (+Browser) Report
UsableNet AQA - WCAG 2.2 AA Auto 2.5.1 Automated tool Consistent UsableNet AQA - WCAG 2.2 AA Auto Report
UsableNet AQA - WCAG 2.2 AA Semi-auto 2.5.1 Semi-automated tool Consistent UsableNet AQA - WCAG 2.2 AA Semi-auto Report
Webmate Accessibility Workbench Automated tool Partial Webmate Accessibility Workbench Report
ember-template-lint 5.5.1 Linter Partial ember-template-lint Report
Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.