SIA-R21`role` attributes have only valid values

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

This rule checks that each role attribute has only valid tokens.

This rule applies to every role attribute with a value that is neither empty nor only ASCII whitespace, specified on an element that is not programmatically hidden.

Each token of the attribute, which is specified as a set of space-separated tokens, corresponds to a non-abstract WAI-ARIA role.

Which specific roles to consider may depend on the type of content under test, such as web pages or digital publications, and are not limited to those defined by WAI-ARIA alone. Roles defined in separate WAI-ARIA modules, such as the Digital Publishing Module or the Graphics Module, may also be considered.

This rule makes no assumptions.

This rule has the following accessibility support concern:

There exists a known popular browser that treats the value of the role attribute as case-sensitive. Inconsistencies between browsers can therefore arise if the role attribute has a value containing uppercase letters.

This element has a role attribute with a value of button, which corresponds to a non-abstract WAI-ARIA role, and therefore passes the rule:

<div role="button" tabindex="0">This is a button</div>

This element has a role attribute with a value that does not correspond to a non-abstract WAI-ARIA role and therefore fails the rule:

<div role="btn" tabindex="0">This is a button</div>

This element has a role attribute whose first token, btn, is not a valid WAI-ARIA role:

<div role="btn button" tabindex="0">This is a button</div>

This element has no role attribute and is therefore inapplicable:

<button>This is a button</button>

While this element does have a role attribute, it is empty and is therefore inapplicable:

<button role="">This is a button</button>