Treeitem Accessible Name

Why It Matters

• Trees are complex navigation structures. Users need clear labels to understand where they are in the hierarchy, which branch they are exploring, and what each node represents. Without names, the entire tree is unusable.
• Screen reader users rely on announced names. In a tree view, the screen reader announces the treeitem name, its depth level, and its expanded/collapsed state. If the name is missing, two-thirds of that information is useless.
• Trees are keyboard-driven. Arrow keys move between items, Enter expands or collapses branches. Users making these keyboard moves need immediate audio feedback about what they just landed on.
• Unnamed items look identical. Without labels, every treeitem sounds the same to a screen reader user — making it impossible to find a specific item or navigate purposefully.

How to Fix It

1. Put descriptive text directly inside each treeitem. The simplest approach: <li role="treeitem">Annual Reports</li>. The inner text becomes the accessible name automatically.
2. Use aria-label when text alone is not enough. If the visible text is abbreviated or icon-based, provide a clear name: <li role="treeitem" aria-label="Q4 Financial Reports">.
3. Include expand/collapse state. Parent items in a tree should have aria-expanded="true" or aria-expanded="false" so users know whether a branch is open or closed.
4. Set the correct tree structure. Use role="tree" on the container, role="treeitem" on each item, and role="group" on nested lists. This gives screen readers the full hierarchy.
5. Implement proper keyboard navigation. Arrow keys should move between siblings, right arrow expands a branch, left arrow collapses it. These patterns are expected by users familiar with tree views.

Common Mistakes

• Using icons without text alternatives. A folder icon next to a treeitem looks clear visually, but if there is no text or aria-label, the screen reader announces nothing useful.
• Building trees from nested <div> elements. Without proper roles and ARIA attributes, nested divs look flat to assistive tools — the hierarchy is completely lost.
• Not using role="group" for nested levels. Child items should be wrapped in a container with role="group" so screen readers can announce the nesting depth and item count.
• Forgetting to update names after dynamic changes. If tree items are renamed, moved, or added via JavaScript, make sure the accessible names reflect the current state, not the initial render.