用途:为 Astro 潜在客户生成网站提供无障碍实现规范,目标是满足 WCAG 2.1 AA(资料提到英国《2010 年平等法》的法律要求),覆盖键盘导航、屏幕阅读器、焦点管理和 ARIA。
核心规则:所有交互元素可用 Tab 到达;优先使用语义 HTML 再考虑 ARIA;每个表单输入必须有标签;所有图片需合适的 alt 文本;焦点指示必须可见;文本对比度至少 4.5:1,UI 组件 3:1;遵循 prefers-reduced-motion。按钮用于动作(提交、切换、打开弹窗),<a href> 用于导航。
内容模块:语义 HTML 模式、焦点管理(跳转链接、焦点陷阱、focus-visible 样式)、ARIA 模式(live region、移动菜单)、表单无障碍(标签、错误消息、必填字段)、图片 alt 文本、动效与减弱动效、仅供屏幕阅读器的 CSS 工具类。
测试清单:键盘方面检查 Tab 顺序、可达性、焦点可见、Escape 关闭弹窗、跳转链接;屏幕阅读器检查页面标题、标题层级、alt 文本、表单标签、错误是否通过 aria-live 播报;视觉方面检查对比度、200% 缩放、不单靠颜色、减弱动效。工具建议包括 Chrome DevTools 的视觉缺陷模拟、axe DevTools、WAVE,以及 NVDA、VoiceOver、JAWS。
禁止事项:用 div/span 做交互元素;outline: none 且无替代焦点样式;tabindex 大于 0;缺少表单标签;仅用颜色作指示;自动播放音视频;无替代方案的 CAPTCHA。
完成标准:页面有跳转链接、表单标签齐全、对比度通过 AA、键盘导航完整、axe DevTools 0 错误、屏幕阅读器测试通过、实现减弱动效媒体查询、所有图片有合适 alt 文本。资料未提供安装命令与具体代码示例。