网页无障碍检查提示词（对照 WCAG 2.2：颜色对比度、键盘操作、读屏软件、表单与图片替代文本）
网站要做适老化与无障碍改造、产品要出海满足无障碍要求，或者只是想让更多人能顺利使用时用：把页面代码给 AI，按 WCAG 2.2 的常见检查项逐条审查，指出问题所在的元素、影响哪类用户、对应的条款，以及修改后的代码。
通用大模型 对话模型通用
你是一名网页无障碍（Accessibility）专家，熟悉 WCAG 2.2 和 WAI-ARIA 的使用原则。请审查下面的页面或组件。 - 页面或组件说明：[如注册表单、商品列表、自定义下拉菜单] - 目标等级：[如 WCAG 2.2 AA] - 代码（HTML，或框架组件代码；如有相关 CSS 一并粘贴）： [粘贴代码] - 设计稿中的颜色（文字色与背景色）：[颜色值，没有就写无] 按以下维度检查，只报告实际存在的问题： 1. 语义与结构：是否用对了原生元素（按钮用 button 而不是可点击的 div、链接用 a）；标题层级是否连续；页面区域是否有地标；列表、表格是否使用了对应的语义元素。 2. 键盘操作：所有交互是否能只用键盘完成；焦点顺序是否合理；焦点样式是否可见；弹窗打开时焦点是否移入、关闭后是否回到触发元素、是否能用 Esc 关闭；有没有键盘陷阱。 3. 读屏软件：图片的替代文本（装饰性图片应为空）；只有图标的按钮是否有可访问名称；表单控件是否关联了标签；错误提示与动态更新的内容是否会被读出；ARIA 是否被误用（能用原生元素就不要用 ARIA，错误的 ARIA 比没有更糟）。 4. 视觉：文字与背景的颜色对比度（给出计算值和是否达标）；是否仅用颜色传达信息（如只用红色表示错误）；放大到 200% 时内容是否可用；点击目标的尺寸是否过小。 5. 表单：必填项提示、输入格式说明、错误信息是否具体并指出如何修正、是否支持浏览器自动填充。 6. 动效与时间：自动播放的轮播能否暂停；是否尊重减少动态效果的系统设置；有时间限制的操作能否延长。 输出：问题表（严重程度 | 元素 | 问题 | 受影响的用户 | 对应的 WCAG 条款编号）、修改后的代码、建议用哪些工具和读屏软件做人工复查。 条款编号拿不准的，写「对应条款需核对 WCAG 原文」。
高亮处换成你自己的内容：[如注册表单、商品列表、自定义下拉菜单]、[如 WCAG 2.2 AA]、[粘贴代码]、[颜色值，没有就写无]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[目标等级] 一般写 AA，这是多数法规和企业标准要求的等级。[设计稿中的颜色] 有的话一定要给，对比度不达标是最常见的问题之一，AI 可以直接算出对比度。自定义组件（下拉框、标签页、弹窗）是问题最集中的地方，优先拿来审查。
常见坑：
- 给可点击的 div 加上点击事件就当作按钮，键盘用户无法聚焦、无法用回车或空格触发，读屏软件也不知道它是按钮。直接用 button 元素可以省掉大部分工作。
- 到处加 ARIA 属性，结果和元素的实际行为不一致，反而误导读屏软件。原则是：能用原生 HTML 元素就不用 ARIA。
- 自动化工具只能发现一部分问题，键盘操作和读屏体验必须人工检查。
追问技巧：追问「给出一个符合 WAI-ARIA 实践指南的可访问下拉选择框完整实现」，或「列出一份我们团队上线前的无障碍自查清单（10 条以内）」。
示例输出
示例，仅供参考（注册表单，节选）
| 严重程度 | 元素 | 问题 | 受影响的用户 | 条款 |
|---|---|---|---|---|
| 严重 | 关闭图标按钮 | 只有图标，没有可访问名称 | 读屏用户 | 4.1.2 |
| 严重 | 手机号输入框 | 用占位文字代替标签，输入后提示消失 | 读屏用户、认知障碍用户 | 1.3.1、3.3.2 |
| 一般 | 浅灰色说明文字 | 对比度约 2.8:1，未达到 AA 要求的 4.5:1 | 低视力用户 | 1.4.3 |
html
<label for="phone">手机号</label>
<input id="phone" type="tel" autocomplete="tel" aria-describedby="phone-hint" required>
<p id="phone-hint">11 位中国大陆手机号</p>
<button type="button" aria-label="关闭"><svg aria-hidden="true">…</svg></button>同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～