Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/aria-roles
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use valid ARIA role values. 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 20 of 22 without it.
2 fixed18 passed either way0 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
We have a settings panel toggle component coded as `<div role="toggle-switch" aria-checked="false">Notifications</div>`. Point out the error in the role attribute and recommend the fix.
| Checked | Without skill | With skill |
|---|---|---|
| Flags `toggle-switch` as an unstandardized ARIA role value. | Passed | Passed |
| Recommends replacing the custom container with a native HTML `<input type="checkbox">` element. | Missed | Passed |
The instructions your model reads when the skill loads.
Invalid or misspelled ARIA roles are ignored by browsers and assistive technologies, rendering the intended accessibility features useless and potentially confusing users.
checkbox, not check-box)Search for any role attributes that use non-standard or misspelled ARIA role values.
Replace invalid ARIA roles with the correct, standard values from the WAI-ARIA specification. When a native <button>, <input>, <select>, or other semantic element can replace the custom widget, prefer that change over adding more ARIA.
Explain why using standardized ARIA roles is critical for ensuring that assistive technologies can interpret and announce elements correctly, and why native HTML controls are usually more reliable than recreating them with ARIA.
Review the rendered markup and interactive states that affect Use valid ARIA role values. 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-roles
test cases passed, vs 20 / 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.