ARIA state or property allowed


Description

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

Applicability

Any WAI-ARIA state or property that is specified on an HTML or SVG element that is included-in-the-accessibility-tree.

Expectation

The attribute is either an inherited, supported, or required state or property of the semantic role of the element on which the attribute is specified. If the element has no semantic role, the attribute must be a global state or property.

Note: Assessing the value of the attribute is out of scope for this rule.

Assumptions

There are currently no assumptions

Accessibility Support

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

Background

Test Cases

Passed

Passed Example 1

aria-pressed state is supported for role button.

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

Passed Example 2

aria-pressed state is supported for role=button that is the implicit role for button element.

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

Passed Example 3

Global state that is supported by all base markup elements.

<div aria-busy="true">My busy button</div>

Passed Example 4

aria-label state is inherited for role button

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

Passed Example 5

aria-checked state is required for role aria-checkbox

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

Passed Example 6

aria-controls property is supported for role combobox

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

Passed Example 7

WAI-ARIA states and properties with empty value are also applicable to this rule

<div role="combobox" aria-controls>My combobox</div>

Passed Example 8

WAI-ARIA states and properties with empty value, specified as an empty string, are also applicable to this rule

<div role="combobox" aria-controls="">My combobox</div>

Failed

Failed Example 1

aria-sort property is neither inherited, supported, nor required for role button.

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

Failed Example 2

aria-sort attribute is neither inherited, supported, nor required for role=button that is the implicit role for button element.

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

Inapplicable

Inapplicable Example 1

No WAI-ARIA state or property.

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

Inapplicable Example 2

aria-sort property is neither inherited, supported, nor required for role button, but the element is not included in the accessibility tree.

<div role="button" aria-sort="" style="display:none;"></div>

Glossary

Implicit Semantic Role

key: implicit-role

The Implicit Semantic Role is the semantic role of each element that is used when no valid explicit semantic role is specified. Elements with no role attribute, or with a role attribute containing no valid token, are mapped to their implicit role.

Implicit roles for HTML and SVG, are documented in the HTML accessibility API mappings (work in progress), the ARIA in HTML (work in progress) documentation, and the SVG accessibility API mappings (work in progress).

Included in the accessibility tree

key: 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 (work in progress) and the SVG accessibility API mappings (work in progress).

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.

Outcome

key: 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 three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementers using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Semantic Role

key: semantic-role

A semantic role is a semantic association that indicates an object's type. This allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

The semantic role of an element is its explicit semantic role if it has any, otherwise, the implicit semantic role is used.


Changelog

Aug 21, 2019fix: update links to WCAG21 resources (#776)
Aug 14, 2019feat: Define implicit/explicit role (4e8ab6, b20e66, c487ae, e086e5, 5c01ea) (#689)
Jul 1, 2019Map ARIA rules to ARIA instead of WCAG 4.1.2 (#607)
Jun 24, 2019fix: Make "auto" rules consistent with their SC (#587)
May 9, 2019Chore: Adapt site to ACT Rules CR format (#547)
May 7, 2019Template update - ARIA state or property allowed (#497)
May 7, 2019Fix some incorrect test cases (#477)
Apr 29, 2019chore: rename files and update associations (#489)
Apr 16, 2019chore: add unique id to all rules (#478)
Apr 15, 2019chore: WCAG ACT RULES CG Website Update (#437)
Apr 10, 2019Rule update: "aria attribute allowed" and "aria required states and properties" (#436)
Mar 12, 2019chore: update filename to SC4-1-2-aria-state-or-property-allowed
Mar 2, 2019fix: add assumptions to rules (#402)
Jan 2, 2019fix: update aria vs wai-aria usage (#366)
Oct 30, 2018Remove CSS Styling from test_aspects where not used (#304)
Oct 30, 2018fix: Update aria-allowed-attribute: No overlap with aria-valid-attribute + elements with no role (#311)
Oct 3, 2018SC4-1-1+SC4-1-2-aria-allowed-attribute (#257)

Useful Links


Implementations

Tool NameCreated ByReport
AlfaSiteimproveView Report

Acknowledgements