accessibility-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessibility Testing

无障碍测试

<default_to_action> When testing accessibility or ensuring compliance:
  1. APPLY POUR principles: Perceivable, Operable, Understandable, Robust
  2. TEST with keyboard-only navigation (Tab, Enter, Escape)
  3. VALIDATE with screen readers (VoiceOver, NVDA, JAWS)
  4. CHECK color contrast (4.5:1 for text, 3:1 for large text)
  5. AUTOMATE with axe-core, integrate in CI/CD pipeline
Quick A11y Checklist:
  • All images have alt text (or alt="" for decorative)
  • All form fields have labels
  • Color is never the only indicator
  • Focus visible on all interactive elements
  • Keyboard navigation works throughout
Critical Success Factors:
  • Automated testing catches 30-50% of issues
  • Manual testing with real assistive tech required
  • Include users with disabilities in testing </default_to_action>
<default_to_action> 在进行无障碍测试或确保合规性时:
  1. 遵循POUR原则:可感知(Perceivable)、可操作(Operable)、可理解(Understandable)、健壮性(Robust)
  2. 仅使用键盘导航进行测试(Tab、Enter、Esc键)
  3. 通过屏幕阅读器验证(VoiceOver、NVDA、JAWS)
  4. 检查色彩对比度(普通文本4.5:1,大文本3:1)
  5. 使用axe-core实现自动化,集成至CI/CD流水线
快速无障碍检查清单:
  • 所有图片均配有替代文本(装饰性图片使用alt="")
  • 所有表单字段均有标签
  • 色彩不能作为唯一的提示方式
  • 所有交互元素的焦点状态可见
  • 全程支持键盘导航
关键成功因素:
  • 自动化测试可发现30-50%的问题
  • 需结合真实辅助技术进行手动测试
  • 邀请残障用户参与测试 </default_to_action>

Quick Reference Card

快速参考卡片

When to Use

适用场景

  • Legal compliance (ADA, Section 508, EU Directive)
  • New feature development
  • Before release validation
  • Accessibility audits
  • 合规性要求(ADA、第508条、欧盟指令)
  • 新功能开发
  • 发布前验证
  • 无障碍审计

WCAG 2.2 Levels

WCAG 2.2 级别

LevelRequirementTarget
ABasic accessibilityMinimum legal
AAStandard (most orgs)Industry standard
AAAEnhancedSpecialized sites
级别要求目标
A基础无障碍要求最低合规要求
AA标准要求(多数组织适用)行业标准
AAA增强要求专业站点适用

POUR Principles

POUR原则

PrincipleMeaningKey Tests
PerceivableCan perceive contentAlt text, contrast, captions
OperableCan operate UIKeyboard, no seizures, navigation
UnderstandableCan understandClear labels, predictable, errors
RobustWorks with assistive techValid HTML, ARIA
原则含义核心测试项
Perceivable(可感知)可感知内容替代文本、对比度、字幕
Operable(可操作)可操作UI键盘导航、无 seizure 风险、导航设计
Understandable(可理解)可理解内容清晰标签、可预测性、错误提示
Robust(健壮性)兼容辅助技术有效HTML、ARIA

Color Contrast Requirements

色彩对比度要求

ContentAA RatioAAA Ratio
Normal text4.5:17:1
Large text (18pt+)3:14.5:1
UI components3:1-

内容AA标准比值AAA标准比值
普通文本4.5:17:1
大文本(18pt及以上)3:14.5:1
UI组件3:1-

Keyboard Navigation Testing

键盘导航测试

javascript
// 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');
});

javascript
// 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');
});

Automated Testing with axe-core

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

javascript
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);
});

javascript
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);
});

Screen Reader Testing Checklist

屏幕阅读器测试清单

markdown
undefined
markdown
undefined

VoiceOver (macOS) Testing

VoiceOver (macOS) 测试

  • 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)

---
  • 页面加载时会播报页面标题
  • 标题层级正确(h1 → h2 → h3)
  • 存在地标元素(nav、main、footer)
  • 图片配有描述性替代文本
  • 表单标签可正确读取
  • 错误消息会被播报
  • 动态内容更新会被播报(aria-live)

---

Agent-Driven Accessibility

Agent驱动的无障碍测试

typescript
// 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'
});

typescript
// 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 Coordination Hints

Agent协作提示

Memory Namespace

内存命名空间

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

Fleet Coordination

集群协作

typescript
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'
});

typescript
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'
});

Related Skills

相关技能

  • visual-testing-advanced - Visual a11y checks
  • mobile-testing - Mobile a11y (VoiceOver, TalkBack)
  • compliance-testing - Legal compliance

  • 高级视觉测试 - 视觉无障碍检查
  • 移动测试 - 移动端无障碍测试(VoiceOver、TalkBack)
  • 合规性测试 - 合规性验证

Remember

注意事项

1 billion people have disabilities. Inaccessible software excludes 15% of humanity. Legal requirements: ADA, Section 508, EU Directive 2016/2102. $13T purchasing power. 250%+ increase in lawsuits.
Automated testing catches only 30-50% of issues. Combine with manual keyboard testing, screen reader testing, and real user testing with people with disabilities.
With Agents: Agents automate WCAG 2.2 compliance checking, screen reader simulation, and focus management validation. Use agents to enforce accessibility standards in CI/CD and catch violations before production.
全球有10亿残障人士。无障碍软件缺失会将15%的人群排除在外。 合规要求包括:ADA、第508条、欧盟指令2016/2102。残障用户的购买力达13万亿美元,相关诉讼量增长超250%。
自动化测试仅能发现30-50%的问题。 需结合手动键盘测试、屏幕阅读器测试及残障用户参与的真实测试。
借助Agent: Agent可自动执行WCAG 2.2合规性检查、屏幕阅读器模拟及焦点管理验证。使用Agent在CI/CD中强制执行无障碍标准,在生产前发现违规问题。