Back to Details

accessibility

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web Accessibility (WCAG 2.2 AA)

Web无障碍设计（WCAG 2.2 AA）

Build for everyone — accessibility is a requirement, not a feature.
为所有人而构建——无障碍设计是一项要求，而非附加功能。

Contrast Ratios (WCAG AA)

对比度标准（WCAG AA）

ElementMinimum Ratio
Normal text (< 18pt)4.5:1
Large text (>= 18pt or 14pt bold)3:1
UI components and focus indicators3:1
元素类型最低对比度
常规文本（<18磅）4.5:1
大文本（≥18磅或14磅粗体）3:1
UI组件和焦点指示器3:1

WCAG 2.2 New AA Criteria

WCAG 2.2新增AA级标准

CriterionRequirement
Target Size Minimum (2.5.8)Interactive targets at least 24x24 CSS pixels
Focus Not Obscured Minimum (2.4.11)Focused element at least partially visible, not hidden by sticky headers or overlays
Focus Appearance (2.4.13)Focus indicator has minimum area (2px perimeter) and 3:1 contrast change
Dragging Movements (2.5.7)Provide single-pointer alternative for any drag interaction
Redundant Entry (3.3.7)Do not require re-entering previously provided information
Consistent Help (3.2.6)Help mechanisms (chat, phone, FAQ) appear in same relative order across pages
Accessible Authentication (3.3.8)No cognitive function test for login (allow paste, autofill, or alternatives)
准则名称要求内容
最小目标尺寸（2.5.8）交互目标至少为24x24 CSS像素
焦点不被遮挡（2.4.11）聚焦元素至少部分可见，不被固定页眉或覆盖层隐藏
焦点外观（2.4.13）焦点指示器需满足最小面积（2px边框）和3:1的对比度变化
拖拽操作替代方案（2.5.7）为所有拖拽交互提供单指针替代操作
避免重复输入（3.3.7）不要求重复输入已提供的信息
一致的帮助机制（3.2.6）帮助机制（聊天、电话、FAQ）在所有页面中的相对位置保持一致
无障碍身份验证（3.3.8）登录过程不包含认知功能测试（允许粘贴、自动填充或提供替代方式）

Essential Keyboard Patterns

核心键盘操作模式

KeyAction
Tab / Shift+TabNavigate between focusable elements
Enter / SpaceActivate buttons and links
Arrow keysNavigate within widgets (tabs, menus)
EscapeClose dialogs and menus
Home / EndJump to first/last item in widget
按键组合操作说明
Tab / Shift+Tab在可聚焦元素间导航
Enter / Space激活按钮和链接
方向键在组件内导航（标签页、菜单）
Escape关闭对话框和菜单
Home / End跳转到组件内的第一个/最后一个项

Element Selection

元素选择指南

NeedElement
Navigates to page
<a href="...">
Submits form
<button type="submit">
Opens dialog
<button aria-haspopup="dialog">
Other action
<button type="button">
Self-contained article
<article>
Navigation links
<nav>
Supplementary info
<aside>
需求场景推荐元素
跳转到其他页面
<a href="...">
提交表单
<button type="submit">
打开对话框
<button aria-haspopup="dialog">
其他操作
<button type="button">
独立文章内容
<article>
导航链接集合
<nav>
补充信息
<aside>

Common ARIA Attributes

常用ARIA属性

AttributePurpose
aria-label
Name when no visible label exists
aria-labelledby
Reference existing text as label
aria-describedby
Additional description (hints, errors)
aria-live
Announce dynamic updates (
polite
or 
assertive
)
aria-expanded
Collapsible/expandable state
aria-hidden="true"
Hide decorative elements from screen readers
aria-invalid
Mark form fields with errors
aria-required="true"
Mark required fields
aria-busy
Indicate loading state
属性名称用途
aria-label
当无可见标签时提供名称
aria-labelledby
引用现有文本作为标签
aria-describedby
提供额外描述（提示、错误信息）
aria-live
播报动态更新（
polite
或 
assertive
）
aria-expanded
标记可折叠/展开状态
aria-hidden="true"
向屏幕阅读器隐藏装饰性元素
aria-invalid
标记存在错误的表单字段
aria-required="true"
标记必填字段
aria-busy
指示加载状态

