Audit aria-roles

Applicability

This rule applies to any role attribute for which all the following are true:

• the attribute has a value that is neither empty ("") nor only ASCII whitespace; and
• the attribute is specified on an HTML or SVG element which is not programmatically hidden.

Expectation

Each test target has at least one token which is a valid value corresponding to a non-abstract role from WAI-ARIA Specifications.

Background

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.

Assumptions

There are no assumptions.

Accessibility Support

There are no accessibility support issues known.

Bibliography

• List of WAI-ARIA Roles
• List of Graphics ARIA Roles
• List of DPUB ARIA Roles
• Specification of the role attribute
• WAI-ARIA 1.2 Categorization of Roles
• WAI-ARIA Roles

Test Cases

Passed

Passed Example 1

This 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>

Passed Example 2

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
>].

Passed Example 3

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>

Failed

Failed Example 1

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>.

Failed Example 2

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
>].

Inapplicable

Inapplicable Example 1

There is no role attribute.

<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />

Inapplicable Example 2

This role attribute has no value.

<div role>Some Content</div>

Inapplicable Example 3

This role attribute is empty ("").

<div role="">Some Content</div>

Inapplicable Example 4

This role attribute is only ASCII whitespace.

<input type="text" role=" " />

Inapplicable Example 5

This role attribute is specified on an element which is programmatically hidden.

<div aria-hidden="true" role="banner">Some Content</div>