name: 可访问性测试 description: 测试Web应用程序的WCAG合规性，并确保残疾用户可用性。用于可访问性测试，a11y，axe，ARIA，键盘导航，屏幕阅读器兼容性和WCAG验证。

可访问性测试

概述

可访问性测试确保Web应用程序可以被残疾人士使用，包括使用屏幕阅读器、键盘导航或其他辅助技术的人。它验证了与WCAG（Web内容可访问性指南）的合规性，并识别了可访问性的障碍。

何时使用

验证WCAG 2.1/2.2合规性
测试键盘导航
验证屏幕阅读器兼容性
测试颜色对比度
验证ARIA属性
测试表单可访问性
确保焦点管理
使用辅助技术进行测试

WCAG级别

级别A：基本可访问性（必须有）
级别AA：中级可访问性（应该有，许多司法管辖区的法律要求）
级别AAA：高级可访问性（最好有）

指令

1. 使用Playwright的axe-core

// 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([]);
  });

  // ... 其余代码省略，保持原有格式不变

});

2. 键盘导航测试

// tests/accessibility/keyboard-navigation.test.ts
import { test, expect } from '@playwright/test';

test.describe('Keyboard Navigation', () => {
  // ... 其余代码省略，保持原有格式不变
});

3. ARIA测试

// tests/accessibility/aria.test.ts
import { test, expect } from '@playwright/test';

test.describe('ARIA Attributes', () => {
  // ... 其余代码省略，保持原有格式不变
});

4. 使用jest-axe的Jest

// tests/components/Button.a11y.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
import { Button } from '../Button';

// ... 其余代码省略，保持原有格式不变
});

5. Cypress可访问性测试

// cypress/e2e/accessibility.cy.js
describe('Accessibility Tests', () => {
  // ... 其余代码省略，保持原有格式不变
});

6. 使用Selenium和axe的Python

# tests/test_accessibility.py
import pytest
from selenium import webdriver
from axe_selenium_python import Axe

// ... 其余代码省略，保持原有格式不变

手动测试清单

// … 其余代码省略，保持原有格式不变

最佳实践

// … 其余代码省略，保持原有格式不变

工具

// … 其余代码省略，保持原有格式不变

标准

// … 其余代码省略，保持原有格式不变

示例

// … 其余代码省略，保持原有格式不变