WCAG 2.2 AA Checklist Summary

WCAG 2.2 AA标准检查清单摘要

PrincipleKey Requirements
PerceivableAlt text on images, contrast >= 4.5:1, color not sole indicator, text resizable to 200%, captions on video, 
prefers-reduced-motion
support
OperableKeyboard accessible, visible focus not obscured, focus appearance meets minimum, targets >= 24px, skip links, dragging alternatives
Understandable
<html lang="en">
, consistent navigation, consistent help placement, form labels, error identification, no redundant entry, accessible auth
RobustValid HTML, name/role/value on all UI components, 
aria-live
for status messages (SC 4.1.1 Parsing is obsolete in WCAG 2.2)
原则核心要求
可感知图片添加替代文本、对比度≥4.5:1、不单独依赖颜色作为标识、文本可放大至200%、视频添加字幕、支持
prefers-reduced-motion
可操作支持键盘操作、焦点可见且不被遮挡、焦点外观符合标准、交互目标≥24px、提供跳转链接、拖拽操作替代方案
可理解设置
<html lang="en">
、导航方式一致、帮助机制位置一致、表单添加标签、错误识别、避免重复输入、无障碍身份验证
健壮性有效的HTML、所有UI组件具备名称/角色/值、状态消息使用
aria-live
（WCAG 2.2中SC 4.1.1解析准则已过时）

Anti-Patterns

反模式示例

Anti-PatternFix
<div onClick>
instead of 
<button>
Use semantic HTML elements
outline: none
without replacement		Use 
:focus-visible
with visible outline
Placeholder as labelUse 
<label>
element
tabindex
> 0		Use DOM order or 
tabindex="0"
/ 
tabindex="-1"
Color-only state indicatorsAdd icon and text label
Skipped heading levelsUse sequential h1-h6, style with CSS
role="button"
on 
<button>
Remove redundant ARIA
aria-hidden
on interactive elements		Never hide interactive content
Fixed font sizes (px)Use 
rem
units
No focus trap in modal dialogsTrap focus, close on Escape
反模式修复方案
使用
<div onClick>
而非
<button>
使用语义化HTML元素
移除
outline: none
但未提供替代样式		使用
:focus-visible
设置可见的焦点样式
用占位符作为标签使用
<label>
元素
tabindex
值大于0		使用DOM顺序或
tabindex="0"
/ 
tabindex="-1"
仅依赖颜色作为状态指示器添加图标和文本标签
跳过标题层级按顺序使用h1-h6，通过CSS设置样式
在
<button>
上添加
role="button"
移除冗余的ARIA属性
对交互元素设置
aria-hidden
绝不要隐藏可交互内容
使用固定字体大小（px）使用
rem
单位
模态对话框未设置焦点陷阱实现焦点陷阱，支持按Escape关闭

Common Mistakes

常见错误

MistakeCorrect Pattern
Adding 
aria-label
to elements that already have visible text		Use 
aria-labelledby
to reference existing visible text instead
Using 
aria-live="assertive"
for non-urgent updates		Use 
aria-live="polite"
for most dynamic content; reserve 
assertive
for errors and alerts
Setting 
alt=""
on informative images		Provide descriptive alt text; only use empty alt on purely decorative images
Adding keyboard handlers to non-focusable elementsUse native interactive elements or add 
tabindex="0"
plus 
role
and key handlers
Testing only with automated tools like axeAutomated scans catch ~30% of issues; always supplement with keyboard-only and screen reader testing
错误做法正确实现方式
为已有可见文本的元素添加
aria-label
改用
aria-labelledby
引用现有可见文本
对非紧急更新使用
aria-live="assertive"
大多数动态内容使用
aria-live="polite"
；仅在错误和警报场景使用
assertive
对有意义的图片设置
alt=""
提供描述性替代文本；仅对纯装饰性图片使用空alt值
为不可聚焦元素添加键盘事件处理程序使用原生交互元素，或添加
tabindex="0"
并配合
role
和键盘事件处理程序
仅使用axe等自动化工具测试自动化扫描仅能发现约30%的问题；务必补充纯键盘测试和屏幕阅读器测试

