多数 a11y 审计止步于 axe 全绿——真正绊倒用户的问题一个没找:自定义控件里的焦点陷阱、关闭后丢焦点的 modal 栈、把装饰更新读出来的 live region、只用红色表示错误的状态。下面这些 Prompt 强制 AI 走两遍页面:一遍纯键盘,一遍纯屏阅,并把每条发现映射到具体 WCAG 条目 + 1 行修复。配合 a11y 回归审计 Prompt 把修复锁住,防止下次发版又退回去。
这套 Prompt 适合用在哪
- 上线前 a11y 审计
- WCAG 2.1 / 2.2 合规
- 自定义控件 a11y 评审
- 表单流 a11y
- PR 级 a11y 检查
1. 语义 HTML 审计
下面是 HTML。审计语义 HTML:(a) 标题层级;(b) landmarks(header / main / nav / footer);(c) 是用列表还是 div 堆;(d) button vs link vs div。每条问题给 WCAG 条目 + 1 行修复。
{粘贴}
2. 键盘导航走查
下面是页面 / 组件。请以纯键盘用户身份走查:每个可交互元素 Tab 一遍,列出 (a) Tab 顺序;(b) 焦点可见性;(c) 键盘陷阱;(d) skip-link。标出每个问题。
{粘贴}
3. 屏幕阅读器流审计
下面是页面。请描述从加载到完成主任务屏幕阅读器用户会"听到"什么。标出:(a) 装饰内容被读出;(b) 关键信息被漏;(c) 状态变化未被宣告。
{粘贴}
4. 颜色对比检查
下面是色板 + 10 组组件配色(前景 / 背景)。每组给:对比度、WCAG AA / AAA 结论、能通过的最小调整。
{粘贴}
5. 表单 a11y 审计
下面是表单。审计:(a) label 关联;(b) 错误信息宣告;(c) 必填指示;(d) 键盘提交;(e) 出错后焦点管理;(f) autocomplete 属性。
{粘贴}
6. Modal / dialog a11y
下面是 modal 组件。审计:(a) 焦点进入;(b) 焦点陷阱;(c) Esc 关闭;(d) aria-modal;(e) 关闭后焦点回到触发点;(f) 阻止背景滚动。每条标出问题。
{粘贴}
7. 自定义控件 ARIA 评审
下面是自定义控件({tabs / accordion / combobox 等})。对照 WAI-ARIA Authoring Practices。列出偏差并提议满足规范的最小 ARIA role / state / 键盘处理。
{粘贴}
8. 图片 alt 审计
下面是页面 10 张图和它们当前 alt。每张:(a) 装饰 vs 信息性;(b) alt 是否承担其功能;(c) 是否与旁边文字重复。给修订 alt。
{粘贴}
9. 焦点管理审计
下面是多步流程({粘贴})。逐步走焦点:(a) 起点;(b) 移动到哪;(c) 宣告了什么。标出丢焦点的步骤。
10. 动态内容 live region 审计
下面是动态更新的组件({toast / 搜索结果 / 表单错误})。审计:(a) 更新是否被宣告;(b) live region 礼貌度(polite / assertive);(c) 是否过频宣告。
{粘贴}
11. 仅靠颜色的信号
下面是页面 / 图表。找出所有只用颜色传达信息的点(如红色 = 错误但无图标 / 文字)。每处提议非颜色的次级信号。
{粘贴}
12. WCAG 条目映射
下面是我的 axe-core / Lighthouse a11y 报告。每条:(a) 映射到具体 WCAG 2.1 / 2.2 条目;(b) 优先级(阻塞 / 大 / 小);(c) 最小修复;(d) 人工验证方法。
{粘贴}
容易踩的坑
- 把 axe 全绿当”审计完成”——自动化最多覆盖一半 WCAG 问题
- 漏掉纯键盘走查,焦点陷阱、缺 skip-link 永远不会被发现
- 写自定义 tabs / combobox / menu 没对照 WAI-ARIA Authoring Practices
- 成功 / 错误态只用颜色——明眼人没事,色盲与屏阅用户完全看不到
- modal 圈住屏阅焦点但没圈住键盘焦点(或反过来),两条都要单独测
- live region 把装饰更新也读出来,训练用户忽略 assertive 通道