Ensure attributes that begin with aria- are valid ARIA attributes

Attributes that begin with aria- must conform to valid ARIA attribute names to ensure proper functionality and accessibility.

About This Rule

This rule checks for the presence of unrecognized ARIA attributes, which can prevent the attributes from functioning as intended. Ensuring that all ARIA attributes are valid and correctly spelled is essential for assistive technologies to accurately interpret and convey the intended meaning and functionality of web elements.

Why It Matters

Using unrecognized or misspelled ARIA attributes can prevent the intended accessibility enhancements from functioning correctly. This misconfiguration may lead to assistive technologies failing to interpret and convey the necessary information to users with disabilities, resulting in a diminished user experience.

How to Fix

Ensure that all ARIA attributes are valid and correctly spelled:

• Verify that each aria- attribute corresponds to a recognized ARIA attribute name.
• Consult the WAI-ARIA specifications to confirm the validity and correct spelling of attribute names.
• Utilize authoring and debugging tools that validate ARIA attribute names during development.

Below are the various valid ARIA attribute names.

• Widget Attributes
• Live Region Attributes
• Drag-and-Drop Attributes
• Relationship Attributes
• Definitions of States and Properties (all aria-* attributes)
• Role Attribute
• State and Property Attributes
• State and Property Attribute Processing
• WAI-ARIA Attributes Module
• WAI-ARIA Attributes XML Schema Module

Example

Incorrect

An element with an unrecognized ARIA attribute:

<div aria-visible="true">Content</div>

Correct

The same element with a valid ARIA attribute:

<div aria-hidden="true">Content</div>