Guide · Agent skill
How to use the ARIA Command Name Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The ARIA Command Name Checker is an agent skill, a folder of written instructions that an AI coding agent such as Claude loads when it needs them. This skill tells the agent to review web markup and interactive components for buttons, links and menu items that have no label a screen reader user can hear. After this guide you will know how to install the skill, how to ask for a review in plain language, and what the agent will and will not do.
ARIA Command Name Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the aria-command-name ZIP from this page and unzip it. The folder should contain SKILL.md and references/rule.md.
- 2Place the folder. Move it to ~/.claude/skills/ for all projects, or to .claude/skills/ inside one project.
- 3Or upload it in the apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Ask for a review. Describe the page or component you want checked and include its markup or source files.
- 5Read the findings. Check each flagged control for a missing or unclear accessible name and the suggested fix.
- 6Verify the fix. Confirm the change with a browser accessibility tool or assistive technology.
What the skill makes the agent do
Without an accessible name, a screen reader announces only the role of a control, such as 'button', and the user cannot tell what it does. The skill directs the agent to find command elements (buttons, links and menu items) that lack a clear accessible name.
When it finds a problem, the agent checks native HTML semantics first, then suggests a fix using inner text, aria-label, or aria-labelledby. The skill's own description also covers keyboard behavior, focus flow and screen-reader output where relevant.
- Flags buttons, links and menu items with no usable name, such as icon-only controls with no label
- Recommends a fix using text content, aria-label or aria-labelledby
- Explains why a missing name matters to screen reader users
- The skill is written review instructions; it does not run tests on a site
Install the aria-command-name skill
Download the ZIP for this skill from this page and unzip it. The folder contains SKILL.md and references/rule.md. Place the folder in one of these locations:
For all your projects, put it in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/aria-command-name/
- Project install: .claude/skills/aria-command-name/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with natural requests
The skill is meant to be picked up when you ask for a review of rendered HTML, interactive components or design-system patterns. You do not need a special command. Describe what you want checked and include the markup or the component files.
Be specific about scope. A request that names a page, a component or a set of files gives the agent something concrete to read.
- Review this navbar for buttons and links that screen reader users cannot identify
- Check the icon-only toolbar in components/Toolbar.tsx for missing accessible names
- Audit our design-system dialog and menu components for unlabeled controls
- Look at this rendered HTML and tell me which menu items need labels
Examples of what the agent flags and fixes
The reference guide shows the pattern the skill applies. Text inside a button gives it a name. An icon-only button needs an aria-label. A button that contains only an icon with no label has no name and is flagged.
<!-- Correct: name from text content -->
<button>Submit Form</button>
<!-- Correct: name from aria-label on an icon button -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Incorrect: no accessible name -->
<button>
<i class="fa fa-trash"></i>
</button>What the skill needs and its safety notes
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads the material you give it and writes review output.
Because the skill relies on the agent reading markup rather than running a testing tool, its findings are only as complete as the code you provide. Verify fixes in a browser's accessibility tools or with assistive technology.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Tips for better reviews
Give the agent the rendered markup or the component source, not only a description. Icon buttons, menu items and links are the most common gaps, so name those areas explicitly.
- Include the component's states (open menu, open dialog) when they change what is rendered
- Ask the agent to check native semantics first if you want the simplest fix
- Use the output as a checklist, then confirm with a browser accessibility tool or a screen reader
What people use it for
- Reviewing a navigation bar for icon-only links that have no label
- Auditing a design-system dialog or menu for unnamed buttons and menu items
- Preparing the component section of an accessibility audit before running a manual test pass
Frequently asked questions
How do I install the aria-command-name skill?
Download the ZIP from this page and unzip it. Put the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it in the Claude apps under Settings → Capabilities → Skills.
Does this skill need anything else installed?
The source lists no requirements. It runs no scripts and uses no network access.
Is the aria-command-name skill free?
The skill is published under the MIT licence. The source does not mention pricing.
Can it run an automated accessibility scan on my site?
No. The skill relies on the agent reading markup and does not run a testing tool on a site. Use a browser accessibility tool or assistive technology to verify results.
When should I use aria-label instead of visible text?
Use visible text inside the element when it exists, as in a button labelled Submit Form. Use aria-label for icon-only controls such as a close button with an SVG icon, as the reference example shows.
What is the difference between aria-label and aria-labelledby?
The source names both as ways to provide an accessible name but does not compare them in detail. aria-label sets the name directly in the attribute, while aria-labelledby points to another element that holds the label text.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers, designers and QA reviewers who want an agent to check buttons, links and menu items for missing accessible names. It is not a replacement for an automated scanning tool or for non-web projects without rendered HTML, so pick a dedicated testing tool if you need full automated coverage.
Download the skill