Skip to content
Get packs

Button accessible names checker

Reviews buttons so every one has a clear, screen-reader-friendly name and the right semantics.

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

What it does

This skill teaches an AI agent a specific accessibility rule: every button should have a descriptive name that screen readers can announce, such as visible text, an aria-label, or an aria-labelledby reference. When you ask the agent to review HTML or components, it checks for unlabeled or icon-only buttons, suggests fixes, and points out cases where a link would be the better element for navigation. It is a checklist-style review guide, not a tool that changes files on its own.

Great for

  • Front-end developers reviewing markup before shipping a page or component
  • Designers or QA staff checking that interactive controls make sense to screen reader users
  • Teams auditing an existing site for common accessibility gaps with icon-only buttons

Skip it if

  • Full accessibility audits, since this covers only one rule about button names and does not test real assistive technology (reason: it relies on reading markup, not running the page)
  • Non-web projects or native mobile apps, where the HTML and ARIA guidance does not apply

Try asking

  • “Review this HTML for buttons that screen readers would announce without a name”
  • “Check my icon-only toolbar buttons and suggest accessible labels”
  • “Should this element be a button or a link? Here is the markup.”
  • “Audit the buttons in this React component for accessible names and keyboard issues”
Step-by-step guide: how to use Button accessible names checkerInstall, 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.

    button-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip button-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 the rendered HTML or the component code, not just a description, so the agent can point to exact elements.
  • Ask for verification steps too, such as checking with a browser accessibility inspector or a screen reader, since the agent cannot confirm real announcements.
  • Combine with other accessibility skills for broader coverage, because this one only addresses button names.

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.