无障碍测试超能力工作流

# 无障碍测试工作流程

## 配置

- **WCAG 级别**：${wcag_level:AA} - **被测组件**：${component_name:Page} - **合规标准**：${compliance_standard:WCAG 2.1} - **最低 Lighthouse 分数**：${lighthouse_score:90} - **主要屏幕阅读器**：${screen_reader:NVDA} - **测试框架**：${test_framework:jest-axe}

## 审计决策树

## WCAG 快速参考

### 严重程度分类

| 严重程度 | 影响 | 示例 | 修复时限 | |----------|--------|----------|--------------| | 严重 | 完全阻止访问 | 无键盘焦点、空按钮、功能性图片缺少替代文本 | 立即 | | 重要 | 主要障碍 | 对比度不足、缺少表单标签、无跳过链接 | 当前迭代内 | | 中等 | 可用但有困难 | 导航不一致、错误信息不清晰 | 下个版本 | | 轻微 | 不便 | 冗余替代文本、标题层级轻微问题 | 待办列表 |

### 常见违规及修复

**缺少可访问名称** ```html ...

...

关闭对话框 ... ```

**表单标签关联** ```html 邮箱

邮箱

邮箱 ```

**颜色对比度失败** ``` 最低对比度要求（WCAG ${wcag_level:AA}）： - 普通文本（ =${large_text_size:18}px 或 >=${bold_text_size:14}px 粗体）：${contrast_ratio_large:3}:1 - UI 组件和图形：3:1

工具：WebAIM 对比度检查器、浏览器开发者工具 ```

**焦点可见性** ```css /* 切勿在没有替代方案的情况下这样做 */ :focus { outline: none; }

/* 正确的自定义焦点 */ :focus-visible { outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc}; outline-offset: ${focus_outline_offset:2}px; } ```

## ARIA 决策框架

``` 需要向辅助技术传达信息？ | +-- 语义化 HTML 能否实现？ | +-- 能：使用 HTML（ 、 、 、 ） | +-- 不能：继续使用 ARIA | +-- 需要哪种类型的 ARIA？ +-- 角色：该元素是什么？（role="dialog"、role="tab"） +-- 状态：什么条件？（aria-expanded、aria-checked） +-- 属性：什么关系？（aria-labelledby、aria-describedby） +-- 活动区域：动态内容？（aria-live="${aria_live_mode:polite}"） ```

### 常见组件的 ARIA 模式

**展开/收起（显示/隐藏）** ```html 显示详情 此处为内容 ```

**标签页界面** ```html 常规 隐私 ... ... ```

**模态对话框** ```html 确认操作 您确定要继续吗？

取消 确认 ```

## 键盘导航清单

``` [ ] 所有交互元素可通过 Tab 键聚焦 [ ] 焦点顺序与视觉/逻辑顺序一致 [ ] 所有元素焦点可见 [ ] 无键盘陷阱（始终可 Tab 移出） [ ] 跳过链接为第一个可聚焦元素 [ ] Escape 关闭模态框/下拉菜单 [ ] 方向键在组件内导航（标签页、菜单、网格） [ ] Enter/空格激活按钮和链接 [ ] 自定义快捷键已记录且可配置 ```

### 焦点管理模式

**模态框焦点陷阱** ```javascript // 模态框打开时： // 1. 保存先前聚焦的元素 // 2. 将焦点移至模态框内第一个可聚焦元素 // 3. 在模态框边界内限制 Tab 循环

// 模态框关闭时： // 1. 将焦点返回到保存的元素 ```

**动态内容** ```javascript // 添加内容后： // - 通过 aria-live 区域播报，或 // - 将焦点移至新内容的标题

// 移除内容后： // - 将焦点移至逻辑上的下一个元素 // - 切勿让焦点停留在已移除的元素上 ```

## 屏幕阅读器测试

### 播报验证

| 元素 | 应播报 | |---------|-----------------| | 按钮 | 角色 + 名称 + 状态（“提交按钮”） | | 链接 | 名称 + “链接”（“首页链接”） | | 图片 | 替代文本或“装饰性”（跳过） | | 标题 | 级别 + 文本（“二级标题，关于我们”） | | 表单字段 | 标签 + 类型 + 状态 + 说明 | | 错误 | 错误信息 + 字段关联 |

### 测试命令（快速参考）

**VoiceOver（macOS）** - VO = Ctrl + Option - VO + A：全部朗读 - VO + 右/左方向键：在元素间导航 - VO + Cmd + H：下一个标题 - VO + Cmd + J：下一个表单控件

**${screen_reader:NVDA}（Windows）** - NVDA + 下方向键：全部朗读 - Tab：下一个可聚焦元素 - H：下一个标题 - F：下一个表单字段 - B：下一个按钮

## 自动化测试集成

### 测试中的 axe-core ```javascript // ${test_framework:jest-axe} import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations);

test('${component_name:component} 可访问', async () => { const { container } = render( ); const results = await axe(container); expect(results).toHaveNoViolations(); }); ```

### Lighthouse CI 阈值 ```javascript // lighthouserc.js module.exports = { assertions: { 'categories:accessibility': ['error', { minScore: ${lighthouse_score:90} / 100 }], }, }; ```

## 修复优先级矩阵

``` 影响 vs 工作量： 低工作量 高工作量 高影响 | 先做 | 下一步规划 | | 替代文本 | 重新设计 | | 标签 | 导航重建 | ---------------|--------------|---------------| 低影响 | 快速胜利 | 待办列表 | | 对比度 | 锦上添花 | | 微调 | 增强功能 | ```

## 验证清单

在标记无障碍工作完成之前：

``` 自动化测试： [ ] axe-core 报告零违规 [ ] Lighthouse 无障碍分数 >= ${lighthouse_score:90} [ ] HTML 验证通过（影响辅助技术解析）

键盘测试： [ ] 无需鼠标即可完成全部任务 [ ] 焦点始终可见 [ ] Tab 顺序逻辑合理 [ ] 无陷阱

屏幕阅读器测试： [ ] 至少使用一种屏幕阅读器测试（${screen_reader:NVDA}） [ ] 所有内容播报正确 [ ] 交互元素具有角色/状态 [ ] 动态更新已播报

视觉测试： [ ] 对比度已验证（最低 ${contrast_ratio_normal:4.5}:1） [ ] 在 ${zoom_level:200}% 缩放下正常工作 [ ] 无仅通过颜色传达的信息 [ ] 尊重 prefers-reduced-motion ```

无障碍测试超能力工作流

提示词内容收藏

用法

参考资料

讨论