accessibility-testing
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAccessibility Testing
无障碍测试
<default_to_action>
When testing accessibility or ensuring compliance:
- APPLY POUR principles: Perceivable, Operable, Understandable, Robust
- TEST with keyboard-only navigation (Tab, Enter, Escape)
- VALIDATE with screen readers (VoiceOver, NVDA, JAWS)
- CHECK color contrast (4.5:1 for text, 3:1 for large text)
- 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>
在进行无障碍测试或确保合规性时:
- 遵循POUR原则:可感知(Perceivable)、可操作(Operable)、可理解(Understandable)、健壮性(Robust)
- 仅使用键盘导航进行测试(Tab、Enter、Esc键)
- 通过屏幕阅读器验证(VoiceOver、NVDA、JAWS)
- 检查色彩对比度(普通文本4.5:1,大文本3:1)
- 使用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 级别
| Level | Requirement | Target |
|---|---|---|
| A | Basic accessibility | Minimum legal |
| AA | Standard (most orgs) | Industry standard |
| AAA | Enhanced | Specialized sites |
| 级别 | 要求 | 目标 |
|---|---|---|
| A | 基础无障碍要求 | 最低合规要求 |
| AA | 标准要求(多数组织适用) | 行业标准 |
| AAA | 增强要求 | 专业站点适用 |
POUR Principles
POUR原则
| Principle | Meaning | Key Tests |
|---|---|---|
| Perceivable | Can perceive content | Alt text, contrast, captions |
| Operable | Can operate UI | Keyboard, no seizures, navigation |
| Understandable | Can understand | Clear labels, predictable, errors |
| Robust | Works with assistive tech | Valid HTML, ARIA |
| 原则 | 含义 | 核心测试项 |
|---|---|---|
| Perceivable(可感知) | 可感知内容 | 替代文本、对比度、字幕 |
| Operable(可操作) | 可操作UI | 键盘导航、无 seizure 风险、导航设计 |
| Understandable(可理解) | 可理解内容 | 清晰标签、可预测性、错误提示 |
| Robust(健壮性) | 兼容辅助技术 | 有效HTML、ARIA |
Color Contrast Requirements
色彩对比度要求
| Content | AA Ratio | AAA Ratio |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+) | 3:1 | 4.5:1 |
| UI components | 3:1 | - |
| 内容 | AA标准比值 | AAA标准比值 |
|---|---|---|
| 普通文本 | 4.5:1 | 7:1 |
| 大文本(18pt及以上) | 3:1 | 4.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
undefinedmarkdown
undefinedVoiceOver (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 reportsaqe/accessibility/
├── wcag-results/* - WCAG audit results
├── screen-reader/* - Screen reader test logs
├── remediation/* - Fix recommendations
└── compliance/* - Compliance reportsFleet 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中强制执行无障碍标准,在生产前发现违规问题。