accessibility-testing

无障碍测试

目录

• 概述
• 适用场景
• 快速入门
• 参考指南
• 最佳实践

概述

无障碍测试确保残障人士能够使用 Web 应用，包括使用屏幕阅读器、键盘导航或其他辅助技术的人士。它用于验证是否符合 WCAG（Web 内容无障碍指南），并识别无障碍障碍。

适用场景

• 验证是否符合 WCAG 2.1/2.2
• 测试键盘导航
• 验证屏幕阅读器兼容性
• 测试颜色对比度
• 验证 ARIA 属性
• 测试表单无障碍性
• 确保焦点管理正常
• 使用辅助技术进行测试

快速入门

最简可运行示例：

// tests/accessibility/homepage.a11y.test.ts
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("Homepage Accessibility", () => {
  test("should not have any automatically detectable WCAG A or AA violations", async ({
    page,
  }) => {
    await page.goto("/");

    const accessibilityScanResults = await new AxeBuilder({ page })
      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
      .analyze();

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

  test("navigation should be accessible", async ({ page }) => {
    await page.goto("/");

    const results = await new AxeBuilder({ page }).include("nav").analyze();

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

// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南	内容
使用 Playwright 的 axe-core	使用 Playwright 的 axe-core
键盘导航测试	键盘导航测试
ARIA 测试	ARIA 测试
使用 jest-axe 的 Jest	使用 jest-axe 的 Jest
Cypress 无障碍测试	Cypress 无障碍测试
使用 Selenium 和 axe 的 Python	使用 Selenium 和 axe 的 Python

最佳实践

✅ 应该

• 使用真实的辅助技术进行测试
• 考虑仅使用键盘的用户
• 测试颜色对比度
• 使用语义化 HTML
• 提供文本替代内容
• 使用屏幕阅读器进行测试
• 在 CI 中运行自动化测试
• 遵循 WCAG 2.1 AA 标准

❌ 不应该

• 只依赖自动化测试（它们只能发现约 30-40% 的问题）
• 只用颜色传达信息
• 跳过键盘导航测试
• 忘记管理动态内容中的焦点
• 使用 div/span 实现交互元素
• 使用 display:none 隐藏可聚焦内容
• 忽视 ARIA 最佳实践
• 跳过手动测试