testing-accessibility（测试可访问性）

Accessibility Testing

Test applications for accessibility compliance with WCAG guidelines to ensure usability for people with disabilities.

When to use me

Use this skill when:

• Developing public-facing applications
• Complying with legal requirements (ADA, Section 508)
• Ensuring inclusive design for all users
• Testing screen reader compatibility
• Validating keyboard navigation
• Checking color contrast and visual accessibility
• Testing with assistive technologies

What I do

• Test screen reader compatibility and semantic HTML
• Validate keyboard navigation and focus management
• Check color contrast ratios for visual accessibility
• Test form labels and input accessibility
• Verify proper heading structure and document outline
• Test alternative text for images and media
• Check ARIA attributes and roles
• Validate touch target sizes on mobile devices
• Test with actual assistive technologies

Examples

# Automated accessibility testing
npm run test:a11y                 # axe-core, pa11y
npx pa11y https://app.example.com
npx axe https://app.example.com --save results.json

# Lighthouse accessibility audits
npx lighthouse https://app.example.com --output json --only-categories=accessibility

# Color contrast checking
npx color-contrast-checker --url https://app.example.com

# Screen reader testing guidance
# Manual testing with NVDA, JAWS, VoiceOver, TalkBack

# HTML validation
npm run html-validator           # HTML validation
python -m html5validator src/   # HTML5 validation

Output format

Accessibility Test Results:
──────────────────────────────
WCAG 2.1 AA Compliance:

Critical Issues (4):
  ❌ Missing form labels (3 instances)
    Impact: Screen reader users cannot identify form fields
    Fix: Add <label> elements with for attributes

  ❌ Insufficient color contrast (12 elements)
    Impact: Low vision users cannot read text
    Fix: Increase contrast ratio to 4.5:1 minimum

  ❌ Missing alternative text for images (7 images)
    Impact: Screen reader users miss image content
    Fix: Add descriptive alt text

  ❌ Keyboard trap in modal dialog
    Impact: Keyboard users cannot escape modal
    Fix: Implement proper focus management

Moderate Issues (8):
  ⚠️ Heading structure skips levels (h2 → h4)
  ⚠️ ARIA attributes missing on dynamic content
  ⚠️ Form error messages not associated with fields

Passed Checks (42):
  ✅ Semantic HTML structure
  ✅ Keyboard navigation works
  ✅ Focus indicators visible
  ✅ Language attribute set

Summary: 4 critical, 8 moderate issues found
Compliance: Partially compliant with WCAG 2.1 AA

Notes

• Automated tools catch ~30-40% of accessibility issues
• Manual testing with assistive technologies is essential
• Follow WCAG 2.1/2.2 guidelines (A, AA, AAA levels)
• Test with real users with disabilities when possible
• Consider cognitive and motor disabilities beyond visual
• Implement accessibility early in development cycle
• Train developers on accessible coding practices
• Create accessibility statement for your application