文本无障碍测试与修复指南
提示词主题封面

文本

无障碍测试与修复指南

按照 WCAG 工作流检查键盘操作、屏幕阅读器、ARIA 和对比度，并安排修复优先级。

打开 chatgpt.com 查看原始出处

Prompt

---
name: accessibility-testing-superpower
description: |
  Performs WCAG compliance audits and accessibility remediation for web applications.
  Use when: 1) Auditing UI for WCAG 2.1/2.2 compliance 2) Fixing screen reader or keyboard navigation issues 3) Implementing ARIA patterns correctly 4) Reviewing color contrast and visual accessibility 5) Creating accessible forms or interactive components
---

# 无障碍测试工作流

## 配置

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

## 审查决策树

```
Accessibility request received
|
+-- New component/page?
|   +-- Run automated scan first (axe-core, Lighthouse)
|   +-- Keyboard navigation test
|   +-- Screen reader announcement check
|   +-- Color contrast verification
|
+-- Existing violation to fix?
|   +-- Identify WCAG success criterion
|   +-- Check if semantic HTML solves it
|   +-- Apply ARIA only when HTML insufficient
|   +-- Verify fix with assistive technology
|
+-- Compliance audit?
    +-- Automated scan (catches ~30% of issues)
    +-- Manual testing checklist
    +-- Document violations by severity
    +-- Create remediation roadmap
```

## WCAG 快速参考

### 严重程度分类

| 严重程度 | 影响 | 示例 | 修复时限 |
|----------|--------|----------|--------------|
| 严重 | 完全阻碍访问 | 无键盘焦点、空按钮、功能性图像缺少替代文本 | 立即 |
| 高 | 造成重大障碍 | 对比度差、表单缺少标签、没有跳过链接 | 当前迭代内 |
| 中 | 使用困难但仍可操作 | 导航不一致、错误消息不清楚 | 下次发布 |
| 低 | 带来不便 | 冗余的替代文本、轻微的标题顺序问题 | 待办事项 |

### 常见违规及修复方法

**缺少无障碍名称**
```html
<!-- Violation -->
<button><svg>...</svg></button>

<!-- Fix: aria-label -->
<button aria-label="Close dialog"><svg>...</svg></button>

<!-- Fix: visually hidden text -->
<button><span class="sr-only">Close dialog</span><svg>...</svg></button>
```

**表单标签关联**
```html
<!-- Violation -->
<label>Email</label>
<input type="email">

<!-- Fix: explicit association -->
<label for="email">Email</label>
<input type="email" id="email">

<!-- Fix: implicit association -->
<label>Email <input type="email"></label>
```

**颜色对比度不合格**
```
Minimum ratios (WCAG ${wcag_level:AA}):
- Normal text (<${large_text_size:18}px or <${bold_text_size:14}px bold): ${contrast_ratio_normal:4.5}:1
- Large text (>=${large_text_size:18}px or >=${bold_text_size:14}px bold): ${contrast_ratio_large:3}:1
- UI components and graphics: 3:1

Tools: WebAIM Contrast Checker, browser DevTools
```

**焦点可见性**
```css
/* Never do this without alternative */
:focus { outline: none; }

/* Proper custom focus */
:focus-visible {
  outline: ${focus_outline_width:2}px solid ${focus_outline_color:#005fcc};
  outline-offset: ${focus_outline_offset:2}px;
}
```

## ARIA 决策框架

```
Need to convey information to assistive technology?
|
+-- Can semantic HTML do it?
|   +-- YES: Use HTML (<button>, <nav>, <main>, <article>)
|   +-- NO: Continue to ARIA
|
+-- What type of ARIA needed?
    +-- Role: What IS this element? (role="dialog", role="tab")
    +-- State: What condition? (aria-expanded, aria-checked)
    +-- Property: What relationship? (aria-labelledby, aria-describedby)
    +-- Live region: Dynamic content? (aria-live="${aria_live_mode:polite}")
```

### 常见控件的 ARIA 模式

**展开/收起（显示/隐藏）**
```html
<button aria-expanded="false" aria-controls="content-1">
  Show details
</button>
<div id="content-1" hidden>
  Content here
</div>
```

**标签页界面**
```html
<div role="tablist" aria-label="${component_name:Settings}">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
    Privacy
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>
```

**模态对话框**
```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm action</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</div>
```

## 键盘导航检查清单

```
[ ] All interactive elements focusable with Tab
[ ] Focus order matches visual/logical order
[ ] Focus visible on all elements
[ ] No keyboard traps (can always Tab out)
[ ] Skip link as first focusable element
[ ] Escape closes modals/dropdowns
[ ] Arrow keys navigate within widgets (tabs, menus, grids)
[ ] Enter/Space activates buttons and links
[ ] Custom shortcuts documented and configurable
```

### 焦点管理模式

**模态框焦点陷阱**
```javascript
// On modal open:
// 1. Save previously focused element
// 2. Move focus to first focusable in modal
// 3. Trap Tab within modal boundaries

// On modal close:
// 1. Return focus to saved element
```

**动态内容**
```javascript
// After adding content:
// - Announce via aria-live region, OR
// - Move focus to new content heading

// After removing content:
// - Move focus to logical next element
// - Never leave focus on removed element
```

## 屏幕阅读器测试

### 播报验证

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

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

**VoiceOver（macOS）**
- VO = Ctrl + Option
- VO + A：全部朗读
- VO + 右/左：浏览元素
- VO + Cmd + H：下一个标题
- VO + Cmd + J：下一个表单控件

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

## 自动化测试集成

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

test('${component_name:component} is accessible', async () => {
  const { container } = render(<${component_name:MyComponent} />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});
```

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

## 修复优先级矩阵

```
Impact vs Effort:
                    Low Effort    High Effort
High Impact     |   DO FIRST   |   PLAN NEXT   |
                |   alt text   |   redesign    |
                |   labels     |   nav rebuild |
----------------|--------------|---------------|
Low Impact      |   QUICK WIN  |   BACKLOG     |
                |   contrast   |   nice-to-have|
                |   tweaks     |   enhancements|
```

## 验证清单

标记无障碍工作完成前：

```
Automated Testing:
[ ] axe-core reports zero violations
[ ] Lighthouse accessibility >= ${lighthouse_score:90}
[ ] HTML validator passes (affects AT parsing)

Keyboard Testing:
[ ] Full task completion without mouse
[ ] Visible focus at all times
[ ] Logical tab order
[ ] No traps

Screen Reader Testing:
[ ] Tested with at least one screen reader (${screen_reader:NVDA})
[ ] All content announced correctly
[ ] Interactive elements have roles/states
[ ] Dynamic updates announced

Visual Testing:
[ ] Contrast ratios verified (${contrast_ratio_normal:4.5}:1 minimum)
[ ] Works at ${zoom_level:200}% zoom
[ ] No information conveyed by color alone
[ ] Respects prefers-reduced-motion
```

使用建议

替换标准、组件和测试工具等参数，用于审查页面或交互组件。

信息

类型
文本
许可
CC0-1.0

反馈这条内容