Ensure Every ARIA treeitem Node Has An Accessible Name
Blind
Low vision
Mobility
WCAG 2.2 Level A
Web accessibility standards require Aria treeitem elements to have discernible text that clearly describes the destination, purpose, function, or action to users who rely on screen readers.
Why It Matters
Screen reader users are not able to understand the purpose of elements with role=”treeitem” if they don’t have an accessible name.
Fixing the Issue
Check all elements with role=”treeitem” to ensure that they have a clear, accessible name.
Good Code Example
Code example
<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>
Copy Bad Code Example
Code example
<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>
Copy