| name | optimizing-form-accessibility |
| description | Use when optimizing forms for keyboard navigation, focus management, or accessibility. Triggers on login pages, signup forms, checkout flows, or any form where tab order and focus behavior need improvement. |
| metadata | {"author":"moto-nrw","version":"1.0.0"} |
Optimizing Form Accessibility
Optimize forms for keyboard navigation and accessibility using current best practices.
How It Works
- Fetch current accessibility guidelines from authoritative sources
- Search for framework-specific patterns (React, Vue, Angular, etc.)
- Read the form code to optimize
- Apply fixes based on fetched guidelines
- Verify with project's quality checks
Guidelines Sources
Always fetch fresh guidelines before making changes:
Primary Source
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch with prompt: "Extract all rules related to forms, keyboard navigation, focus management, and accessibility"
Framework-Specific Search
WebSearch: "[framework] form autofocus tabindex keyboard navigation accessibility [current year]"
Replace [framework] with the project's framework (React, Next.js, Vue, etc.)
Reference Sources
- MDN Accessibility:
developer.mozilla.org/en-US/docs/Web/Accessibility
- web.dev Focus:
web.dev/control-focus-with-tabindex/
Usage
When a user reports form accessibility issues:
- Fetch current guidelines using WebFetch on the primary source
- Search for framework-specific patterns using WebSearch with current year
- Read the form files the user wants to optimize
- Apply fixes based on the fetched guidelines (not hardcoded rules)
- Verify using project's lint/typecheck commands
Why Dynamic?
Web accessibility standards evolve:
- CSS pseudo-classes change (
:focus → :focus-visible)
- Framework patterns update (React 19, Next.js 15+)
- Browser support improves
Never rely on cached knowledge - always fetch current guidelines.
