无障碍与 WCAG 规范

要解决什么问题

无障碍改造经常卡在两个极端：要么只把颜色对比度调高，要么给页面到处补 aria-label，却没有人验证键盘能否真正走通。结果是屏幕阅读器用户和键盘用户依然在表单校验、焦点丢失和导航迷路里打转。这个技能要解决的就是这类「改了但没生效」的问题，把 WCAG 检查点变成可执行的代码级约束。

技能如何工作

• 语义结构优先：用 nav、main、article、section 这类 landmark 替代通用容器，屏幕阅读器据此提供页面导航，而不是让用户逐个听读 div。
• 键盘可达性：所有可交互元素必须能用 Tab 抵达，Enter 或 Space 激活，组件内部用方向键移动，Escape 退出；焦点指示器不能被无替代方案地移除。
• ARIA 用在刀刃上：表单错误通过 role="alert" 让屏幕阅读器即时播报；输入框必须关联 <label>；当可见文本已经能描述元素时，不要再叠 aria-label，避免标签冲突。
• 颜色与对比度：正文满足 WCAG AA 的 4.5:1，大号文本（18px 粗体或 24px 常规）不低于 3:1；状态不能只靠红色或绿色区分。
• 交付前自查：按清单逐项核对，再用屏幕阅读器（VoiceOver、NVDA）和纯键盘各走一遍完整流程。

适用边界与注意点

这个技能是前端实现层的评审标准，不负责自动化扫描，也不能替代真实用户测试或完整的 WCAG 符合性审计。alt="" 只适用于装饰性图片，功能性图片必须有描述文本。没有暂停机制的自动播放媒体同样落在反模式里。建议把它嵌入代码评审流程，而不是当作发布前的一次性补丁。