可访问性审计 Prompt:WCAG 前端评审模板

12 个 Prompt 让 AI 以键盘 + 屏阅双重视角走查页面——语义、焦点、ARIA 控件、对比度、modal 栈、live region、WCAG 映射。

多数 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 通道

相关阅读

标签: #Prompt #AI 编程 #AI 编程