Proposed ARIA global properties not used where prohibited
Description
This rule checks that global WAI-ARIA properties are not on elements whose role prohibits them.
Applicability
This rule applies to any WAI-ARIA global state or property that is specified on an HTML or SVG element that is included in the accessibility tree.
Expectation
The test target is not prohibited for 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.
Assumptions
There are no assumptions.
Accessibility Support
Browsers and assistive technologies behave differently when prohibited attributes are used. Some may assign a role so that the property is available to assistive technologies, where others ignore the attribute.
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
Bibliography
- Understanding Success Criterion 1.3.1: Info and Relationships
- Understanding Success Criterion 4.1.2: Name, Role, Value
- WAI-ARIA 1.2, Prohibited 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
Accessibility Requirements Mapping
ARIA 1.2, 5.2.5 Prohibited States and Properties
- Learn more about ARIA 1.2, 5.2.5 Prohibited States and Properties
- Required for conformance to WAI-ARIA 1.2 author requirements.
- Outcome mapping:
- Any
failedoutcomes: WAI-ARIA requirement is not satisfied - All
passedoutcomes: WAI-ARIA requirement is satisfied - An
inapplicableoutcome: WAI-ARIA requirement is satisfied
- Any
ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component
- Learn more about technique ARIA5
- Not required for conformance to any W3C accessibility recommendation.
- Outcome mapping:
- Any
failedoutcomes: technique is not satisfied - All
passedoutcomes: technique needs further testing - An
inapplicableoutcome: technique needs further testing
- Any
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:
- 1.3.1 Info and Relationships (Level A): This success criterion is less strict than this rule. This is because the rule does not ignore irrelevant ARIA properties. Some of the failed examples satisfy this success criterion.
Input Aspects
The following aspects are required in using this rule.
Test Cases
Passed
Passed Example 1
This generic div element is allowed the global aria-live property.
<div aria-live="polite">I like Bananas</div>
Passed Example 2
This a element with an implicit role of link is allowed the aria-label property.
<a href="#" aria-label="Previously 100, now 1 euro"> <s>€100</s> / <b>€1</b> </a>
Passed Example 3
This div element is allowed the aria-braillelabel property because its explicit role of heading does not prohibit this.
<div role="heading" aria-braillelabel="I like bananas">
I ❤️ Bananas
</div>
Failed
Failed Example 1
The aria-label property is prohibited for an element with a generic role.
<div aria-label="Previously 100, now 1 euro"><s>€100</s> / <b>€1</b></div>
Failed Example 2
The aria-labelledby property is prohibited for an element with a paragraph role.
<h1 id="bananas">I like bananas</h1>
<p aria-labelledby="Bananas">🧑 ❤️ 🍌🍌</p>
Failed Example 3
The aria-braillelabel property is prohibited for an element with a button role.
<p aria-braillelabel="I love Bananas">I ❤️ Bananas</p>
Failed Example 4
The aria-roledescription property is prohibited for an element with a generic role.
<div aria-roledescription="Banana text">I like bananas</div>
Failed Example 5
The aria-brailleroledescription property is prohibited for an element with a none role.
<h1 role="none" aria-brailleroledescription="Banana text">I like bananas</h1>
Inapplicable
Inapplicable Example 1
The generic div element is hidden.
<div aria-label="Bananas" hidden></div>
Glossary
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:
- the element is part of sequential focus navigation; or
- the element has a tabindex value that is not null.
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:
- The 1 second time span is an arbitrary limit which is not included in WCAG. Given that scripts can manage the focus state of elements, testing the focusability of an element consistently would be impractical without a time limit.
- The tabindex value of an element is the value of the tabindex attribute parsed using the rules for parsing integers. For the tabindex value to be different from null, it needs to be parsed without errors.
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:
- it has an explicit role of
noneorpresentation; or - it is an
imgelement with analtattribute whose value is the empty string (alt=""), and with no explicit role.
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:
- 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
- cantTell: Whether the rule is applicable, or not all expectations were met could not be fully determined by the tester.
- Untested: The tester has not attempted to evaluate the test subject.
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.
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:
- has a computed CSS property
displayofnone; or - has an
aria-hiddenattribute set totrue
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:
- 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.
- Explicit If the element has an explicit role, then its semantic role is its explicit role.
- 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:
- Accessible Rich Internet Applications (WAI-ARIA) 1.2
- WAI-ARIA Graphics Module 1.0
- Digital Publishing WAI-ARIA Module 1.0
Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.
Rule Versions
This is the first version of this ACT rule.
Implementations
There are currently no known implementations for this rule. If you would like to contribute an implementation, please read the ACT Implementations page for details.