frontend-accessibility-best-practices

此技能提供了一套为现代 React 开发量身定制的全面无障碍 (a11y) 指南，协助开发人员实现符合网络内容无障碍指南 (WCAG) 标准的包容性界面。该技能涵盖范围广泛，从基本的语义化 HTML 架构到复杂的键盘交互模式，以及如减少动态效果 (reduced motion) 等特定用户偏好。通过整合这些模式，团队能确保其应用程序可供使用屏幕阅读器、纯键盘操作或具有不同运动与认知能力的用户操作。对于前端工程师在组件设计、实现与代码审查阶段，这是不可或缺的工具。

• 实现语义化 HTML 地标 (header, nav, main, footer)，以改善辅助科技的文件结构与导航体验。

• 提供屏幕阅读器支持模式，包括使用 sr-only 类名隐藏文字标签，以及运用 aria-live 区域处理动态内容更新。

• 提供强大的键盘导航指引，专注于组件交互性、焦点管理 (focus management)、模态窗口 (modals) 的焦点捕获，以及使用 focus-visible 的视觉指示。

• 包含针对 prefers-reduced-motion 的用户偏好处理，通过停用或简化装饰性动画来减轻前庭障碍用户的负担。

• 确保触控目标符合性，强制执行最小尺寸需求 (如 44x44px)，以支持运动障碍用户或移动设备用户。

• 专为 JavaScript 生态系中的 React 开发人员、无障碍审核员与 UI 设计师所设计。

• 最适合在组件架构阶段或重构现有 UI 交互组件时应用。

• 强调使用如 react-aria-components 等高阶抽象工具，以简化复杂的无障碍状态管理。

• 预期使用方式是在代码审查期间参考特定规则文件，以验证语义正确性与辅助科技兼容性。

• 限制条件包含需与仓库的模块化规则结构保持一致，将每项无障碍原则独立为聚焦且可操作的指引。