Accessibility
ARIA treeitem nodes must have an accessible name
Screen reader users are not able to discern the purpose of
elements
with role="treeitem"
that do not have an accessible name.
Fixing the problem
Correct markup solutions
The aria-treeitem-name
rule has four markup patterns that pass test
criteria:
<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>
Ensure that each element with role="treeitem"
has one of the
following characteristics:
- Inner text that is discernible to screen reader users.
-
Non-empty
aria-label
attribute. -
aria-labelledby
pointing to element with text which is discernible to screen reader users.
Incorrect markup solutions
The aria-treeitem-name
rule has four markup patterns that fail testing
criteria:
<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>