# ARIA treeitem elements must have an accessible name.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/labels-and-names/aria-treeitem-name
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Elements with `role="treeitem"` must have an accessible name. A treeitem without an accessible name is announced by screen readers as an unnamed or empty item, which makes tree structures unusable for people who rely on assistive technology. Users cannot determine what each item represents, navigate between items meaningfully, or understand the hierarchical relationships within the tree.

Tree widgets are used for nested, hierarchical content like file browsers, navigation menus, or category lists. Each treeitem is a single selectable node in that hierarchy. When a screen reader encounters a treeitem, it announces the item's accessible name along with its position (e.g., "item 3 of 5") and depth in the tree. Without a name, that announcement becomes meaningless.

This rule maps to WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which requires that all user interface components have a name that can be programmatically determined. Because this is a Level A criterion, it is a baseline requirement for accessibility conformance.

## How to fix it

There are several ways to give a treeitem an accessible name:

1. **Text content.** Place text directly inside the treeitem element. This is the simplest and most common approach.
2. **`aria-label`.** Add an `aria-label` attribute with a descriptive string. This is useful when the visible content of the treeitem is not sufficient on its own (for example, if it contains only an icon).
3. **`aria-labelledby`.** Point to another element's `id` that contains the label text. This is useful when the label text already exists elsewhere in the DOM.

The fix depends on context. If the treeitem already contains visible text that describes it, no extra attributes are needed. If it contains only non-text content like icons or images, use `aria-label` or `aria-labelledby` to supply the name.

## Examples

### Treeitems with no accessible name

In this example, the treeitems have no text content and no labeling attributes, so screen readers cannot announce them.

```html
<ul role="tree">
  <li role="treeitem">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
  </li>
  <li role="treeitem">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
  </li>
</ul>
```

Each treeitem contains only a decorative SVG with `aria-hidden="true"`, which means the accessible name is empty.

### Fixed with text content

The simplest fix is to add visible text inside each treeitem.

```html
<ul role="tree">
  <li role="treeitem">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
    Documents
  </li>
  <li role="treeitem">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
    Photos
  </li>
</ul>
```

### Fixed with `aria-label`

When visible text is not desirable in the design, `aria-label` provides the name directly.

```html
<ul role="tree">
  <li role="treeitem" aria-label="Documents">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
  </li>
  <li role="treeitem" aria-label="Photos">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
  </li>
</ul>
```

### Fixed with `aria-labelledby`

If the label text exists in another element, reference it by `id`.

```html
<ul role="tree">
  <li role="treeitem" aria-labelledby="label-docs">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
    <span id="label-docs">Documents</span>
  </li>
  <li role="treeitem" aria-labelledby="label-photos">
    <svg aria-hidden="true"><use href="#folder-icon" /></svg>
    <span id="label-photos">Photos</span>
  </li>
</ul>
```

### Nested tree with named treeitems

A more complete example showing a nested tree structure where every treeitem has an accessible name through text content.

```html
<ul role="tree" aria-label="File browser">
  <li role="treeitem" aria-expanded="true">
    Documents
    <ul role="group">
      <li role="treeitem">Resume.pdf</li>
      <li role="treeitem">Cover Letter.docx</li>
    </ul>
  </li>
  <li role="treeitem" aria-expanded="false">
    Photos
    <ul role="group">
      <li role="treeitem">Vacation.jpg</li>
    </ul>
  </li>
</ul>
```

Each treeitem here has text content that serves as its accessible name. The `role="group"` on nested lists communicates the hierarchy, and `aria-expanded` indicates whether a parent node is open or closed. The tree itself also has an accessible name via `aria-label` so users understand what the tree widget contains.