Accessible Toggle Field Names
Reviews checkboxes, radios and switches to ensure each has a descriptive accessible name.
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
When installed, the agent checks rendered HTML and interactive components for toggle controls such as checkboxes, radio buttons and switches, and confirms each has an accessible name (a label a screen reader can announce). It flags toggles that are missing labels or have vague ones, and suggests fixes using a label element, aria-label, or aria-labelledby. It also points to keyboard and focus behaviour and how to verify the fix with browser accessibility tools.
Great for
- Front-end developers reviewing forms or component libraries for accessibility
- Designers and QA reviewers auditing interactive controls before release
- Teams following the Front-End Checklist accessibility rules
Skip it if
- Projects that do not use HTML toggle controls, since the guidance would not apply
- Replacing real testing with assistive technology: the skill reviews markup by reading it and cannot confirm how a specific screen reader behaves
Try asking
- “Review this login form HTML and tell me if any checkboxes lack accessible names”
- “Check my settings page switches for labels a screen reader user could understand”
- “Suggest the right aria-labelledby fix for these radio buttons in my React component”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
aria-toggle-field-name.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip aria-toggle-field-name.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip aria-toggle-field-name.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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 markup or component code along with the toggle, not just a description, so the review is specific.
- Ask the agent to name the exact elements and roles it flags, then verify the fix with a browser accessibility inspector.
- Pair the review with keyboard and screen reader testing, since the skill's guidance is based on markup reading.
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.