How to use the Accessible tree item names agent skill

What the skill makes the agent do

Tree widgets show hierarchical data, and screen readers announce each focused treeitem's name, level and position. If a treeitem has an empty or generic name such as 'folder' or 'item', a blind user cannot tell the nodes apart or move through the hierarchy with confidence.

When this skill is active, the agent reviews front-end markup against the rule. It checks that every element with role='treeitem' has a non-empty accessible name, that expandable items carry aria-expanded set to 'true' or 'false', and it suggests fixes such as adding aria-label or aria-labelledby.

• Finds all elements with role='treeitem' and works out each accessible name (aria-labelledby first, then aria-label, then visible text).
• Flags treeitems with empty or whitespace-only names.
• Checks that items with children expose aria-expanded.
• Suggests fixes; the skill is a checklist for reviewing and fixing markup, not a tool that changes files on its own.

Install the skill from the ZIP

Download the ZIP for this skill from the page where you found it. The skill folder contains two files: SKILL.md and references/rule.md.

For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder instead.

If you use the Claude apps, you can upload the skill instead. Go to Settings, then Capabilities, then Skills, and upload it there.

• Personal: ~/.claude/skills/
• Project: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. Describe the task in plain language when you are working on a tree, file explorer, nested menu or org chart component. The skill's description says it applies to custom tree widgets built with role='tree', role='treeitem' and role='group'.

Name the file or component and say what you want checked, so the agent knows where to look.

• Review TreeView.tsx for treeitem accessible names and fix any that are empty.
• Check whether the expandable items in our sidebar navigation expose aria-expanded.
• Audit the file explorer markup for treeitem naming problems and suggest aria-label fixes.
• Add accessible names to the org chart nodes that use role='treeitem'.

Examples of what the agent will look for

The reference file shows a tree with role='tree' and aria-label on the root, a 'src' item with aria-expanded='true' and nested role='group' children, and leaf items named by their text. Items that need extra context get an aria-label, such as a file name with its file type.

• Good: <li role='treeitem' aria-expanded='true' aria-level='1'>src</li> with descriptive child names.
• Fix for an icon-only item: add aria-label='Descriptive name' so the item has a name.
• Fix for multi-part items (filename plus file size): point aria-labelledby at the most descriptive element's id.

What you need before you start

The source does not list any required tools or packages for this skill. You need a front-end codebase that uses ARIA tree roles, and access to the rendered markup or source files the agent should review.

The skill does not run scripts and does not use the network. To verify fixes, you still need browser accessibility tooling or assistive technology such as NVDA or VoiceOver.

Safety notes and limits

The skill runs no scripts and makes no network calls, according to its metadata. It works from the markup you give it.

Its scope is narrow. It covers treeitem names and expanded state only. It is not a full accessibility audit and does not replace testing with real assistive technology.

• Runs scripts: no
• Uses network: no
• Covers treeitem names and aria-expanded only

Tips for getting better results

Give the agent the rendered markup or the component source, not just a description. Ask it to explain which accessible name it computed for each item, so you can check its reasoning.

Use the skill for code review, and keep a manual check with a screen reader before release. Items that are not tree widgets, such as standard lists or details/summary, are outside this pattern.

• Include the component file and any CSS that hides text, since hidden text can affect names.
• Ask for a before-and-after diff so you can review each change.
• Do not use it for native HTML elements such as standard lists or details/summary.