Screen Reader and Browser Pairings

屏幕阅读器与浏览器配对

Screen ReaderBrowserPlatform
JAWSChromeWindows
NVDAChromeWindows (free)
NVDAFirefoxWindows (free)
VoiceOverSafarimacOS / iOS
TalkBackChromeAndroid
NarratorEdgeWindows (built-in)
屏幕阅读器浏览器平台
JAWSChromeWindows
NVDAChromeWindows（免费）
NVDAFirefoxWindows（免费）
VoiceOverSafarimacOS / iOS
TalkBackChromeAndroid
NarratorEdgeWindows（内置）

Testing Quick Guide

快速测试指南

MethodToolEffort
Keyboard-onlyHide mouse, Tab through page5 min
Screen readerJAWS + Chrome or NVDA + Chrome/Firefox10 min
Screen readerVoiceOver + Safari (macOS)10 min
Automated scanaxe DevTools browser extension2 min
LighthouseChrome F12 > Lighthouse > Accessibility2 min
Unit testsjest-axe (Jest) or vitest-axe (Vitest)Ongoing
测试方法工具耗时
纯键盘测试隐藏鼠标，按Tab遍历页面5分钟
屏幕阅读器测试JAWS + Chrome 或 NVDA + Chrome/Firefox10分钟
屏幕阅读器测试VoiceOver + Safari（macOS）10分钟
自动化扫描axe DevTools浏览器扩展2分钟
Lighthouse测试Chrome F12 > Lighthouse > 无障碍选项2分钟
单元测试jest-axe（Jest）或vitest-axe（Vitest）持续进行

Delegation

职责分工

When working on accessibility, delegate to:
  • design-system
    — Color tokens and contrast verification
  • react-patterns
    — Component patterns and hooks
  • testing
    — jest-axe integration and test patterns
处理无障碍设计工作时，可分工至：
  • design-system
    — 颜色令牌和对比度验证
  • react-patterns
    — 组件模式和钩子
  • testing
    — jest-axe集成和测试模式

Resources

参考资源

References

扩展参考

  • Semantic HTML and Structure — Document landmarks, heading hierarchy, element selection, skip links
  • Focus Management — Focus indicators, focus not obscured, dialog focus traps, SPA route focus, focus-visible patterns
  • ARIA Patterns — Accessible tabs, live regions, data tables with ARIA attributes
  • Forms and Validation — Label association, error announcement, redundant entry, accessible authentication
  • Color and Media — Contrast requirements, reduced motion, dragging alternatives, video captions, alt text
  • Testing — Keyboard testing, screen reader pairings, axe DevTools, jest-axe and vitest-axe unit tests
  • 语义化HTML与结构 — 文档地标、标题层级、元素选择、跳转链接
  • 焦点管理 — 焦点指示器、焦点不被遮挡、对话框焦点陷阱、SPA路由焦点、:focus-visible模式
  • ARIA模式 — 无障碍标签页、实时区域、带ARIA属性的数据表格
  • 表单与验证 — 标签关联、错误播报、避免重复输入、无障碍身份验证
  • 颜色与媒体 — 对比度要求、减少动画、拖拽替代方案、视频字幕、替代文本
  • 测试方法 — 键盘测试、屏幕阅读器配对、axe DevTools、jest-axe和vitest-axe单元测试