AgentSkillsCN

Accessibility

无障碍访问

SKILL.md

React Accessibility Skill

Purpose

Enable Copilot to design, review, and refactor this React skill pack so that it consistently meets or exceeds WCAG 2.2 AA requirements across pages, components, and flows.

Capabilities

  • •Audit JSX and HTML for semantic structure, landmark usage, and proper heading hierarchy.
  • •Recommend and apply appropriate ARIA roles, properties, and states only when semantic HTML is insufficient.
  • •Review and improve keyboard accessibility (tab order, focus visibility, focus trapping in modals, escape/enter/space behavior).
  • •Ensure interactive components (Button, Modal, future components) expose accessible names, roles, and states.
  • •Integrate and recommend testing strategies (e.g. Jest + Testing Library + axe) to catch regressions.
  • •Align designs with the existing design tokens (color, spacing, typography, radius) to maintain sufficient contrast and touch targets.
  • •Provide guidance on accessible error messages, validation, and status announcements.
  • •Interactively validate accessibility in a live browser using MCP Playwright tools such as mcp_microsoft_pla_browser_click, mcp_microsoft_pla_browser_type, mcp_microsoft_pla_browser_hover, mcp_microsoft_pla_browser_wait_for, and mcp_microsoft_pla_browser_snapshot to confirm real user flows and focus behavior.
  • •Fetch up-to-date accessibility and framework guidance via Context7 tools (mcp_context7_resolve-library-id, mcp_context7_get-library-docs from the io.github.upstash/context7 server) before recommending ARIA patterns or library-specific a11y APIs.

Constraints

  • •Follow WCAG 2.2 AA as the baseline standard.
  • •Prefer semantic HTML elements (button, nav, main, section, header, footer) before introducing ARIA.
  • •Do not introduce visual-only cues that are not backed by text, icons with labels, or programmatic names.
  • •Avoid patterns that break keyboard navigation (e.g. tabIndex misuse, click-only handlers without keyboard equivalents).
  • •Keep implementations aligned with the project’s TypeScript and CSS Modules setup.

Principles

  • •Perceivable: Text, icons, and controls must be visible under the design tokens, including in high-contrast scenarios.
  • •Operable: Every interactive element must be fully usable via keyboard and accessible technology.
  • •Understandable: Component APIs and on-screen labels should be clear, consistent, and predictable.
  • •Robust: Markup should work well across assistive technologies and user agents.

Example Focus Areas in This Repo

  • •Home page layout and structure in src/app/layout.tsx and src/app/page.tsx.
  • •Button and Modal behavior and markup in src/components/Button and src/components/Modal.
  • •Future components and pages that reuse the design tokens in design-system/tokens.