SIA-R110role attributes have at least one valid value

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

Description

This rule checks that each role attribute has at least one valid token.

Applicability

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.

Expectations

  1. At least one 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.

Assumptions

This rule makes the following assumption:

  • The role attribute is being used as a way of complying with WCAG.

Accessibility support

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.

Examples

Passed

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 whose second token, button, is a valid WAI-ARIA role:

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

Failed

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>

Inapplicable

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>

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/674b10/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).