无障碍设计 - Hok Keung

无障碍是功能契约

无障碍不是发布前的视觉检查，而是确保不同视觉、听觉、运动和认知条件，以及只使用键盘、语音或辅助技术的用户都能完成任务。组件库应把这些行为定义为公共 API 的一部分。

原生 <button> 自带焦点、键盘激活、禁用和角色语义。使用 div 加点击事件后，需要重新实现这些行为，且很容易遗漏。ARIA 用来补充缺失语义，不能修复错误的交互模型。

每个控件都需要可访问名称。图标按钮不能只依赖视觉图标；输入控件需要真实标签；状态信息需要在合适时机被辅助技术感知。

颜色对比、缩放、文本间距和响应式布局应满足内容仍可读、控件仍可操作。错误、成功、加载和进度不能只靠颜色或动画表达；对动态通知使用合适的 live region，避免过度打断用户。

尊重 prefers-reduced-motion，并允许暂停会闪烁、自动播放或持续移动的内容。

Lint、axe 和浏览器无障碍树能发现缺少名称、无效 ARIA 和部分对比问题，但无法判断焦点是否符合任务流程、提示是否易懂、读屏顺序是否合理。至少结合：

每个交互组件至少覆盖默认、悬停、聚焦、按下、禁用、加载、错误和只读状态，并在亮色、暗色、缩放和键盘场景验证。