WCAG 2.1 AA
无障碍设计 (A11y)
包容性设计不是事后补充。我们致力于构建所有人都能感知、操作和理解的体验。
核心原则
可感知 (Perceivable)
POUR
信息和用户界面组件必须以用户能够感知的方式呈现。
可操作 (Operable)
POUR
用户界面组件和导航必须是可操作的。
可理解 (Understandable)
POUR
信息和用户界面的操作必须是可理解的。
鲁棒性 (Robust)
POUR
内容必须足够健壮，以便各种用户代理（包括辅助技术）都能可靠地解释。
色彩对比度
文本与其背景之间必须保持至少 4.5:1 的对比度 (WCAG AA)。
普通文本 (4.5:1)
4.5:1
大号文本 (3:1)
3:1
通过Black on White (21:1)
失败Grey on Grey (1.2:1)
焦点指示器
切勿在未提供可见替代方案的情况下抑制默认的焦点轮廓。我们的设计系统使用标准的 `ring-2` 焦点环。
- Tab / Shift+Tab navigation
- Visible hover & focus styles
开发者检查清单
优先使用语义化 HTML 元素 (button, a, input) 而非 div。
为所有有意义的图像提供替代文本 (alt text)。
确保所有交互元素都有可见的焦点状态。
验证所有功能是否仅通过键盘即可访问。
普通文本保持至少 4.5:1 的对比度。