ARIA treeitem elements must have an accessible name
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Every treeitem needs a descriptive accessible name, not just the role.
Why this matters and how to fix it
Why this matters
Tree items without accessible names are announced only as 'treeitem' by screen readers. Users cannot understand the purpose or content of nodes, making hierarchical navigation and tree exploration impossible.
How to fix this issue
Provide a clear accessible name for every element with `role="treeitem"`. Use visible text inside the element or reference it via `aria-labelledby`. Use `aria-label` only if no visible text is available. The name should describe the node’s content, not its type.
Developer guidance
Implement the WAI-ARIA tree pattern: `role="tree"` for the container, nested `role="group"` for hierarchy, and manage `aria-expanded` and `aria-selected` for state. Component libraries should enforce a `label` prop mapping to the accessible name. Test with a screen reader to confirm names, levels, and expanded/collapsed states are correctly announced.
Code examples
Incorrect Implementation
<div role="tree"><div role="treeitem"></div></div>Correct Implementation
<div role="tree">
<div role="treeitem" aria-labelledby="itemLabel1" aria-expanded="false">
<span id="itemLabel1">Documents</span>
</div>
</div>Real-World Examples
Before
<div role="tree">
<div role="treeitem"></div> <!-- Screen reader announces only 'treeitem' -->
</div>After
<div role="tree">
<div role="treeitem" aria-labelledby="itemLabel1" aria-expanded="true">
<span id="itemLabel1">Invoices</span>
</div>
</div>Manual testing
- 1. Inspect each element with `role="treeitem"`.
- 2. Verify it has visible text or references a label using `aria-labelledby` or `aria-label`.
- 3. Check hierarchical nesting with `role="group"` for child items.
- 4. Test with a screen reader to confirm the item announces its name, level, and expanded/collapsed state.
- 5. Correct missing or empty names and re-test.
Trusted by organizations across Europe working toward WCAG and EAA conformance