Back to Details

accessibility-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessibility Review

可访问性评审

Evaluate designs and implementations against WCAG 2.1 AA standards.
依据WCAG 2.1 AA标准评估设计与实现。

WCAG 2.1 AA Quick Reference

WCAG 2.1 AA 快速参考

Perceivable

可感知性

  • 1.1.1 Non-text content has alt text
  • 1.3.1 Info and structure conveyed semantically
  • 1.4.3 Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
  • 1.4.11 Non-text contrast >= 3:1 (UI components, graphics)
  • 1.1.1 非文本内容配有替代文本（alt text）
  • 1.3.1 信息与结构通过语义化方式传递
  • 1.4.3 对比度 >= 4.5:1（常规文本），>= 3:1（大文本）
  • 1.4.11 非文本内容对比度 >= 3:1（UI组件、图形）

Operable

可操作性

  • 2.1.1 All functionality available via keyboard
  • 2.4.3 Logical focus order
  • 2.4.7 Visible focus indicator
  • 2.5.5 Touch target >= 44x44 CSS pixels
  • 2.1.1 所有功能均可通过键盘访问
  • 2.4.3 合理的焦点顺序
  • 2.4.7 可见的焦点指示器
  • 2.5.5 触摸目标尺寸 >= 44x44 CSS像素

Understandable

可理解性

  • 3.2.1 Predictable on focus (no unexpected changes)
  • 3.3.1 Error identification (describe the error)
  • 3.3.2 Labels or instructions for inputs
  • 3.2.1 焦点状态可预测（无意外变化）
  • 3.3.1 错误识别（描述错误内容）
  • 3.3.2 输入框配有标签或说明

Robust

健壮性

  • 4.1.2 Name, role, value for all UI components
  • 4.1.2 所有UI组件具备名称、角色与属性值

Common Issues

常见问题

  1. Insufficient color contrast
  2. Missing form labels
  3. No keyboard access to interactive elements
  4. Missing alt text on meaningful images
  5. Focus traps in modals
  6. Missing ARIA landmarks
  7. Auto-playing media without controls
  8. Time limits without extension options
  1. 颜色对比度不足
  2. 表单标签缺失
  3. 交互元素无法通过键盘访问
  4. 有意义的图片缺失替代文本（alt text）
  5. 模态框存在焦点陷阱
  6. 缺失ARIA地标
  7. 媒体自动播放且无控制按钮
  8. 存在时间限制但无延长选项

Testing Approach

测试方法

  1. Automated scan (catches ~30% of issues)
  2. Keyboard-only navigation
  3. Screen reader testing (VoiceOver, NVDA)
  4. Color contrast verification
  5. Zoom to 200% — does layout break?
  1. 自动化扫描（可发现约30%的问题）
  2. 仅使用键盘导航测试
  3. 屏幕阅读器测试（VoiceOver、NVDA）
  4. 颜色对比度验证
  5. 放大至200%——布局是否损坏？