AgentSkillsCN

optimizing-form-accessibility

在优化表单以提升键盘导航、焦点管理或无障碍访问体验时使用。适用于登录页面、注册表单、结账流程，或任何需要改善 Tab 键顺序与焦点行为的表单。

SKILL.md
--- frontmatter
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

  1. •Fetch current accessibility guidelines from authoritative sources
  2. •Search for framework-specific patterns (React, Vue, Angular, etc.)
  3. •Read the form code to optimize
  4. •Apply fixes based on fetched guidelines
  5. •Verify with project's quality checks

Guidelines Sources

Always fetch fresh guidelines before making changes:

Primary Source

code
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

code
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:

  1. •Fetch current guidelines using WebFetch on the primary source
  2. •Search for framework-specific patterns using WebSearch with current year
  3. •Read the form files the user wants to optimize
  4. •Apply fixes based on the fetched guidelines (not hardcoded rules)
  5. •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.