Guide · Agent skill
How to use the Accessible Form Input Names agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-input-field-name skill is a set of instructions that teaches an AI agent one accessibility rule: every text box, dropdown and similar form field needs a name that assistive technology can read aloud. This guide is for front-end developers, designers and QA staff who want the agent to review form HTML for that problem. After reading, you will know how to install the skill, how to ask for a review in plain language, and what the agent will and will not do.
Accessible Form Input Namesthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from this page. It contains SKILL.md and references/rule.md.
- 2Unzip into the skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Paste your form markup. Share the HTML for the form or component you want reviewed.
- 5Ask for a labelling review. Request a check for inputs with no label or with placeholder-only labelling.
- 6Apply and verify the fixes. Add labels or ARIA attributes as proposed, then confirm with browser accessibility tools or a screen reader.
What the skill makes the agent do
When the skill is active, the agent reviews the HTML you give it for form fields. It applies to every input except type=hidden, plus textarea, select, and custom widgets that use role=textbox, role=combobox, role=spinbutton, role=searchbox or role=listbox.
The agent checks whether each field has a name a screen reader can announce. It flags fields 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.
- Flags inputs with no label, or with placeholder text as the only label
- Proposes a label with matching for/id, an aria-label, or an aria-labelledby reference
- Explains the impact on screen reader users (for example, VoiceOver reading only 'text field') and voice control users (Dragon NaturallySpeaking)
Install the skill from the ZIP download
Download the ZIP for this skill from this page. The skill contains two files: SKILL.md and references/rule.md.
For a personal install, unzip the download into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. Paste your markup and ask in plain words. The skill is written to activate when you ask about form fields, labels, or accessible names on the elements listed above.
Be specific about the scope. Tell the agent which file or component to review and whether you want fixes or only a list of problems.
- "Review this signup form for inputs that lack accessible names."
- "Check this search bar and select menu for labelling problems and suggest fixes."
- "Why does this field need a label if it already has placeholder text?"
Example: a labelling fix
Suppose the agent sees an email field with only a placeholder. Its likely recommendation is to add a visible label linked by matching for and id attributes, which the source describes as the most robust method. The placeholder can stay as a hint about the expected format, but not as the label.
For a standalone search box where a visible label is impractical, the source suggests aria-label. If the label text already exists elsewhere on the page, aria-labelledby can point to that element's id.
<label for="email-address">Email Address</label>
<input type="email" id="email-address" name="email" autocomplete="email">What the skill needs and what it does not do
The skill lists no requirements. It does not run scripts and does not use the network. It is a set of written instructions, so the agent works only from the markup you provide.
It is a manual review aid. It does not run an audit tool or scan a whole site. For that, use a dedicated automated checker alongside this skill. It is also specific to HTML and ARIA, so it does not cover native apps or non-web interfaces.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Not for automated whole-site scanning or native apps
Tips for better results
Give the agent the rendered markup where you can, including any custom widgets. The skill's guidance says to review rendered markup and interactive states, so a snippet with dynamic components may need more context.
After applying a fix, verify it with browser accessibility tooling or a screen reader, as the skill itself suggests.
- Paste complete form sections, not single fields, so the agent can check label associations
- Ask for the reason behind each fix if you are learning the rule
- Check the result with browser accessibility tools or an assistive technology
What people use it for
- Reviewing a signup or checkout form before release for missing field names
- Checking that a site search box and filter dropdowns have readable names
- Teaching a team why placeholder text cannot replace a visible label
- Auditing custom combobox or spinbutton widgets built with ARIA roles
Frequently asked questions
Is the aria-input-field-name skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms.
What do I need to install it?
The skill lists no requirements. It runs no scripts and uses no network. You only need a way to unzip the download and place it in the skills folder or upload it in the Claude apps.
Where do I put the skill folder?
Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder to limit it to that project. In the Claude apps, upload it under Settings → Capabilities → Skills.
Why does my agent say placeholder text is not a label?
Placeholder text disappears when the user types and is not reliably announced by screen readers. The skill treats it as a format hint only, and recommends a real label linked with for and id.
Does this skill scan my whole website?
No. It guides the agent's manual review of the markup you provide and does not run an audit tool. Use an automated checker for site-wide scanning.
How does this compare with an automated accessibility checker?
This skill explains the rule and reviews markup by hand, including why each fix matters. Automated tools cover broader scanning, so the two work well together rather than replacing each other.
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
Use this skill if you are a front-end developer, designer or QA reviewer who wants an agent to check form markup for accessible names and explain the fixes. Pick a different tool if you need automated scanning of a whole site or are working on native apps, since this guidance covers only HTML and ARIA roles.
Download the skill