Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/autofocus-avoidance
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autofocus on form fields. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Passed 22 of 22 test cases with the skill, and 18 of 22 without it.
and 3 more in the full report
4 fixed18 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
When a user explicitly clicks an 'Edit Address' button, a modal dialog opens. We want to place focus onto the first form input inside the modal using JavaScript after the button click. Is setting focus after this user interaction appropriate?
| Checked | Without skill | With skill |
|---|---|---|
| The response confirms that shifting focus via JavaScript after explicit user interaction is appropriate. | Passed | Passed |
| The response distinguishes post-interaction focus management from automatic page-load focus. | Missed | Passed |
The instructions your model reads when the skill loads.
Autofocus teleports screen reader users to mid-page without context—they miss everything before the form and have no idea where they landed.
Search for autofocus attributes on form elements. Verify that page load does not unexpectedly move focus away from the page top, especially on pages with content before the form.
Remove autofocus attributes from form elements. If focus management is needed, use JavaScript to set focus after user interaction rather than automatically on page load.
Explain how autofocus moves screen reader users to mid-page without context, can trigger unexpected scrolling, and disrupts users who were reading content before the focused element.
Review the rendered markup and interactive states that affect Avoid autofocus on form 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/autofocus-avoidance
test cases passed, vs 18 / 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.