WCAG 2.2 Compliance Hub: Complete Web Accessibility Guide

Introduction

Web accessibility ensures that websites and applications can be used by everyone, including people with disabilities. The Web Content Accessibility Guidelines (WCAG) 2.2 is the international standard for web accessibility, providing a comprehensive framework for making web content perceivable, operable, understandable, and robust.

Beyond ethical responsibility, WCAG compliance is increasingly a legal requirement in many jurisdictions and provides significant SEO benefits—accessible websites tend to rank better because they have better structure, clearer content, and improved user experience for all visitors.

This hub page brings together all resources for achieving and maintaining WCAG 2.2 compliance.

Why WCAG Compliance Matters

The Business Case

Accessibility Impact:
┌─────────────────────────────────────────────────────────┐
│ 15% of world population has some form of disability    │
│ 1 billion+ people benefit from accessible websites     │
│ $8 trillion annual spending power of disabled users    │
│ 71% of disabled users leave inaccessible websites      │
└─────────────────────────────────────────────────────────┘

Key Benefits

Benefit	Impact
Legal Compliance	Avoid lawsuits and regulatory penalties
Larger Audience	Reach 15%+ more potential users
Better SEO	Search engines favor accessible sites
Improved UX	Benefits all users, not just disabled
Brand Reputation	Demonstrates corporate responsibility

Legal Requirements

• ADA (US): Americans with Disabilities Act
• Section 508 (US): Federal accessibility requirements
• EU Accessibility Act: European Union directive
• AODA (Canada): Ontario accessibility law
• EN 301 549 (EU): European accessibility standard

WCAG 2.2 Structure Overview

The Four Principles (POUR)

WCAG is built around four core principles:

PERCEIVABLE
├── Users must be able to perceive the information
├── Content must be presentable in ways they can access
└── Examples: Alt text, captions, contrast

OPERABLE
├── Users must be able to operate the interface
├── Navigation must be accessible by all input methods
└── Examples: Keyboard access, no time limits

UNDERSTANDABLE
├── Users must understand the information and interface
├── Content must be readable and predictable
└── Examples: Clear labels, error identification

ROBUST
├── Content must be robust enough for various technologies
├── Must work with assistive technologies
└── Examples: Valid HTML, ARIA compatibility

Conformance Levels

WCAG has three levels of conformance:

Level	Meaning	Requirements
Level A	Minimum accessibility	Essential requirements
Level AA	Acceptable accessibility	Standard for most laws
Level AAA	Optimal accessibility	Highest standard

Recommendation: Target Level AA as the standard for most websites—it balances accessibility with practical implementation.

Success Criteria by Principle

Principle 1: Perceivable (29 criteria)

Key criteria:

• 1.1.1 Non-text Content (A): Alt text for images
• 1.3.1 Info and Relationships (A): Semantic structure
• 1.4.3 Contrast Minimum (AA): 4.5:1 text contrast
• 1.4.11 Non-text Contrast (AA): 3:1 UI contrast
• 1.4.13 Content on Hover/Focus (AA): Dismissible overlays

Principle 2: Operable (29 criteria)

Key criteria:

• 2.1.1 Keyboard (A): All functionality via keyboard
• 2.4.1 Bypass Blocks (A): Skip navigation links
• 2.4.4 Link Purpose (A): Descriptive link text
• 2.4.7 Focus Visible (AA): Visible focus indicators
• 2.5.5 Target Size (AAA): Touch target minimum 44×44px

Principle 3: Understandable (17 criteria)

Key criteria:

• 3.1.1 Language of Page (A): HTML lang attribute
• 3.2.1 On Focus (A): No unexpected changes
• 3.3.1 Error Identification (A): Clear error messages
• 3.3.2 Labels or Instructions (A): Form labels

Principle 4: Robust (3 criteria)

Key criteria:

• 4.1.1 Parsing (A): Valid HTML (deprecated in 2.2)
• 4.1.2 Name, Role, Value (A): Accessible components
• 4.1.3 Status Messages (AA): Announce status changes

Implementation Roadmap

Phase 1: Quick Wins (Week 1-2)

Focus on high-impact, low-effort fixes:

1. Add alt text to all images

   <img src="product.jpg" alt="Blue running shoes, size 10">
   

2. Fix color contrast issues

   • Text: 4.5:1 minimum
   • Large text: 3:1 minimum

3. Add HTML lang attribute

   <html lang="en">
   

4. Ensure form labels

   <label for="email">Email Address</label>
   <input type="email" id="email" name="email">
   

5. Add skip link

   <a href="#main" class="skip-link">Skip to main content</a>
   

Phase 2: Structural Improvements (Week 3-4)

