# ARIA Treeitem Name

Checks tree items in custom tree widgets have accessible names.

- Repository: https://github.com/thedaviddias/Front-End-Checklist (74621 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add thedaviddias/Front-End-Checklist --skill aria-treeitem-name -g -a claude-code -y`
Codex: `npx skills add thedaviddias/Front-End-Checklist --skill aria-treeitem-name -g -a codex -y`
Cursor: `npx skills add thedaviddias/Front-End-Checklist --skill aria-treeitem-name -g -a cursor -y`
Gemini CLI: `npx skills add thedaviddias/Front-End-Checklist --skill aria-treeitem-name -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add thedaviddias/Front-End-Checklist`

## Description

Use when applies to custom tree widgets built with role='tree', role='treeitem', and role='group'. Common in file explorers, nested navigation menus, org charts, and any UI where items can be expanded or collapsed to reveal children.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Provide accessible names for tree items

Tree widgets represent hierarchical data (file explorers, nested navigation, organization charts). Screen readers announce each focused treeitem's name, level, and position, e.g., 'src, collapsed, level 1, 1 of 3'. If the name is empty or generic ('folder', 'item'), blind users cannot distinguish between nodes and cannot navigate the hierarchy with confidence. VoiceOver on macOS uses the name to populate the rotor, and NVDA reads it as the user moves through the tree with arrow keys.

## Quick Reference

- Every element with `role='treeitem'` must have a non-empty accessible name
- Text content of the element is used as the name by default, ensure it is descriptive
- Use `aria-label` to override or supplement the visible text (e.g., adding file type context)
- Use `aria-labelledby` to compose a name from multiple visible elements within the item
- A treeitem with `aria-expanded` must also convey its expanded/collapsed state, this is separate from its name

## Check

Find all elements with `role='treeitem'`. For each, determine its accessible name via the accname computation: check `aria-labelledby` first, then `aria-label`, then visible text content. Flag any treeitem with an empty or whitespace-only accessible name. Also check whether treeitems with children have `aria-expanded` set to 'true' or 'false' (not just absent).

## Fix

For each unnamed treeitem: (1) If the element has visible text content that is descriptive, no change is needed, the text content becomes the accessible name. (2) If the visible text is ambiguous (e.g., an icon with no text), add `aria-label='Descriptive name'`. (3) If the item has multiple text parts (e.g., filename + file size), use `aria-labelledby` referencing the most descriptive element's id. (4) For expandable treeitems, ensure `aria-expanded='true'` or `aria-expanded='false'` is present and toggled on expand/collapse.

## Explain

The rest: https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/aria-treeitem-name/SKILL.md