无障碍与 WCAG 实践

要解决的问题

无障碍支持常常是项目后期才补的环节。当一个页面只考虑视觉呈现时，div 堆叠、键盘不可达、对比度不足等问题会同时把键盘用户和屏幕阅读器用户挡在门外。WCAG 条款繁多，团队容易在语义结构、表单关联、颜色对比这些具体细节上反复返工。

核心能力

这个技能按主题组织了一套可直接执行的检查清单：

• 语义化 HTML：用 nav、main、article、section 等 landmark 元素替代通用 div，让屏幕阅读器能按页面区域跳转
• 键盘导航：所有交互元素都能通过 Tab 到达，Enter 或 Space 激活，Arrow 键在组件内部移动焦点
• 表单无障碍：每个输入框都关联 label，错误信息通过 role="alert" 主动告知屏幕阅读器
• 颜色与对比度：正文文本满足 WCAG AA 的 4.5:1，大字号文本满足 3:1
• ARIA 模式：在原生语义缺失的场景补充角色与状态

反模式提醒

技能还明确列出了容易踩的坑：用 div 或 span 冒充可点击元素、移除焦点框却不给替代指示、仅靠颜色区分错误与成功、aria-label 与可见文本重复、媒体自动播放却没有暂停机制、缺少跳转主内容的 skip link。

适用边界

这份清单用于人工审查辅助，不是自动化工具。它替代不了真实的屏幕阅读器测试（如 VoiceOver、NVDA），颜色对比的实际数值也需要用测量工具确认。它只覆盖 WCAG AA 基线，需要 AAA 的场景要另行参照更高标准。