Skip to content
Get packs

Single Label Form Field Check

Reviews forms so each input has exactly one label, with accessible names verified

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 for web forms: each form input should be tied to exactly one label element. When reviewing HTML or components, the agent searches for inputs with multiple labels, suggests merging them into one label or using aria-labelledby to combine text, and explains how this helps screen reader and voice control users. It is a checklist-style review guide rather than a tool that changes files on its own.

Great for

  • Front-end developers reviewing form markup for accessibility problems
  • Designers or QA staff checking form components before release
  • Teams learning the basics of accessible form labelling

Skip it if

  • Projects that need full WCAG audits, since this covers only one narrow rule (the agent may miss other issues)
  • Sites without forms, where the rule does not apply

Try asking

  • “Review this login form HTML and check whether any input has more than one label”
  • “Does my date-of-birth field have duplicate labels that confuse screen readers?”
  • “Explain how to fix a form field that is labelled by two separate text elements”
Step-by-step guide: how to use Single Label Form Field CheckInstall, 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.

    form-field-multiple-labels.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip form-field-multiple-labels.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip form-field-multiple-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 inspect the actual label associations.
  • Still test with a browser accessibility inspector or a screen reader, since the agent's review is based on reading markup rather than running it.
  • Ask for the review to cover keyboard behaviour and focus flow too, as the skill suggests checking these where relevant.

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.