--- name: a11y-guide description: Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing. Use when building accessible components or reviewing accessibility, "无障碍", "可访问性", "a11y", "ARIA", "键盘导航", "屏幕阅读器", "对比度". --- # 无障碍设计规范 Mobazha 项目的 WCAG 2.1 AA 无障碍标准和最佳实践。 ## 一、色彩对比度 ### WCAG AA 最低要求 | 内容类型 | 最低对比度 | 说明 | | --------------------------------- | ---------- | -------------------------- | | 正文（< 18px） | **4.5:1** | 正文、描述、标签 | | 大文字（>= 18px bold 或 >= 24px） | **3:1** | 标题、大号文字 | | UI 控件和图形 | **3:1** | 按钮边框、图标、输入框边框 | | 装饰性元素 | 无要求 | 纯装饰、已禁用控件 | ### 项目注意事项 ```tsx // ✅ 好：muted-foreground 在大多数主题下对比度足够

辅助文字

// ⚠️ 注意：透明度过低可能不满足对比度

这可能对比度不够

// → 改为 text-muted-foreground/70 或测试实际对比度 // ❌ 差：浅色背景上的浅色文字

这几乎看不清

``` ### 验证工具 - 浏览器 DevTools → Accessibility 面板 → 对比度比率 - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - axe DevTools 扩展（自动检测） ## 二、媒体查询适配 ### prefers-reduced-motion（必须支持） ```tsx // Tailwind 方式
// ✅ 或使用 sr-only ``` ### 图片 ```tsx // 有信息量的图片 红色运动鞋侧面图 // 纯装饰图片 ``` ## 四、键盘导航 ### 基本要求 - 所有交互元素必须可通过 Tab 聚焦 - 可见的焦点指示器： ```tsx