Ensure Every ARIA treeitem Node Has An Accessible Name
Blind
Low vision
Mobility
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
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