wcag-audit-patterns

WCAG 2.2のアクセシビリティ監査を実施し、自動テスト、手動検証、是正ガイダンスを活用します。ウェブサイトのアクセシビリティ監査、WCAG違反の修正、アクセシブルデザインパターンの実装などに利用してください。

@wshobsonMIT更新 2026-08-22v0.1.0直近30日 1 回
コンテキストを 489 トークン使用しますコンテキストを 489 トークン 使用します

WCAG Audit Patterns

Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies.

When to Use This Skill

  • Conducting accessibility audits
  • Fixing WCAG violations
  • Implementing accessible components
  • Preparing for accessibility lawsuits
  • Meeting ADA/Section 508 requirements
  • Achieving VPAT compliance

Core Concepts

1. WCAG Conformance Levels

LevelDescriptionRequired For
AMinimum accessibilityLegal baseline
AAStandard conformanceMost regulations
AAAEnhanced accessibilitySpecialized needs

2. POUR Principles

Perceivable:  Can users perceive the content?
Operable:     Can users operate the interface?
Understandable: Can users understand the content?
Robust:       Does it work with assistive tech?

3. Common Violations by Impact

Critical (Blockers):
├── Missing alt text for functional images
├── No keyboard access to interactive elements
├── Missing form labels
└── Auto-playing media without controls

Serious:
├── Insufficient color contrast
├── Missing skip links
├── Inaccessible custom widgets
└── Missing page titles

Moderate:
├── Missing language attribute
├── Unclear link text
├── Missing landmarks
└── Improper heading hierarchy

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Do's

  • Start early - Accessibility from design phase
  • Test with real users - Disabled users provide best feedback
  • Automate what you can - 30-50% issues detectable
  • Use semantic HTML - Reduces ARIA needs
  • Document patterns - Build accessible component library

Don'ts

  • Don't rely only on automated testing - Manual testing required
  • Don't use ARIA as first solution - Native HTML first
  • Don't hide focus outlines - Keyboard users need them
  • Don't disable zoom - Users need to resize
  • Don't use color alone - Multiple indicators needed