aria-treeitem-name

Description

The aria-treeitem-name rule ensures that elements with role="treeitem" have an accessible name. Tree widgets represent hierarchical data such as file directories or navigation menus. Each item in a tree must have a name so that screen reader users can identify what the item represents and navigate between items meaningfully.

This rule meets WCAG requirements by:

1. Programmatic Name Determination (WCAG 4.1.2 Name, Role, Value): It ensures that the name of every interactive tree item can be programmatically determined by assistive technologies, enabling screen readers to announce the item’s purpose.
2. Conveying Relationships (WCAG 1.3.1 Info and Relationships): It ensures the hierarchical structure and labels of tree items are accessible, not just conveyed visually.

To comply with this rule, every treeitem element must have a name provided via visible inner text, aria-label, or aria-labelledby.

Examples

Here, treeitem elements are empty and have no accessible names. A screen reader announces each only as “tree item”, providing no useful information about the content.

This example includes visible text inside each treeitem, which assistive technologies use as the accessible name.

How to fix?

To fix violations of the aria-treeitem-name rule, follow these steps:

• Ensure each element with role="treeitem" contains visible text that describes the item.

• If the item uses an icon or image without adjacent visible text, add an aria-label attribute to the treeitem element with a descriptive name.

• If a visible label exists elsewhere on the page, use aria-labelledby on the treeitem to reference that element by its id.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.3.1: Info and Relationships