1. Implement semantic HTML

   <header>...</header>
   <nav>...</nav>
   <main>
     <article>
       <h1>...</h1>
       <section>...</section>
     </article>
   </main>
   <footer>...</footer>
   

2. Fix heading hierarchy

   • One H1 per page
   • Sequential headings (no skipping levels)

3. Add ARIA landmarks

   <nav aria-label="Main navigation">...</nav>
   <main aria-label="Main content">...</main>
   

4. Implement focus management

   :focus {
     outline: 2px solid #005fcc;
     outline-offset: 2px;
   }
   

Phase 3: Interactive Elements (Week 5-6)

1. Keyboard navigation

   • All interactive elements focusable
   • Logical tab order
   • No keyboard traps

2. Form accessibility

   • Error identification
   • Required field indicators
   • Input validation messages

3. Custom components

   • Proper ARIA roles
   • Keyboard support
   • Focus management

Phase 4: Media & Advanced (Week 7-8)

1. Video captions

   <video>
     <track kind="captions" src="captions.vtt" srclang="en">
   </video>
   

2. Audio transcripts

3. Complex images

   • Charts with data tables
   • Infographics with descriptions

4. Motion considerations

   @media (prefers-reduced-motion: reduce) {
     * { animation: none !important; }
   }
   

Testing for WCAG Compliance

Automated Testing Tools

Tool	Type	Best For
axe DevTools	Browser extension	Quick scans
WAVE	Browser extension	Visual feedback
Lighthouse	Chrome DevTools	Performance + a11y
Pa11y	CLI tool	CI/CD integration
axe-core	npm package	Automated testing

Manual Testing Checklist

Keyboard Testing:

• [ ] Tab through entire page
• [ ] Use Enter/Space to activate
• [ ] Escape to close modals
• [ ] No focus traps

Screen Reader Testing:

• [ ] Test with NVDA (Windows)
• [ ] Test with VoiceOver (Mac/iOS)
• [ ] Test with TalkBack (Android)

Visual Testing:

• [ ] Zoom to 200%
• [ ] Test high contrast mode
• [ ] Check with color blindness simulators

Testing Code Example

// Using axe-core for automated testing
const { AxeBuilder } = require('@axe-core/playwright');

