Powered by
Names, roles & states
An Item in a Tree View Has No Name
Screen readers announce a tree item with no name as just "tree item", so people can't tell which folder or section they're on.
aria-treeitem-nameBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
A tree is a nested list you can expand and collapse, like folders in a file browser. Each item needs a name, which is the words a screen reader reads out.
Without a name, people hear only the role and its position. They have to guess, or give up and ask for help.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear "tree item, collapsed" with no words, so every item sounds the same. | High impact |
| Voice control users | They can't say the item's name to select it, because it has none. | High impact |
| Low-vision users (magnification) | Affected if they use a screen reader or a magnifier that reads aloud; otherwise they may see an icon they can't make out. | Partial impact |
| Cognitive and neurodivergent users | Icon-only items with no words are harder to understand and remember. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This rule is a best practice, not a WCAG requirement on its own. But an unnamed control usually leads to findings in a WCAG 2.2 Level AA audit, which Australia's Disability Discrimination Act complaints point to. | Moderate impact |
| Conversion | Trees often hold navigation, file lists or product categories. If people can't find their way, they can't finish the task. | Moderate impact |
| SEO | No real search benefit — don't sell it as one. | Low impact |
| Brand trust | A tool that sounds like a list of blanks feels broken to screen reader users. | Moderate impact |
| Cost to fix | Usually a small fix in one shared tree component. Fix it there and every tree improves. | High impact |
Fixing it in code
A folder shown only as an icon
Don't
<li role="treeitem" aria-expanded="false"><span class="icon-folder"></span></li>A screen reader says: “Tree item, collapsed, 1 of 3”
Do
<li role="treeitem" aria-expanded="false"><span class="icon-folder" aria-hidden="true"></span> Reports</li>A screen reader says: “Reports, tree item, collapsed, 1 of 3”
Visible text gives the item a name everyone can read and hear.
A label that points to nothing
Don't
<li role="treeitem" aria-labelledby="lbl-2"><span id="label-2">Invoices</span></li>A screen reader says: “Tree item, 2 of 3”
Do
<li role="treeitem" aria-labelledby="label-2"><span id="label-2">Invoices</span></li>A screen reader says: “Invoices, tree item, 2 of 3”
aria-labelledby only works when the id it points to really exists.
Designer's handoff note
Give every tree item a visible text label, not just an icon.
If space is tight, write down the name the screen reader should say for each icon, and hand it to developers.
Quick test
Tool
NVDA (opens in a new tab) (free on Windows) or VoiceOver (opens in a new tab) (on every Mac)
Checklist
- Pass
- Every item is read with a clear name, like "Reports, tree item, collapsed".
- Fail
- Any item is read as just "tree item" with no name.
Check these at the same time
- A custom button, link or menu item has no name
aria-command-name
What a green scan still misses
A scanner can tell an item has no name. It can't tell whether the name makes sense, matches what's on screen, or is too vague, like "Item 1".
Reference
- Rule ID
aria-treeitem-name- Raised by
- axe-core: “ARIA treeitem nodes should have an accessible name”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026