Example HTML violation: Inaccessible ARIA treeitem node name (A11y Best Practices)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Violating Aria Treeitem Name Rule</title>
<ul role="tree">
<li role="treeitem"></li>
</ul>
</body>
</html>The provided HTML violates the aria-treeitem-name accessibility rule, which mandates that each treeitem must have an accessible name. In this case, the violation occurs because the treeitem in the HTML does not have a name.
How to fix "Inaccessible ARIA treeitem node name (A11y Best Practices)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Conforming with Aria Treeitem Name Rule</title>
<ul role="tree">
<li role="treeitem" id="item1" aria-label="tree item one">Item One</li>
</ul>
</body>
</html>This version solves the issue by adding the aria-label attribute to the treeitem, which provides a name that describes the item in the tree structure.
The id attribute helps to create a unique ID for each item, even though it is not necessarily required for this accessibility rule.
