首页/AI 提示词库/编程开发/无障碍审计

无障碍审计

⌨ 编程开发 适配:Claude / GPT(需能读代码)难度:进阶 4 个变量一键复制
使用说明

对页面做无障碍(a11y)自查:键盘可达性、语义标签、对比度、读屏顺序,输出按严重级排序的修复清单。

上线前合规自查;政企/海外项目验收含 WCAG 条款;想提升老年用户可用性。

提示词模板未填写变量以红色标出
帮我做一次无障碍审计。

【页面代码】
{{页面代码}}
【页面类型】{{页面类型}}
【对标要求】{{关注程度}}
【已知问题】{{已知问题}}

请输出:
一、问题清单(按 P0/P1/P2 分级):每条 = 问题描述 | 违反的 WCAG 条款号 | 影响的用户群 | 修复方案(含代码 diff)。P0 定义为「完全无法用键盘/读屏完成核心流程」。
二、已知问题专项:针对我列的问题给出根因分析与修复(如模态框焦点管理:打开时 trap focus、关闭后归还触发元素)。
三、语义与 ARIA 修正:该用原生元素的地方(button/a/label)改回原生;必须用 ARIA 的给出正确用法,标注「ARIA 只是补丁,原生优先」。
四、对比度核查:列出可疑的前景/背景组合及所需的最低对比度值,给可用的替代色值。
五、验收测试清单:纯键盘走通核心路径的步骤、常用读屏快捷键抽查项、放大 200% 布局检查——每项写明「通过标准」。

要求:修复方案优先用 HTML 原生能力,其次 CSS,最后才是 JS;不引入重型依赖库。
填变量变量会自动替换进上方模板,可随时复制
已填 0 / 4
使用步骤
  1. 先修 P0 并用键盘亲自走一遍核心流程。
  2. 用浏览器 Lighthouse a11y 项做回归基准分。
  3. 把审计清单固化进 code review 检查项。
拔掉鼠标测一轮
Tab 走完全流程,卡在哪修哪,10 分钟能发现 80% 的 P0 问题,比任何工具都快。
原生元素是免费的合规
div 加 onclick 改成一个真 button,键盘、读屏、表单提交一次全对。
常见问题
alt 文本怎么写才算合格?

描述信息内容而非「图片」二字:图表写结论,装饰图 alt=""(空值)即可。

WCAG AA 是强制标准吗?

看行业与地区:政务、海外部分行业有法规要求;即使不强制,AA 的多数条款就是好的可用性实践。