Ensure all elements with a role attribute use a valid value
This rule checks that each `role` attribute has a valid value.
Autoren: Jey Nandakumar
Finanzierung: WAI-Tools
This rule applies to any role attribute for which all the following are true:
Each test target has at least one token which is a valid value corresponding to a non-abstract role from WAI-ARIA Specifications.
Using an invalid role is often the result of a typo or other developer error. Unknown roles are ignored by browsers and assistive technologies, and the element's implicit role is used. This often means that a role that should exist is missing.
The role attribute is a set of space separated tokens. Having a whitespace separated list of more than one token in the value of the role attribute is used for what is known as fallback roles. If the first token is not accessibility supported (or valid), the next one will be used for determining the semantic role of the element, and so forth. The rule applies to attributes containing at least one non-ASCII whitespace character so that there is at least one token in the set.
Not every role can be used on every element. Which ARIA roles may be used on which HTML elements is defined in ARIA in HTML. Testing this is not part of this rule.
There are no assumptions.
There are no accessibility support issues known.
role attributeThis role attribute contains one searchbox token which is a valid WAI-ARIA role.
<label>Search: <input type="text" role="searchbox" placeholder="Enter 3 or more characters"/></label>
This role attribute contains two tokens which are both valid WAI-ARIA roles.
<style>
.ref {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
</style>
See [<span class="ref" onclick="location.href='https://act-rules.github.io/'" role="doc-biblioref link">ACT rules</span
>].
This role attribute contains two tokens, and one of these tokens (searchbox) is a valid WAI-ARIA role.
<label>Search: <input type="text" role="searchfield searchbox" placeholder="Enter 3 or more characters"/></label>
This role attribute contains one lnik token, but this token is not a valid role in any of the WAI-ARIA specifications.
<style>
.link {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
</style>
I love <span class="link" onclick="location.href='https://act-rules.github.io/'" role="lnik">ACT rules</span>.
This role attribute contains two tokens, but neither of these tokens is a valid role in any of the WAI-ARIA specifications.
<style>
.ref {
color: #0000ee;
text-decoration: underline;
cursor: pointer;
}
</style>
See [<span class="ref" onclick="location.href='https://act-rules.github.io/'" role="bibliographic-reference lnik"
>ACT rules</span
>].
There is no role attribute.
<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />
This role attribute has no value.
<div role>Some Content</div>
This role attribute is empty ("").
<div role="">Some Content</div>
This role attribute is only ASCII whitespace.
<input type="text" role=" " />
This role attribute is specified on an element which is programmatically hidden.
<div aria-hidden="true" role="banner">Some Content</div>