Back to Learn
Pulseaccessibility

ARIA Treeitem Elements Have Accessible Names

What This Audit Checks

This audit verifies that elements with role="treeitem" have accessible names. Tree views are used for hierarchical navigation like file browsers or nested menus, and each item must be identifiable.

Why It Matters

Screen reader users navigate tree views item by item. Without accessible names, each node is announced as "treeitem" with no indication of its content, making the tree unusable.

How to Fix It

  • Add text content inside the treeitem element. Visible text automatically becomes the accessible name.
  • Use aria-label for treeitems that use only icons or non-text indicators.
  • Use aria-labelledby to reference a text element within the treeitem.
<!-- Bad: no accessible name -->
<div role="treeitem">
  <svg><!-- folder icon --></svg>
</div>

<!-- Good: text content provides the name -->
<div role="treeitem">
  <svg><!-- folder icon --></svg>
  Documents
</div>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources