Ensure an element's role supports its ARIA attributes

Understanding ARIA Attributes and Roles

ARIA (Accessible Rich Internet Applications) defines specific roles and attributes to enhance accessibility. Each ARIA role has a set of permitted attributes, and every attribute specifies where and how it can be used.

Detailed guidance on these relationships can be found in the documentation for individual roles and attributes.

Specific Reference:

For precise rules on how ARIA attributes can or should not be used with HTML elements, refer to:

• ARIA in HTML - Document Conformance Requirements: Explains proper usage of ARIA attributes within HTML.
• ARIA in HTML - Naming Elements: Details requirements for using ARIA attributes to name elements.

General Reference:

For broader insights into ARIA and its implementation:

• WAI-ARIA Overview: Provides an introduction to ARIA and its purpose.
• WAI-ARIA 1.1: Outlines the technical specifications for ARIA.
• WAI-ARIA Authoring Practices: Offers practical advice for implementing ARIA effectively.

Why you should fix this accessibility issue

Improper use of ARIA attributes, such as applying them to roles where they are not allowed, can negatively impact the accessibility of a web page. At best, invalid role-attribute combinations will have no effect on accessibility. At worst, they may cause behavior that disrupts or disables accessibility for significant portions of the application.

When ARIA attributes are applied to HTML elements in ways that conflict with the WAI-ARIA 1.1 specification, they can interfere with the native semantics of those elements. This can lead assistive technologies to provide misleading or nonsensical information about the user interface, misrepresenting the actual structure and functionality of the document.

Rule Description

Not all ARIA role-attribute combinations are valid. This rule ensures that each ARIA role is accompanied only by attributes that are permitted for that role.