• June 1, 2025

Page Title: Correct Use of ARIA Roles in HTML Elements

Rule ID: aria-allowed-role

Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice

How to Fix the Problem

To resolve this issue, ensure that any HTML element using a role attribute is assigned a role that is valid for that element type. Each HTML element has semantic meaning, and ARIA roles should enhance—not contradict—those semantics.

Step-by-Step Fix:

1. Consult the ARIA in HTML Specification: Before assigning a role to an element, refer to the ARIA in HTML specification to confirm the role is valid for that element.

2. Use Semantic HTML First: Whenever possible, rely on native HTML semantics rather than ARIA roles. ARIA should only be used to fill gaps that HTML does not cover.

3. Validate Role Assignments:

   • ✅ Correct Usage Example:

     html

     KopierenBearbeiten

     <ul role="menu">
<li role="none">
<button role="menuitem">Start</button>
</li>
</ul>


   • ❌ Incorrect Usage Examples:

     html

     KopierenBearbeiten

     <ul role="button">Name</ul> <!-- ul cannot have role="button" -->
<button role="heading" aria-level="2">Welcome</button> <!-- button should not be used as a heading -->


4. Test with Assistive Technologies: After implementing changes, use screen readers to verify that the UI is announced logically and consistently.

Why it Matters

Improper use of ARIA roles can break the accessibility of your application in several ways:

• Confusing Assistive Technologies: If an element’s role contradicts its native HTML semantics, screen readers may report confusing or meaningless information.

• Loss of Accessibility Functionality: In the worst-case scenario, misuse can render entire sections of a web application unusable to people who rely on assistive tech.

• No Enhancement: When an invalid role is applied, it may be ignored, rendering the addition useless or misleading without helping users.

By ensuring ARIA roles are used correctly, developers support consistent, predictable, and accessible user interfaces.

Rule Description

This rule ensures that all HTML elements using the role attribute are assigned roles permitted for those elements. Not all ARIA roles can be used on all HTML tags—only those explicitly allowed in the ARIA in HTML specification.

The Algorithm (in simple terms)

1. Scan the document for all elements that include a role attribute.

2. Cross-check each role value with the list of allowed roles for that particular HTML element.

3. Flag the element if the role is not permitted for its tag type.