Guide · Agent skill
How to use the Accessible Toggle Field Names agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-toggle-field-name skill is an agent skill that teaches an AI agent to review toggle controls such as checkboxes, radio buttons and switches, and confirm that each one has an accessible name. It is useful for front-end developers, designers and QA reviewers who want a second pair of eyes on forms and component libraries. After this guide you will know what the skill does, how to install it, how to ask for a review in plain language, and what to check in its output.
Accessible Toggle Field Namesthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from the page where you found this guide.
- 2Unzip the skill folder. Extract the archive so the aria-toggle-field-name folder with SKILL.md and references/rule.md is in place.
- 3Choose the install location. Put it in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ folder to limit it to one project.
- 4Or upload it in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the skill.
- 5Make a review request. Describe the task in plain language and include the HTML or component code with its toggles.
- 6Check the findings. Read each flagged element, label and suggested fix against your own design and content.
- 7Verify with real tools. Confirm each fix with browser accessibility tools and assistive technology before release.
What is an agent skill, and what does this one do?
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This skill's description says it applies when reviewing rendered HTML, interactive components, or design-system patterns related to providing accessible names for toggle fields.
Toggle fields are unusable for screen reader users if they have no label, because the user cannot tell what they are switching on or off. When installed, the agent checks checkboxes, radio buttons and switches for a valid accessible name, which is a label a screen reader can announce.
- Flags toggles that are missing labels or have vague or non-descriptive labels
- Suggests fixes using a label element, aria-label, or aria-labelledby
- Checks native semantics first, then points to keyboard behaviour, focus flow and screen-reader output where relevant
- Explains how to verify the fix with browser accessibility tools
Install the skill from the ZIP download
Download the ZIP for this skill from the page where you found this guide. Unzip it so that the skill folder sits inside one of the following locations, depending on how you want to use it.
For a personal setup available across your projects, place it in ~/.claude/skills/. To limit it to a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps instead, you can upload the skill under Settings, then Capabilities, then Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with a natural request
You do not need a special command. The agent decides to use the skill when your request matches its description, so describe the job the way you would to a colleague. Mention toggles, forms, checkboxes, radios, switches or the component you are reviewing, and say you want an accessibility review.
Pasting rendered HTML or pointing the agent at a component file gives it the material it needs to check. The skill's guidance is about reading markup, so the more of the relevant markup you provide, the more specific the review can be.
- Review this signup form's checkboxes and radio buttons for accessible names.
- Check these switch components in our design system for missing or vague labels.
- Audit this settings page's toggles before release and suggest fixes.
Examples of what a review looks like
The reference material for this skill shows three correct patterns: a checkbox with a label element linked by the for attribute, a role="switch" button named with aria-labelledby, and a radio button named with aria-label. A review measures your markup against these patterns.
A typical finding is a switch with the visible text Off and no name, which tells a screen reader nothing about what it controls. The suggested fix is to add a visible label and connect it, as the source example does.
<label for="newsletter">Subscribe to newsletter</label> <input type="checkbox" id="newsletter" name="newsletter">What the skill needs and how it runs
This skill lists no required tools or dependencies. It does not run scripts and does not use the network. Its files are SKILL.md, which holds the instructions, and references/rule.md, which holds the fuller examples and rationale.
Because the skill reads and reasons about markup, it cannot confirm how a particular screen reader or browser behaves. Treat its output as a careful code review, not as a substitute for testing with real assistive technology.
- Required dependencies: none listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for getting useful results
Give the agent complete context for each toggle, including its visible text and surrounding heading, so it can judge whether a label is descriptive. Ask it to verify fixes with browser accessibility tooling, since the skill points to that step. Finally, run the changed page through assistive technology yourself before release.
- Include the surrounding markup, not just the input element
- Ask for exact elements and labels that violate the rule
- Re-run the review after applying fixes to confirm the names are present
What people use it for
- Auditing a signup or checkout form for unlabelled checkboxes before release
- Reviewing a design-system switch component so every instance has a descriptive name
- Checking radio button groups in a settings page for clear, specific labels
- Giving QA reviewers a consistent checklist for interactive controls
Frequently asked questions
How do I install the aria-toggle-field-name skill?
Download the ZIP from the page where you found this guide and unzip it. Place the folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Is the aria-toggle-field-name skill free?
The skill is released under the MIT licence, as stated on its page. The source does not list any price, so check the download page for any terms that apply to your use.
What does the skill need to run?
The source lists no required dependencies. It does not run scripts and does not use the network, so it only reads the markup you give it.
Does the skill test my page with a screen reader?
No. The skill reviews markup by reading it and cannot confirm how a specific screen reader behaves. Verify fixes with browser accessibility tools and real assistive technology.
Which toggle controls does the skill check?
It checks toggle controls such as checkboxes, radio buttons and switches, and confirms each has an accessible name.
Can I use this skill if my project has no HTML toggles?
Probably not usefully. The skill's guidance applies to HTML toggle controls, so projects that do not use them will not get relevant results.
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
This skill suits front-end developers, designers and QA reviewers who want a consistent check that checkboxes, radios and switches have clear accessible names. It is a review aid that reads markup, so pick a different approach if you need the page tested with live assistive technology, or if your project has no HTML toggle controls.
Download the skill