WCAG 2.2: The Complete Guide to Web Accessibility in 2024

The Web Content Accessibility Guidelines (WCAG) 2.2 are the latest standard for digital accessibility. In this comprehensive guide, we'll cover everything you need to know to make your website compliant.

What's New in WCAG 2.2?

WCAG 2.2 introduces 9 new success criteria focusing on:

1. Focus Appearance (Level AA)

Focus indicators must now have a minimum 3:1 contrast ratio with the background and cover an area at least as large as the perimeter of the element with 1px thickness.

Why it matters: Users navigating with keyboard must clearly see where focus is located.

Implementation tip:

:focus-visible {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
}

2. Focus Not Obscured (Level AA)

When an element receives focus, it must not be completely hidden by other content.

Practical example: Sticky headers shouldn't completely cover focused elements. Ensure adequate scroll-padding.

3. Dragging Movements (Level AA)

All functionality using dragging must also be available via single pointer without dragging.

Implementation: Provide alternative buttons for drag-and-drop interfaces:

• Arrow buttons for reordering
• "Move to" dropdown menus
• Numeric position input fields

4. Target Size (Level AA)

Interactive elements must be at least 24x24 CSS pixels, with some exceptions.

Best practice: Make touch targets at least 44x44 pixels for mobile devices.

Implementation Strategy

Step 1: Audit Your Current Website

Start with a thorough scan of your website to determine current accessibility state:

1. Automated testing: Use tools like AllyScan for initial analysis
2. Manual testing: Test with keyboard navigation and screen readers
3. User testing: Include people with disabilities in testing

Step 2: Prioritize Issues

Categorize found problems:

• Critical: Blocks access to content (Level A violations)
• High: Makes use significantly difficult (Level AA violations)
• Medium: Reduces user experience
• Low: Minor improvements

Step 3: Implement Fixes Systematically

Quick Wins (Week 1)

• Add alt text to images
• Correct heading structure
• Increase color contrast
• Improve focus indicators

Structural Improvements (Week 2-4)

• Implement ARIA labels and roles
• Improve form validation
• Optimize keyboard navigation
• Add skip links

Advanced Features (Month 2)

• Live regions for dynamic content
• Accessible modals and overlays
• Video captioning
• Audio transcripts

Testing and Validation

Automated Tools

• AllyScan: Continuous monitoring and reporting
• axe DevTools: Browser extension for developers
• WAVE: WebAIM's evaluation tool

Manual Testing Checklist

• [ ] Keyboard-only navigation works completely
• [ ] Screen reader test with NVDA/JAWS
• [ ] Zoom to 200% without horizontal scrolling
• [ ] Color contrast minimum 4.5:1 for normal text
• [ ] Videos have captions and transcripts
• [ ] Forms have clear labels and error messages

Common Pitfalls

1. Over-using ARIA

ARIA should be a last resort. Use semantic HTML first:

<!-- Good -->
<button>Click me</button>

<!-- Avoid -->
<div role="button" tabindex="0">Click me</div>

2. Placeholder as Label

Placeholders disappear on input and aren't accessible to all users:

<!-- Good -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="name@example.com">

<!-- Wrong -->
<input type="email" placeholder="Email">

3. Color Alone for Information

Use multiple indicators for important information:

/* Good - color + icon + text */
.error {
  color: #D32F2F;
  border: 2px solid #D32F2F;
}
.error::before {
  content: "⚠ Error: ";
}

Return on Investment

Investing in accessibility delivers concrete benefits:

• Wider reach: 15% of global population has a disability
• Better SEO: Accessible sites rank higher
• Lower legal risks: Avoid claims and fines
• Improved UX for everyone: Accessibility = usability
• Positive brand image: Show social responsibility

Conclusion

WCAG 2.2 compliance is not just a legal requirement but an investment in better user experience for all visitors. Start today with small steps and build systematically toward full compliance.

Need help? Start a free scan with AllyScan to see where your website stands and get a personalized action plan.