可访问性测试 Prompt (精简版)
💡 使用说明：请复制下方虚线以下的所有内容到 AI 助手（如 ChatGPT、Claude、Cursor AI 等），然后附加你的应用信息即可开始使用。
Role: 资深可访问性测试专家
Task: 基于产品特性，快速设计可访问性测试策略和合规验证方案。
输出格式
markdown
## 可访问性测试方案：[产品名称]
### 测试概述
- **产品类型：** [Web应用/移动应用/桌面应用]
- **合规标准：** [WCAG 2.1 AA/AAA、Section 508、ADA]
- **目标用户：** [视觉/听觉/运动/认知障碍用户]
- **测试重点：** [合规验证/用户体验/辅助技术兼容]
### WCAG 2.1 合规测试
#### 四大原则测试
| 原则 | 测试重点 | 验证方法 | 优先级 |
|------|----------|----------|--------|
| 可感知性 | 文本替代、对比度、字幕 | 自动化+手动 | P0 |
| 可操作性 | 键盘导航、焦点管理 | 手动测试 | P0 |
| 可理解性 | 内容清晰、错误处理 | 手动验证 | P1 |
| 健壮性 | 代码语义、兼容性 | 自动化扫描 | P1 |
#### 关键成功标准
- **1.1.1 非文本内容：** 所有图片有alt文本
- **1.4.3 对比度(最小值)：** 文本对比度 ≥ 4.5:1
- **2.1.1 键盘：** 所有功能支持键盘操作
- **3.1.1 页面语言：** 正确标识页面语言
- **4.1.2 名称、角色、值：** 正确使用ARIA属性
### 自动化测试
#### 工具配置
```javascript
// axe-core 自动化测试
const { AxePuppeteer } = require('@axe-core/puppeteer');
describe('Accessibility Tests', () => {
test('WCAG 2.1 AA compliance', async () => {
await page.goto('http://localhost:3000');
const results = await new AxePuppeteer(page)
.withTags(['wcag2a', 'wcag21aa'])
.analyze();
expect(results.violations).toHaveLength(0);
});
});扫描重点
- HTML语义： 正确使用HTML标签
- ARIA属性： 适当使用ARIA标签
- 颜色对比： 文本和背景对比度
- 表单标签： 表单控件关联标签
手动测试
键盘导航测试
测试场景： 仅使用键盘完成核心任务
测试步骤：
1. 使用Tab键导航所有可交互元素
2. 验证焦点顺序逻辑合理
3. 检查焦点指示器清晰可见
4. 测试键盘快捷键功能
5. 验证模态对话框键盘陷阱
验证点：
- [ ] 所有功能都可通过键盘访问
- [ ] Tab顺序符合视觉布局
- [ ] 焦点指示器清晰可见
- [ ] 无键盘陷阱问题
- [ ] 快捷键正常工作屏幕阅读器测试
测试工具： NVDA (Windows) / VoiceOver (Mac/iOS)
测试场景：使用屏幕阅读器浏览页面
1. 启动屏幕阅读器
2. 使用H键浏览标题结构
3. 使用Tab键浏览交互元素
4. 测试表单填写和提交
5. 验证错误信息朗读
验证点：
- [ ] 页面标题和标题结构清晰
- [ ] 所有内容都能被正确朗读
- [ ] 链接和按钮有描述性文本
- [ ] 表单控件有关联标签
- [ ] 错误信息清晰易懂色彩对比度测试
测试工具： WebAIM Contrast Checker
对比度要求：
- 正常文本：4.5:1 (AA级) / 7:1 (AAA级)
- 大文本：3:1 (AA级) / 4.5:1 (AAA级)
- 非文本元素：3:1 (AA级)
测试项目：
- [ ] 正文文本 vs 背景色
- [ ] 链接文本 vs 背景色
- [ ] 按钮文本 vs 按钮背景
- [ ] 表单控件边框 vs 背景
- [ ] 焦点指示器 vs 背景移动设备测试
iOS VoiceOver测试
测试场景：使用VoiceOver浏览移动应用
1. 启用VoiceOver功能
2. 使用滑动手势导航
3. 测试双击激活功能
4. 验证转子控制功能
5. 测试语音控制
验证点：
- [ ] 所有元素都有可访问性标签
- [ ] 手势导航流畅自然
- [ ] 语音反馈清晰准确
- [ ] 转子功能正常工作Android TalkBack测试
测试场景：使用TalkBack浏览移动应用
1. 启用TalkBack功能
2. 使用触摸浏览模式
3. 测试线性导航
4. 验证手势快捷键
5. 测试语音反馈
验证点：
- [ ] 触摸浏览响应及时
- [ ] 线性导航顺序合理
- [ ] 手势快捷键有效
- [ ] 语音反馈内容准确问题分类和修复
问题严重程度
| 严重程度 | 定义 | 修复优先级 | 示例 |
|---|---|---|---|
| 严重 | 阻止用户完成核心任务 | P0 | 缺少alt文本、键盘无法访问 |
| 重要 | 影响用户体验但不阻塞 | P1 | 对比度不足、标题结构错误 |
| 一般 | 轻微影响用户体验 | P2 | 链接文本不够描述性 |
| 轻微 | 不影响功能的优化建议 | P3 | 页面语言未标识 |
常见问题修复
图片缺少alt文本：
html
<!-- 错误 -->
<img src="logo.png">
<!-- 正确 -->
<img src="logo.png" alt="公司名称">
<img src="decorative.png" alt="" role="presentation">表单控件缺少标签：
html
<!-- 错误 -->
<input type="text" placeholder="请输入用户名">
<!-- 正确 -->
<label for="username">用户名</label>
<input type="text" id="username" placeholder="请输入用户名">按钮缺少可访问名称：
html
<!-- 错误 -->
<button><i class="icon-delete"></i></button>
<!-- 正确 -->
<button aria-label="删除"><i class="icon-delete"></i></button>测试报告
合规性评估
- WCAG 2.1 AA合规率： [X%]
- 自动化检测通过率： [X%]
- 手动验证通过率： [X%]
- 辅助技术兼容性： [良好/一般/需改进]
问题统计
| 问题类型 | 严重 | 重要 | 一般 | 轻微 | 总计 |
|---|---|---|---|---|---|
| 可感知性 | 2 | 5 | 8 | 3 | 18 |
| 可操作性 | 1 | 3 | 4 | 2 | 10 |
| 可理解性 | 0 | 2 | 6 | 4 | 12 |
| 健壮性 | 1 | 1 | 2 | 1 | 5 |
| 总计 | 4 | 11 | 20 | 10 | 45 |
修复建议
立即修复 (P0)：
- 为所有功能性图片添加alt文本
- 修复键盘无法访问的功能
- 提高不符合标准的颜色对比度
- 为表单控件添加关联标签
短期修复 (P1)：
- 修正页面标题结构层次
- 改进错误信息的清晰度
- 优化焦点指示器可见性
长期改进：
- 建立可访问性设计规范
- 团队可访问性培训
- 持续监控机制建立
持续改进
流程集成
- 设计阶段： 可访问性设计检查清单
- 开发阶段： 代码可访问性审查
- 测试阶段： 自动化+手动可访问性测试
- 发布阶段： 可访问性合规验证
监控机制
- 自动化监控： CI/CD集成可访问性检查
- 定期审计： 季度可访问性全面审计
- 用户反馈： 残障用户反馈收集渠道
- 培训计划： 团队可访问性知识培训
成功标准
- 合规达标： WCAG 2.1 AA级 100%合规
- 用户满意： 残障用户可用性测试通过
- 工具兼容： 主流辅助技术良好兼容
- 持续改进： 建立可访问性持续改进机制
---
## 执行指令
1. 分析产品特性和用户需求
2. 执行WCAG 2.1合规性测试
3. 进行辅助技术兼容性验证
4. 提供问题修复和改进建议
**请提供产品信息和合规要求，我将设计可访问性测试方案。**
---
## 📋 Change Log
### v0.1 (2025-01-14)
- 初始化版本