test('should have no accessibility violations', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();

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

Common WCAG Violations

Top 10 Most Common Issues

1. Missing alt text (1.1.1)

   • 58% of images lack proper alt text

2. Low color contrast (1.4.3)

   • Light gray text on white backgrounds

3. Missing form labels (1.3.1, 3.3.2)

   • Placeholder text isn’t a label

4. Missing document language (3.1.1)

   • No <html lang="en">

5. Empty links (2.4.4)

   • Links with no text or aria-label

6. Missing focus indicators (2.4.7)

   • outline: none without alternative

7. Improper heading structure (1.3.1)

   • Skipping heading levels

8. Keyboard inaccessible (2.1.1)

   • Custom controls not focusable

9. Missing skip links (2.4.1)

   • No way to bypass navigation

10. Non-descriptive links (2.4.4)

    • “Click here” or “Read more”

Quick Fixes

<!-- Bad: Missing alt -->
<img src="photo.jpg">

<!-- Good: Descriptive alt -->
<img src="photo.jpg" alt="Team meeting in conference room">

<!-- Bad: Placeholder as label -->
<input placeholder="Email">

<!-- Good: Proper label -->
<label for="email">Email Address</label>
<input type="email" id="email">

<!-- Bad: Non-descriptive link -->
<a href="/report.pdf">Click here</a>

<!-- Good: Descriptive link -->
<a href="/report.pdf">Download Q4 Financial Report (PDF)</a>

WCAG 2.2 New Success Criteria

WCAG 2.2 (released 2023) adds 9 new success criteria:

Level A (New)

• 2.4.11 Focus Not Obscured (Minimum): Focused element must be at least partially visible
• 3.2.6 Consistent Help: Help mechanisms in consistent location
• 3.3.7 Redundant Entry: Don’t require re-entering same information

Level AA (New)

• 2.4.12 Focus Not Obscured (Enhanced): Focused element fully visible
• 2.4.13 Focus Appearance: Enhanced focus indicator requirements
• 2.5.7 Dragging Movements: Alternative to drag-and-drop
• 2.5.8 Target Size (Minimum): 24×24px minimum touch targets
• 3.3.8 Accessible Authentication (Minimum): Login without cognitive function test

Level AAA (New)

• 3.3.9 Accessible Authentication (Enhanced): No object/image recognition required

Resources by Topic

Perceivable (WCAG Principle 1)

Color & Contrast (7.1)

• Color Contrast Explained - WCAG 1.4.3 requirements
• Color Contrast Optimization Guide - Implementation patterns

Images & Alt Text (7.2)

• Alt Text Explained - WCAG 1.1.1 requirements
• Alt Text Implementation Guide - Writing effective alt text

Images of Text (7.14)

• Images of Text Explained - WCAG 1.4.5 requirements
• Images of Text Implementation Guide - CSS text alternatives

Resize Text (7.13)

• Resize Text Explained - WCAG 1.4.4 requirements
• Resize Text Implementation Guide - Responsive typography

Operable (WCAG Principle 2)

Keyboard Navigation (7.5)

• Keyboard Navigation Explained - WCAG 2.1.1 requirements
• Keyboard Navigation Implementation Guide - Full keyboard support

Focus Indicators (7.6)

• Focus Indicators Explained - WCAG 2.4.7 requirements
• Focus Indicators Implementation Guide - Visible focus states

Skip Links (7.7)

• Skip Links Explained - WCAG 2.4.1 requirements
• Skip Links Implementation Guide - Bypass blocks

Touch Targets (7.8)

• Touch Targets Explained - WCAG 2.5.5 & 2.5.8 requirements
• Touch Targets Implementation Guide - Minimum sizes

Link Purpose (7.9)

• Link Purpose Explained - WCAG 2.4.4 requirements
• Link Purpose Implementation Guide - Descriptive links

Consistent Navigation (7.15)

• Consistent Navigation Explained - WCAG 3.2.3 requirements
• Consistent Navigation Implementation Guide - Predictable menus

Understandable (WCAG Principle 3)

Language Attributes (7.12)

• Language Attributes Explained - WCAG 3.1.1 & 3.1.2 requirements
• Language Attributes Implementation Guide - HTML lang usage

Forms & Labels (7.3)

• Form Labels Explained - WCAG 1.3.1 & 3.3.2 requirements
• Form Labels Implementation Guide - Accessible form patterns

Error Identification (7.11)

• Error Identification Explained - WCAG 3.3.1 requirements
• Error Identification Implementation Guide - Error handling patterns

Robust (WCAG Principle 4)

ARIA Compliance (7.4)

• ARIA Labels Explained - WCAG 4.1.2 requirements
• ARIA Labels Implementation Guide - ARIA best practices

Semantic HTML (7.10)

• Semantic HTML Explained - HTML structure requirements
• Semantic HTML Implementation Guide - Semantic markup patterns

Related Hubs

• Accessible Components Hub - ARIA components
• Technical SEO Hub - Technical optimizations
• Basic SEO Fundamentals Hub - Core SEO

Accessibility Statement Template

<h1>Accessibility Statement</h1>

<p>[Company Name] is committed to ensuring digital accessibility
for people with disabilities. We continually improve the user
experience for everyone and apply relevant accessibility standards.</p>

<h2>Conformance Status</h2>
<p>This website conforms to WCAG 2.2 Level AA. We regularly
test our site using automated tools and manual testing.</p>

<h2>Feedback</h2>
<p>We welcome your feedback on accessibility. Please contact us:</p>
<ul>
  <li>Email: [email protected]</li>
  <li>Phone: 1-800-XXX-XXXX</li>
</ul>

<h2>Technical Specifications</h2>
<p>This site relies on HTML, CSS, JavaScript, and WAI-ARIA.</p>

<p>Last updated: [Date]</p>

Monitoring & Maintenance

Ongoing Tasks

1. Automated scans: Run axe-core in CI/CD pipeline
2. User feedback: Provide accessibility contact
3. Regular audits: Quarterly manual testing
4. Training: Educate development team
5. Documentation: Maintain accessibility statement

Accessibility Metrics

Track These Metrics:
├── Number of WCAG violations (by severity)
├── Automated test coverage
├── User feedback/complaints
├── Screen reader compatibility
└── Keyboard navigation completion rate

Quick Reference

Essential Checks

Check	WCAG	Level	Quick Test
Alt text	1.1.1	A	Check all images
Contrast	1.4.3	AA	Use contrast checker
Labels	1.3.1	A	Inspect form inputs
Lang	3.1.1	A	Check <html lang>
Keyboard	2.1.1	A	Tab through page
Focus	2.4.7	AA	Tab and watch focus
Headings	1.3.1	A	Check hierarchy

Useful Bookmarklets

// Highlight all images without alt
javascript:(function(){document.querySelectorAll('img:not([alt])').forEach(img=>img.style.border='5px solid red')})();

// Show heading outline
javascript:(function(){document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((h,i)=>h.style.outline='2px solid hsl('+i*60+',100%,50%)')})();

---

References

1. W3C - WCAG 2.2 Specification
2. WebAIM - WCAG 2 Checklist
3. W3C - Understanding WCAG 2.2
4. W3C - Web Accessibility Initiative
5. A11Y Project - Checklist
6. Deque - axe DevTools
7. US Access Board - Section 508