Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit aria-allowed-attr

Ensure an element's role supports its ARIA attributes

Impact:

Critical

WCAG-Konformität:

A
WCAG 4.1.2

Issue types:

failure, needs review

ARIA state or property is permitted

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 specified on an HTML or SVG element that is included in the accessibility tree.

Expectation 1

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.

Expectation 2

No test target is prohibited on the semantic role of the element on which it is specified.

Background

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.

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.

Related rules

ARIA state or property has valid value

Bibliography

Test Cases

Passed

Passed Example 1

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

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

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

The aria-label property is a global property. It is allowed on any semantic role, except where specifically prohibited.

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

Passed Example 5

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

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

Passed Example 6

The aria-controls property is required for the semantic combobox.

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

Passed Example 7

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>

Passed Example 8

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>

Passed Example 9

The aria-label property is global. It is allowed on any semantic role, except where specifically prohibited, 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

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

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

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

This div element has an explicit role of separator. The aria-valuemin, aria-valuemax and aria-valuenow properties 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

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

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

Failed Example 2

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>

Failed Example 3

The aria-label property is prohibited for an element with a generic role.

<div aria-label="Bananas"></div>

Failed Example 4

The aria-label property is prohibited for an element with a paragraph role.

<div role="paragraph" aria-label="Bananas"></div>

Inapplicable

Inapplicable Example 1

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

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

Inapplicable Example 2

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>

Autoren: Anne Thyme Nørregaard, Jean-Yves Moyen

Finanzierung: WAI-Tools

Assets:

JFK's "We Choose the Moon" speech excerpt is courtesy of NASA.