Skip to content
Get packs

Accessible tree item names

Checks that custom tree widgets give every treeitem a clear, screen-reader-friendly name.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches the agent an accessibility rule for custom tree widgets such as file explorers, nested menus and org charts. When reviewing front-end code, the agent checks that every element marked role='treeitem' has a meaningful name, that expandable items report expanded or collapsed state, and it suggests fixes like adding aria-label or aria-labelledby. It is a checklist-style guide for reviewing and fixing markup, not a tool that changes files on its own.

Great for

  • Front-end developers building custom tree or file-explorer components
  • Accessibility reviewers auditing navigation menus that use ARIA tree roles
  • Teams wanting a consistent checklist for treeitem naming during code review

Skip it if

  • Sites using native HTML elements such as standard lists or details/summary, where this ARIA pattern does not apply
  • Anyone expecting a full accessibility audit; the skill covers only treeitem names and expanded state, and does not replace testing with real assistive technology

Try asking

  • “Review my file explorer component for accessible treeitem names”
  • “Check whether my nested navigation uses aria-expanded correctly on each treeitem”
  • “Suggest aria-label or aria-labelledby fixes for icon-only tree items”
Step-by-step guide: how to use Accessible tree item namesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    aria-treeitem-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-treeitem-name.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-treeitem-name.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste or point the agent at the rendered markup or component source so it can check real role and name values.
  • Ask it to explain how to verify fixes with browser accessibility tools or a screen reader such as NVDA or VoiceOver, since the agent cannot run those itself.
  • Pair it with other accessibility skills for broader coverage, because this one addresses only treeitem naming and expanded state.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.