qe-accessibility-testing

无障碍测试

<default_to_action> 测试无障碍功能或确保符合规范时：

1. 应用 POUR 原则：可感知、可操作、可理解、健壮
2. 使用仅键盘导航进行测试（Tab、Enter、Escape）
3. 使用屏幕阅读器进行验证（VoiceOver、NVDA、JAWS）
4. 检查色彩对比度（文本为 4.5:1，大号文本为 3:1）
5. 使用 axe-core 自动化测试，并集成到 CI/CD 流水线中

无障碍快速检查清单：

• 所有图像都有替代文本（装饰性图像使用 alt=""）
• 所有表单字段都有标签
• 颜色绝不是唯一的指示方式
• 所有交互元素都有可见的焦点
• 键盘导航全程可用

关键成功因素：

• 自动化测试可发现 30-50% 的问题
• 必须使用真实辅助技术进行手动测试
• 测试时应包含残障用户 </default_to_action>

快速参考卡

适用场景

• 法律合规（ADA、Section 508、欧盟指令）
• 新功能开发
• 发布前验证
• 无障碍审计

WCAG 2.2 等级

等级	要求	目标
A	基本无障碍	法律最低要求
AA	标准（大多数组织）	行业标准
AAA	增强型	特殊用途网站

POUR 原则

原则	含义	关键测试
Perceivable	能感知内容	替代文本、对比度、字幕
Operable	能操作 UI	键盘、避免引发癫痫、导航
Understandable	能理解内容	清晰标签、行为可预测、错误提示
Robust	兼容辅助技术	有效 HTML、ARIA

色彩对比度要求

内容	AA 比率	AAA 比率
普通文本	4.5:1	7:1
大号文本（18pt+）	3:1	4.5:1
UI 组件	3:1	-

---

键盘导航测试

// Test all interactive elements reachable via keyboard
test('all interactive elements keyboard accessible', async ({ page }) => {
  await page.goto('/');

  const focusableElements = await page.$$('button, a, input, select, textarea, [tabindex]');

  for (const element of focusableElements) {
    await element.focus();
    const isFocused = await element.evaluate(el => document.activeElement === el);
    expect(isFocused).toBe(true);
  }
});

// Verify visible focus indicator
test('focus indicator visible', async ({ page }) => {
  await page.goto('/');
  await page.keyboard.press('Tab');

  const focusedElement = await page.locator(':focus');
  const outline = await focusedElement.evaluate(el =>
    getComputedStyle(el).outline
  );

  expect(outline).not.toBe('none');
});

---

使用 axe-core 进行自动化测试

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('page has no accessibility violations', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();

  expect(results.violations).toEqual([]);
});

// CI/CD integration
test('checkout flow accessible', async ({ page }) => {
  await page.goto('/checkout');

  const results = await new AxeBuilder({ page })
    .include('#checkout-form')
    .disableRules(['color-contrast']) // Fix in next sprint
    .analyze();

  expect(results.violations.filter(v =>
    v.impact === 'critical' || v.impact === 'serious'
  )).toHaveLength(0);
});

---

屏幕阅读器测试清单

## VoiceOver (macOS) Testing
- [ ] Page title announced on load
- [ ] Headings hierarchy correct (h1 → h2 → h3)
- [ ] Landmarks present (nav, main, footer)
- [ ] Images have descriptive alt text
- [ ] Form labels read correctly
- [ ] Error messages announced
- [ ] Dynamic content updates announced (aria-live)

---

Agent 驱动的无障碍测试

// Comprehensive a11y validation
await Task("Accessibility Validation", {
  url: 'https://example.com/checkout',
  standard: 'WCAG2.2',
  level: 'AA',
  checks: ['keyboard', 'screen-reader', 'color-contrast'],
  includeScreenReaderSimulation: true
}, "qe-visual-tester");

// Fleet coordination for comprehensive testing
const a11yFleet = await FleetManager.coordinate({
  strategy: 'comprehensive-accessibility',
  agents: [
    'qe-visual-tester',     // Visual & keyboard checks
    'qe-test-generator',    // Generate a11y tests
    'qe-quality-gate'       // Enforce compliance
  ],
  topology: 'parallel'
});

---

Agent 协作提示

记忆命名空间

aqe/accessibility/
├── wcag-results/*       - WCAG audit results
├── screen-reader/*      - Screen reader test logs
├── remediation/*        - Fix recommendations
└── compliance/*         - Compliance reports

Fleet 协作

const a11yFleet = await FleetManager.coordinate({
  strategy: 'accessibility-testing',
  agents: [
    'qe-visual-tester',   // axe-core, keyboard, focus
    'qe-test-generator',  // Generate a11y test cases
    'qe-quality-gate'     // Block non-compliant builds
  ],
  topology: 'parallel'
});

---

相关技能

• visual-testing-advanced - 视觉无障碍检查
• mobile-testing - 移动设备无障碍测试（VoiceOver、TalkBack）
• compliance-testing - 法律合规

---

请记住

全球有 10 亿残障人士。无法访问的软件将 15% 的人类排除在外。 法律要求：ADA、Section 508、欧盟指令 2016/2102。13 万亿美元的购买力。诉讼数量增加 250% 以上。

自动化测试只能发现 30-50% 的问题。 还需结合手动键盘测试、屏幕阅读器测试，以及与残障人士进行真实用户测试。

使用 Agent： Agent 可自动检查 WCAG 2.2 合规性、模拟屏幕阅读器并验证焦点管理。使用 Agent 在 CI/CD 中落实无障碍标准，并在产品上线前发现违规问题。