Skip to content
Get packs

Accessible Names Checker

Reviews interactive elements so buttons and links have clear, descriptive accessible names.

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

What it does

When installed, the agent reviews web page markup and components to find buttons, links, and other controls that lack a clear name that screen readers and other assistive tools can announce. It flags vague labels like 'Click Here' or 'More', suggests native HTML fixes first, and then recommends descriptive text or aria-label attributes where needed. It also explains why clear labels help all users, not just those with disabilities.

Great for

  • Front-end developers reviewing components or pages for accessibility issues
  • Design-system teams checking that shared interactive patterns are labelled properly
  • Developers preparing for an accessibility audit

Skip it if

  • Non-web projects, since the guidance is about rendered HTML and interactive web components
  • Full compliance audits that need certified testing, because the skill gives guidance from written rules and does not replace testing with real assistive technology

Try asking

  • “Review this login form HTML and tell me which buttons and inputs need better accessible names.”
  • “Check my React navigation component for links or icon buttons without labels.”
  • “Explain why 'Click Here' links are a problem and rewrite these three examples.”
Step-by-step guide: how to use 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.

    aria-labels.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-labels.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 component code, not just a description, so the agent can point to exact elements.
  • Ask the agent to suggest native HTML fixes first, since they are often better than adding aria-label.
  • Verify the suggested fixes afterwards with browser accessibility tools or a screen reader.

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.