• June 1, 2025

Accessible Name Required for ARIA Treeitem

Rule ID: aria-treeitem-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure that elements with role="treeitem" are accessible to screen reader users, each such element must have a discernible and accessible name. This can be achieved through one of the following methods:

✅ Correct Markup Examples:

1. Using aria-label:

   html

   KopierenBearbeiten

   <div role="treeitem" id="al" aria-label="Name"></div>


2. Using aria-labelledby referencing another element with discernible text:

   html

   KopierenBearbeiten

   <div id="labeldiv">Label Text</div>
<div role="treeitem" id="alb" aria-labelledby="labeldiv"></div>


3. Using inner text along with aria-label:

   html

   KopierenBearbeiten

   <div role="treeitem" id="combo" aria-label="Aria Name">Name</div>


4. Using the title attribute:

   html

   KopierenBearbeiten

   <div role="treeitem" id="title" title="Title"></div>


❌ Incorrect Markup Examples (Fails Accessibility):

1. Empty treeitem element:

   html

   KopierenBearbeiten

   <div role="treeitem" id="empty"></div>


2. Empty aria-label:

   html

   KopierenBearbeiten

   <div role="treeitem" id="alempty" aria-label=""></div>


3. aria-labelledby pointing to non-existent ID:

   html

   KopierenBearbeiten

   <div role="treeitem" id="albmissing" aria-labelledby="nonexistent"></div>


4. aria-labelledby referencing an empty element:

   html

   KopierenBearbeiten

   <div id="emptydiv"></div>
<div role="treeitem" id="albempty" aria-labelledby="emptydiv"></div>


To fix the issue:

• Ensure all treeitem elements either contain visible text, or

• Use aria-label or aria-labelledby with a non-empty and discernible value.

Why it Matters

Elements with role="treeitem" represent nodes in an interactive tree structure. Without a discernible name, screen reader users cannot understand the purpose or identity of these elements. This leads to confusion and impairs navigation within tree widgets. Accessible naming is crucial for conveying the function, destination, or context of tree items, especially in complex UIs such as file explorers, menu systems, or dynamic lists.

Rule Description

Elements assigned the ARIA treeitem role must have accessible text. This ensures the element’s purpose is clearly communicated to assistive technologies. A treeitem without a name is effectively invisible to screen reader users in terms of meaning and function.

The Algorithm (in Simple Terms)

1. Find all elements with role="treeitem".

2. Check if they have any of the following:

   • Non-empty inner text

   • A valid, non-empty aria-label

   • A valid aria-labelledby referencing a non-empty, visible text element

   • A title attribute that provides meaningful text

3. If none of these are present, the element fails the rule.