Skip to content
Get packs

Accessible Form Input Names

Checks that form fields have proper labels so screen reader and voice control users can identify them

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: every text box, dropdown, and similar form field needs a name that assistive technology can read aloud. When installed, the agent reviews HTML it is given, flags inputs that rely only on placeholder text or have no label, and proposes fixes such as linking a visible label, adding an aria-label, or using aria-labelledby. It also explains why each fix matters for screen reader and voice control users.

Great for

  • Front-end developers reviewing forms for accessibility before release
  • Designers or QA staff checking that form markup meets WCAG 2.1 expectations
  • Teams learning why placeholder text is not a substitute for labels

Skip it if

  • Projects that need automated scanning of a whole site; this skill only guides the agent's manual review of markup and does not run an audit tool
  • Non-web interfaces or native apps, since the guidance is specific to HTML and ARIA roles

Try asking

  • “Check this login form HTML for inputs that lack accessible names and suggest fixes”
  • “Review our checkout page markup for label and aria-labelledby issues”
  • “Why does my search box need an aria-label even though it has placeholder text?”
  • “Audit the custom combobox and spinbutton widgets in this component for missing names”
Step-by-step guide: how to use Accessible Form Input 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-input-field-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-input-field-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 component code rather than only a description, so the agent can check actual id, for and aria attributes.
  • Ask for the fix in the framework you use (React, Vue, plain HTML); the skill points to references/rule.md for framework-specific examples.
  • Verify the agent's findings with a browser accessibility inspector or a screen reader, since the skill itself does not test markup.

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.