无障碍与设计
面向真实业务的 A11y 落地指南,从“规范理解”到“组件级可用性”的全流程方法:
- 语义结构与可读性:标题层级、可见标签、表单关联、替代文本。
- 对比度与动效:高对比主题、减少动态效果偏好、动画降噪。
- 键盘与焦点:Tab 顺序、焦点样式、不被遮挡与可返回。
- 触控命中与替代:24×24 px 最小命中区、拖拽替代、错误恢复。
- 一致帮助:流程与表单的稳定帮助入口与清晰错误反馈。
精选阅读
- 基础规范:
/blog/accessibility-guidelines、/blog/wcag-3-scoring-model、/blog/wcag-2.2-guide - 输入与交互:
/blog/keyboard-navigation、/blog/screen-reader - 视觉与可读性:
/blog/color-contrast、/blog/accessible-ux-research-guide - 特殊主题:
/blog/captcha-accessibility-issue、/blog/sustainable-web-design
团队实施清单
- 在设计规范中定义对比度/焦点/命中区 Token 并全局复用
- 组件库内置键盘可达、焦点可见、拖拽替代与 ARIA 属性
- E2E 覆盖 Tab 路径、焦点可见与读屏顺序
- Lighthouse 无障碍评分达标并作为构建守门
下方将自动汇总该分类的相关文章。