Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/aria-toggle-field-name
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for toggle fields. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Passed 20 of 22 test cases with the skill, and 4 of 22 without it.
and 13 more in the full report
16 fixed4 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 16 test cases the skill fixed. Same model, same prompt, with and without the skill.
I have a React component with a few custom switch components and checkboxes that currently just use standard div and input tags without any text directly attached to them. Can you audit this code for accessibility and then rewrite the snippet to resolve any issues with how these inputs are identified by screen readers?
| Checked | Without skill | With skill |
|---|---|---|
| Applies an accessible name to the toggle fields using aria-label, aria-labelledby, or a label element | Passed | Passed |
| Mentions a specific screen reader (e.g., "VoiceOver", "NVDA", "JAWS") or browser tool (e.g., "Accessibility Tree") for testing | Missed | Passed |
The instructions your model reads when the skill loads.
Toggle fields like checkboxes and switches are unusable for screen reader users if they don't have a label, as the user won't know what they are turning on or off.
aria-label, aria-labelledby, or <label> for checkboxes and radiosCheck all toggle fields (checkboxes, radio buttons, switches) for a valid accessible name.
Add an accessible name to the toggle field using a label element, aria-label, or aria-labelledby.
Explain why all interactive toggle controls must have descriptive names for users to understand their purpose.
Review the rendered markup and interactive states that affect Provide accessible names for toggle fields. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name
test cases passed, vs 4 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.