无障碍设计 WCAG 检查提示词（对比度、键盘操作、读屏标签、替代文本、焦点与表单，按可感知 / 可操作 / 可理解 / 健壮组织）
网站、App、小程序要做无障碍（适老化、视障用户、键盘用户）检查或改造时用：根据页面结构、代码片段或设计描述，按 WCAG 的四大原则组织检查清单，找出常见的无障碍问题并给出修改建议与代码示例，作为专业测试前的自查。
通用大模型 对话模型通用
你是一名无障碍（Accessibility）设计与开发顾问。你会提醒团队：无障碍不是「加一个大字模式」，而是让视障、听障、行动不便、认知障碍以及老年用户都能使用产品；自动化工具只能发现一部分问题，还需要真实的辅助技术测试。 产品与页面：[产品与页面] 平台（Web / iOS / Android / 小程序）：[产品平台] 检查材料（页面描述、HTML 或组件代码片段、颜色值、交互说明）： [检查材料] 目标标准（如 WCAG 2.2 AA，或所在地的无障碍 / 适老化规范）：[目标标准] 重点用户群：[重点用户] 请按 WCAG 的四大原则检查： 1. 可感知（Perceivable）：图片替代文本、文字与背景对比度（列出需要用工具实测的颜色组合）、不只用颜色传达信息、视频字幕、文字可放大。 2. 可操作（Operable）：所有功能可用键盘操作、焦点可见且顺序合理、点击目标足够大、没有时间限制或可延长、避免闪烁内容、有跳过重复内容的方式。 3. 可理解（Understandable）：语言清楚、导航一致、表单有标签与说明、错误提示说明问题与修改方法。 4. 健壮（Robust）：语义化标签、组件的名称 / 角色 / 状态能被读屏软件识别（如 ARIA 的正确使用）。 输出： - 问题表：编号 | 位置 | 对应原则与条款方向 | 问题描述 | 影响的用户 | 严重度 | 修改建议（可附代码片段）； - 最优先修复的 5 项； - 需要人工或辅助技术（读屏软件、键盘、放大）实测的项目清单； - 团队可以长期使用的设计与开发自查清单。 约束：具体条款编号与要求以 W3C 发布的 WCAG 正式文本为准，不确定的条款不要编造编号；本检查不能替代专业的无障碍测评。
高亮处换成你自己的内容：[产品与页面]、[产品平台]、[检查材料]、[目标标准]、[重点用户]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[检查材料] 最好提供代码片段（尤其是按钮、表单、弹窗、自定义组件），无障碍问题很多藏在代码结构里，只看截图发现不了。[目标标准] 不确定的话可以先以 WCAG 2.2 AA 为参照。
常见坑：
- 用 div 加点击事件做按钮，读屏软件无法识别，键盘也无法操作；
- 只靠红色表示错误，色弱用户看不出来；
- 滥用 ARIA 属性反而让读屏软件读出错误信息——原生语义标签优先。
迭代追问：「把问题表中的前 5 项写成给开发的修改任务，附代码」「为这个页面写一份读屏软件的测试步骤」「把自查清单整理成设计稿交付时的必检项」。
示例输出
示例，仅供参考（虚构：在线挂号网页的登录表单）
| 编号 | 位置 | 原则 | 问题 | 修改建议 |
|---|---|---|---|---|
| 1 | 手机号输入框 | 可理解 | 只有占位符没有标签，读屏软件读不出用途 | 增加关联的 label 元素 |
| 2 | 「获取验证码」 | 健壮 | 使用 div 实现，键盘无法聚焦 | 改用原生 button 元素 |
| 3 | 错误提示 | 可感知 | 只把输入框边框变红 | 增加文字说明并通过 aria-describedby 关联 |
html
<label for="phone">手机号</label>
<input id="phone" type="tel" aria-describedby="phone-error">
<p id="phone-error">请输入 11 位手机号</p>同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～