• June 1, 2025

Ensuring Valid ARIA Attribute Use for Roles

Rule ID: aria-allowed-attr
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To ensure compliance and improve accessibility, developers must use ARIA (Accessible Rich Internet Applications) attributes only where they are permitted by the specific ARIA role applied to an element.

Here’s how to fix this issue:

1. Verify Role-Attribute Combinations: Ensure that the ARIA attributes you are using are valid for the specific ARIA role assigned to the element. This can be checked through:

   • ARIA in HTML – Document conformance requirements

   • ARIA in HTML – Requirements for naming elements

2. Remove or Correct Invalid Attributes: If an ARIA attribute is not permitted for a given role, remove it or change it to a valid one. For example:

   html

   KopierenBearbeiten

   <!-- Incorrect -->
<div role="progressbar" aria-checked="true"></div><!– Correct –>
   <div role=“progressbar” aria-valuenow=“30” aria-valuemin=“0” aria-valuemax=“100”></div>

3. Use Authoritative Resources: Use the following documentation to guide appropriate ARIA implementation:

   • WAI-ARIA 1.1 Specification

   • WAI-ARIA Authoring Practices

   • WAI-ARIA Overview

4. Train and Validate: Developers working with ARIA should be familiar with JavaScript and accessibility best practices. Use automated tools like axe-core and manual code reviews to validate ARIA role-attribute usage.

Why it Matters

Incorrect usage of ARIA attributes—such as assigning attributes that are not valid for a specific role—can:

• Break Assistive Technologies: Tools like screen readers may misinterpret the purpose or behavior of elements, confusing users or presenting them with incorrect information.

• Compromise Accessibility: In the worst cases, entire portions of an application may become inaccessible.

• Conflict with Native Semantics: If ARIA is misused, it can override or conflict with the browser’s native accessibility semantics, leading to inconsistent or misleading UI behavior.

Ensuring valid role-attribute combinations helps maintain a consistent and accessible experience for all users, particularly those relying on assistive technologies.

Rule Description

This rule checks that each HTML element using an ARIA role only includes ARIA attributes that are allowed for that specific role, according to WAI-ARIA specifications.

The Algorithm (in Simple Terms)

1. Look at all elements that include an ARIA role attribute.

2. For each of these elements, check the list of ARIA attributes applied.

3. Compare those attributes against the list of valid attributes for the given role.

4. Flag any elements that use ARIA attributes not permitted for that role.