Guide · Agent skill
How to use the Button accessible names checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The button-name skill is a checklist-style guide that teaches an AI agent one accessibility rule: every button needs a descriptive name that screen readers can announce. It is written for front-end developers, designers, and QA staff who review markup or components before shipping. After following this guide you will know how to install the skill, ask the agent to review your HTML for unlabeled buttons, and read the fixes it suggests.
Button accessible names checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the button-name skill ZIP from the skill page on this site.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill there instead.
- 4Ask for a review in plain language. Paste your HTML or component code and ask the agent to check button names for screen reader users.
- 5Apply and verify the fixes. Add text, an aria-label, or an aria-labelledby reference as suggested, then check the result with browser accessibility tools or assistive technology.
What the button-name skill makes the agent do
Screen readers announce a button without a name simply as 'button', so a user cannot tell what it will do. The skill makes the agent check rendered HTML and interactive components for buttons that lack descriptive text or an accessible label.
When it finds a problem, the agent flags the element and suggests a fix using visible text content, an aria-label, or an aria-labelledby reference. If a button actually navigates to another URL, the skill points out that a link is the better element.
The skill is a review guide. It is not a tool that changes your files on its own, and it covers only this one rule about button names.
- Flags buttons with no text or label, including icon-only buttons
- Suggests aria-label or aria-labelledby fixes
- Points out buttons that should be links for navigation
- Checks native semantics first, then keyboard behavior, focus flow, and screen reader output where relevant
Install the button-name skill
Download the ZIP for the skill from our page. Unzip it into one of these locations, depending on how you want to use it:
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal use across projects: unzip into ~/.claude/skills/
- One project only: unzip into the project's .claude/skills/ folder
- Claude apps: upload the skill under Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be used when you ask the agent to review rendered HTML, interactive components, or design-system patterns. Describe what you want checked in plain language and include the markup or component code.
Good requests name the goal, such as checking for icon-only buttons or confirming that a control is announced correctly. The more specific the request, the easier it is to act on the result.
- 'Review this modal for buttons a screen reader user could not identify.'
- 'Check this page's buttons for missing accessible names and suggest fixes.'
- 'Is this icon button labelled correctly? Should it be a link instead?'
Read the fixes the agent suggests
The source rule shows three accepted patterns. Visible text is the simplest. An aria-label works for icon-only buttons. An aria-labelledby reference points to text that already exists on the page.
The example below comes from the rule reference. The first button has an icon and no label, so the agent flags it. The second adds an aria-label to fix it.
- Verify fixes with browser accessibility tooling or assistive technology, as the skill suggests.
<!-- ❌ Bad: Icon button with no text or label -->
<button>
<i class="fa fa-trash"></i>
</button>
<!-- ✅ Good: Icon button with aria-label -->
<button aria-label="Close modal">
<svg>...</svg>
</button>Limits to keep in mind
The skill reads markup rather than running the page, so it cannot test how real assistive technology behaves. It also does not cover other accessibility rules. For a full audit, use this skill alongside other checks and real screen reader testing.
It applies to web HTML and ARIA. It does not fit native mobile apps or non-web projects.
- Not a full accessibility audit
- Does not run the page or test real assistive technology
- Not for native mobile apps or non-web projects
Safety notes and requirements
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. Because it is a text guide, it reviews the code you give it and does not change your files by itself.
The skill is licensed under MIT.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
What people use it for
- Reviewing a modal or dialog to confirm that close, delete, and menu buttons have names
- Checking a design-system component library for icon-only buttons before release
- Auditing an existing site for common icon-only button gaps and deciding which controls should be links
Frequently asked questions
How do I install the button-name agent skill?
Download the ZIP from the skill page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the button-name skill need anything else installed?
The skill's listing shows no requirements. It does not run scripts and does not use the network.
Is the button-name skill free?
The skill is licensed under MIT, according to its listing. Check the licence file in the repository for the full terms.
Can the skill fix my buttons automatically?
No. It is a checklist-style review guide that flags problems and suggests fixes. It does not change your files on its own.
Does this skill replace a full accessibility audit?
No. It covers only the rule that buttons need accessible names. It reads markup and does not test real assistive technology, so use it alongside other checks.
When should I use a link instead of a button?
Use a link when the element navigates to another URL, and use a button for actions and state changes. The skill recommends replacing a button that navigates with a link.
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 staff who want a focused check on button names before shipping a page or component. Skip it if you need a full accessibility audit, a test of real screen reader behavior, or guidance for native mobile apps.
Download the skill