Back to Details

validating-accessibility

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Validating Accessibility

验证可访问性

Agent Workflow (MANDATORY)

Agent 工作流（必填）

Before ANY accessibility validation, use 
TeamCreate
to spawn 3 agents:
  1. fuse-ai-pilot:explore-codebase - Find components to audit
  2. fuse-ai-pilot:research-expert - Verify latest WCAG 2.2 requirements
  3. Check existing ARIA patterns in codebase
After fixes, run fuse-ai-pilot:sniper for validation.
在进行任何可访问性验证之前，使用
TeamCreate
生成3个Agent：
  1. fuse-ai-pilot:explore-codebase - 查找需审计的组件
  2. fuse-ai-pilot:research-expert - 验证最新的WCAG 2.2要求
  3. 检查代码库中现有的ARIA模式
修复完成后，运行fuse-ai-pilot:sniper进行验证。

Overview

概述

FeatureDescription
WCAG 2.2 AAMinimum compliance level
Color Contrast4.5:1 text, 3:1 UI
KeyboardFull navigation support
ARIAScreen reader support
功能说明
WCAG 2.2 AA最低合规级别
颜色对比度4.5:1（文本），3:1（UI）
键盘导航完整导航支持
ARIA屏幕阅读器支持

Critical Rules

关键规则

  1. 4.5:1 contrast - Normal text minimum
  2. 3:1 contrast - Large text and UI components
  3. Focus visible - All interactive elements
  4. Reduced motion - Respect user preference
  5. Labels required - All form inputs
  1. 4.5:1对比度 - 普通文本的最低要求
  2. 3:1对比度 - 大文本与UI组件的最低要求
  3. 可见焦点 - 所有交互元素均需具备
  4. 减少动画 - 遵循用户的偏好设置
  5. 必填标签 - 所有表单输入项均需添加标签

Quick Checklist

快速检查清单

[ ] Color contrast: 4.5:1 (text), 3:1 (UI)
[ ] Keyboard: All elements focusable
[ ] Focus: Visible indicators (ring-2)
[ ] ARIA: Correct attributes
[ ] Motion: prefers-reduced-motion
[ ] Semantic: Proper heading hierarchy
[ ] Labels: All inputs labeled
[ ] Alt text: All images
[ ] 颜色对比度：4.5:1（文本），3:1（UI）
[ ] 键盘导航：所有元素可获取焦点
[ ] 焦点：可见指示器（如ring-2）
[ ] ARIA：属性设置正确
[ ] 动画：遵循prefers-reduced-motion
[ ] 语义化：正确的标题层级
[ ] 标签：所有输入项均有标签
[ ] 替代文本：所有图片均添加alt文本

Reference Guide

参考指南

Concepts

核心概念

TopicReferenceWhen to Consult
Nielsen Heuristicsux-nielsen.md10 usability heuristics
Laws of UXux-laws.mdCognitive psychology
WCAG 2.2ux-wcag.mdAccessibility standards
UX Patternsux-patterns.mdCommon UX patterns
Buttonsbuttons-guide.mdTouch targets, focus
Formsforms-guide.mdLabels, validation
主题参考文档适用场景
尼尔森启发式原则ux-nielsen.md10条可用性启发式原则相关
UX法则ux-laws.md认知心理学相关
WCAG 2.2ux-wcag.md可访问性标准相关
UX模式ux-patterns.md通用UX模式相关
按钮buttons-guide.md触摸目标、焦点相关
表单forms-guide.md标签、验证相关

Quick Reference

快速参考

Color Contrast

颜色对比度

Normal text (<18px):     4.5:1 minimum
Large text (≥18px):      3:1 minimum
UI components:           3:1 minimum
Normal text (<18px):     4.5:1 minimum
Large text (≥18px):      3:1 minimum
UI components:           3:1 minimum

Focus Indicator

焦点指示器

tsx
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
tsx
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"

Reduced Motion

减少动画

tsx
import { useReducedMotion } from "framer-motion";

const shouldReduce = useReducedMotion();
<motion.div animate={shouldReduce ? {} : { y: 0 }} />
tsx
import { useReducedMotion } from "framer-motion";

const shouldReduce = useReducedMotion();
<motion.div animate={shouldReduce ? {} : { y: 0 }} />

ARIA Patterns

ARIA模式

tsx
// Icon button
<button aria-label="Close">
  <X className="h-4 w-4" />
</button>

// Form with description
<input aria-describedby="hint" />
<p id="hint">Must be 8+ characters</p>
→ See ux-principles.md for complete patterns
tsx
// Icon button
<button aria-label="Close">
  <X className="h-4 w-4" />
</button>

// Form with description
<input aria-describedby="hint" />
<p id="hint">Must be 8+ characters</p>
→ 完整模式请查看ux-principles.md

Best Practices

最佳实践

DO

建议

  • Test with keyboard only
  • Use semantic HTML first
  • Add aria-label to icon buttons
  • Respect reduced motion
  • Test with screen reader
  • 仅使用键盘进行测试
  • 优先使用语义化HTML
  • 为图标按钮添加aria-label
  • 遵循减少动画的用户偏好
  • 使用屏幕阅读器进行测试

DON'T

禁忌

  • Skip focus indicators
  • Use color alone for meaning
  • Forget alt text on images
  • Remove outline without replacement
  • Ignore heading hierarchy
  • 跳过焦点指示器
  • 仅使用颜色传达含义
  • 忘记为图片添加替代文本
  • 移除轮廓而不提供替代方案
  • 忽略标题层级