Web Accessibility: Complete WCAG 2.2 Implementation Guide

Web accessibility ensures everyone can use your website, regardless of their abilities. This guide covers WCAG 2.2 standards and practical implementation strategies.

Why Accessibility Matters

• Legal Compliance: Many countries require accessible websites
• Larger Audience: 15% of the world has some form of disability
• Better UX: Accessible sites benefit all users
• SEO Benefits: Semantic HTML improves search rankings

WCAG 2.2 Principles

1. Perceivable

Users must be able to perceive the information presented.

<!-- Good: Alt text for images -->
<img src="chart.png" alt="Sales increased 25% in Q4 2026" />

<!-- Good: Captions for videos -->
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

2. Operable

Users must be able to operate the interface.

<!-- Good: Keyboard accessible -->
<button onclick="handleClick()">Submit</button>

<!-- Bad: Not keyboard accessible -->
<div onclick="handleClick()">Submit</div>

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

3. Understandable

Information must be understandable.

<!-- Good: Clear labels -->
<label for="email">Email Address</label>
<input type="email" id="email" required aria-describedby="email-help" />
<span id="email-help">We'll never share your email</span>

<!-- Good: Error messages -->
<input type="email" aria-invalid="true" aria-describedby="email-error" />
<span id="email-error" role="alert">Please enter a valid email</span>

4. Robust

Content must work with assistive technologies.

<!-- Good: Semantic HTML -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
</main>

Practical Implementation

Color Contrast

Ensure sufficient contrast ratios:

• Normal text: 4.5:1 minimum
• Large text: 3:1 minimum
• UI components: 3:1 minimum

/* Good contrast */
.button {
  background: #0066cc;
  color: #ffffff; /* Contrast ratio: 7.5:1 */
}

/* Bad contrast */
.button-bad {
  background: #cccccc;
  color: #ffffff; /* Contrast ratio: 1.6:1 - fails */
}

Focus Indicators

/* Good: Visible focus */
button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Never do this */
*:focus {
  outline: none; /* Removes focus indicator */
}

ARIA Landmarks

<header role="banner">
  <nav role="navigation" aria-label="Main">
    <!-- Navigation -->
  </nav>
</header>

<main role="main">
  <!-- Main content -->
</main>

<aside role="complementary">
  <!-- Sidebar -->
</aside>

<footer role="contentinfo">
  <!-- Footer -->
</footer>

Form Accessibility

<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">Full Name *</label>
    <input 
      type="text" 
      id="name" 
      required 
      aria-required="true"
      aria-describedby="name-help"
    />
    <span id="name-help">Enter your first and last name</span>
  </fieldset>
  
  <button type="submit">Submit Form</button>
</form>

Testing Accessibility

Automated Testing

// Using axe-core
import { axe } from 'jest-axe';

test('page should be accessible', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Manual Testing

1. Keyboard Navigation: Tab through entire page
2. Screen Reader: Test with NVDA, JAWS, or VoiceOver
3. Zoom: Test at 200% zoom
4. Color Blindness: Use color blindness simulators

Common Mistakes to Avoid

1. Missing alt text on images
2. Poor color contrast
3. Keyboard traps
4. Missing form labels
5. Unclear link text (“click here”)
6. Auto-playing media
7. Time limits without extensions
8. Inaccessible modals

Accessibility Checklist

• All images have alt text
• Color contrast meets WCAG standards
• All functionality available via keyboard
• Forms have proper labels
• Headings are in logical order
• Links have descriptive text
• ARIA labels where needed
• Focus indicators visible
• Error messages are clear
• Content is responsive

Tools and Resources

Testing Tools

• axe DevTools: Browser extension
• WAVE: Web accessibility evaluation tool
• Lighthouse: Built into Chrome DevTools
• Screen readers: NVDA, JAWS, VoiceOver

Learning Resources

• W3C WCAG Guidelines
• WebAIM tutorials
• A11y Project
• Deque University

Conclusion

Web accessibility is not optional—it’s essential. By following WCAG guidelines and implementing these practices, you create better experiences for everyone.

Remember: Accessibility is a journey, not a destination. Continuously test, learn, and improve your implementations.