Rule ID: ace-aria-treeitem-name

Check that tree view item elements have descriptive accessible names

Blind. Low Vision. Mobility Best Practice

What This Rule Checks

For interactive tree structures, each item within the tree, represented by the role=”treeitem”, must have a clear and accessible name. This ensures that users of screen readers and other assistive technologies can identify and interact with tree elements efficiently.

Who Is Affected

This issue primarily affects: Blind. Low Vision. Mobility users, who have blind. low vision. mobility-related needs.

Why This Matters

Tree views are common in file managers, navigation menus, and organizational structures. Unnamed tree items are announced as “tree item” with no label, making it impossible for screen reader users to navigate hierarchical content.

How to Fix

To make tree items accessible, follow these guidelines:

Provide Discernible Inner Text: If the tree item contains visible text, ensure it is readable and clear for screen reader users.

Use aria-label or aria-labelledby: If the tree item lacks visible text, use the aria-label attribute to assign a clear, descriptive label, or use aria-labelledby to reference another element that provides a label.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Tree item with no accessible name -->
<div role="treeitem" aria-expanded="false"></div>

Copy

Correct Markup Solutions:

Code example

<!-- Tree item with visible name -->
<div role="treeitem" aria-expanded="false">
  Documents
</div>

<!-- Or with aria-label -->
<div
  role="treeitem"
  aria-label="Documents folder"
  aria-expanded="false">
  <svg aria-hidden="true">...</svg>
</div>

Copy

Common Mistakes to Avoid

Creating tree items with only icon content and no text name.
Not providing names for dynamically loaded tree items.
Using role=”treeitem” on elements that are not part of a role=”tree” container.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.