Make sure elements with ARIA roles have all required ARIA attributes

Elements with ARIA roles must include all required ARIA attributes: WAI-ARIA 1.1: Required States and Properties

Why It Matters

ARIA widget roles require additional attributes that describe the state of the widget. The state of the widget is not communicated to screen reader users if a required attribute is omitted. Certain roles act as composite user interface widgets. As such, they typically act as containers that manage other, contained widgets. When required state and property attributes for specific roles (and subclass roles) are not present, screen readers may not be able to convey the definition of what the element's role is to users.

How to Fix

Add the missing ARIA state or property to the given element. For more information about which ARIA role, state, and property attributes are allowed by role, see Accessible Rich Internet Applications (WAI-ARIA) 1.1 - Supported States and Properties.

Example

Fail

The following example defines a slider without the required aria-valuemin, aria-valuemax, and aria-valuenow attributes:

<div role="slider"></div>

Pass

In this corrected example, the slider includes the required attributes:

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>

About This Rule

This rule checks all elements with the role attribute to ensure required attributes are defined.

List of ARIA States and Properties

Global States and Properties

• aria-atomic: Indicates if assistive technologies should present the entire region or only the changed parts. Values: true | false
• aria-busy: Indicates whether an element or its subtree is currently being updated. Values: true | false
• aria-controls: Identifies the element(s) controlled by the current element. Values: ID reference(s)
• aria-current: Indicates the current item within a set. Values: page | step | location | date | time | true | false
• aria-describedby: Identifies the element(s) that describe the current element. Values: ID reference(s)
• aria-disabled: Indicates that the element is perceivable but disabled for user interaction. Values: true | false
• aria-errormessage: Identifies the element containing the error message. Values: ID reference
• aria-expanded: Indicates if the element is expanded or collapsed. Values: true | false
• aria-haspopup: Indicates the presence of a popup triggered by the element. Values: menu | listbox | tree | grid | dialog | true | false
• aria-hidden: Indicates whether the element is visible to assistive technologies. Values: true | false
• aria-invalid: Indicates the validation state of the element. Values: grammar | false | spelling | true
• aria-keyshortcuts: Defines keyboard shortcuts available for the element. Values: String
• aria-label: Provides a string label for the element. Values: String
• aria-labelledby: Identifies the element(s) that label the current element. Values: ID reference(s)
• aria-live: Indicates the priority of updates to a live region. Values: off | polite | assertive
• aria-owns: Identifies elements that are owned by the current element. Values: ID reference(s)
• aria-relevant: Indicates the types of changes relevant to a live region. Values: additions | removals | text | all
• aria-roledescription: Provides a human-readable description for the role of the element. Values: String