Make sure every ARIA treeitem node has an accessible name

The aria-treeitem-name rule checks that every element with role="treeitem" has an accessible name. This ensures that screen reader users can understand the purpose of each tree item in a tree view widget.

What is being tested?

Each role="treeitem" element must have:

• Inner text that is visible to screen readers,
• A non-empty aria-label attribute, or
• An aria-labelledby attribute pointing to an element with discernible text.

Correct markup examples

<div role="treeitem" id="al" aria-label="Name"></div>

<div role="treeitem" id="alb" aria-labelledby="labeldiv"></div>

<div role="treeitem" id="combo" aria-label="Aria Name">Name</div>

<div role="treeitem" id="title" title="Title"></div>

Incorrect markup examples

<div role="treeitem" id="empty"></div>

<div role="treeitem" id="alempty" aria-label=""></div>

<div role="treeitem" id="albmissing" aria-labelledby="nonexistent"></div>

<div role="treeitem" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

Why it matters

Screen reader users rely on accessible names to understand the role and purpose of interface elements. Without an accessible name, a treeitem will be announced as a nameless item, making it difficult or impossible to navigate the tree.