7 min read

Easy For Everyone - WCAG 2.2 AA - 2025 Edition

Clear, accessible sites convert more people. WCAG 2.2 AA is the current global benchmark and it improves UX for everyone - not just those using assistive tech. (W3C)
Quick: Roofing owner - want an AA-friendly site that turns visits into booked estimates - claim your spot. You own the site from day one and we ship fast - live in 7 days - ROI signal in 21 days.

Table of Contents

• What WCAG 2.2 AA means

• Quick wins you can ship this week

• Example fixes - before - after

• How to test - automated and manual

• Legal and UX upside - EU and US

• Starter plan you can follow today

• Resources

What WCAG 2.2 AA means - in 60 seconds

WCAG is a W3C standard for accessible web content. Version 2.2 is a W3C Recommendation that adds nine success criteria to 2.1. AA is the most common target for policy and procurement. (W3C)

New - notable items in WCAG 2.2:

• 2.4.11 Focus Not Obscured - Minimum - AA - focused items cannot be hidden by author-created UI. (WAI Understanding) (W3C)

• 2.5.7 Dragging Movements - AA - provide a simple tap - click alternative to dragging. (WAI Understanding) (W3C)

• 2.5.8 Target Size - Minimum - AA - targets are at least 24 x 24 CSS px or sufficiently spaced. (WAI Understanding) (W3C)

• 3.2.6 Consistent Help - A - keep help entry points consistent. (WAI Understanding) (W3C)

• 3.3.7 Redundant Entry - A - avoid asking users to retype known data. (WAI Understanding) (Digital Policy Office)

• 3.3.8 Accessible Authentication - Minimum - AA - allow password managers and copy - paste, avoid cognitive tests. (2.2 spec) (W3C)

Contrast baselines that still apply at AA:

• Text: 4.5:1 (normal) and 3:1 (large) - 1.4.3 Contrast Minimum. (Understanding 1.4.3) (W3C)

• UI - graphics: 3:1 for controls and meaningful graphics - 1.4.11 Non-text Contrast. (Understanding 1.4.11) (W3C)

Quick wins you can ship this week

1. Fix color contrast

   • Meet 4.5:1 for body text and 3:1 for large text - verify with WebAIM’s Contrast Checker (tool). (W3C, WebAIM)

2. Make focus obvious and unblocked

   • Keep a visible focus indicator and ensure sticky headers or popups do not obscure the focused control - 2.4.11. (guide) (W3C)

3. Size or space touch targets

   • Make targets ≥ 24 x 24 CSS px or add spacing to satisfy 2.5.8. (details) (W3C)

4. Avoid drag-only interactions

   • Add click - tap alternatives for sliders, kanban reordering, map pins - 2.5.7. (details) (W3C)

5. Label every form field and reduce re-entry

   • Programmatic labels and clear instructions, plus prefill where possible - 3.3.x and 3.3.7. (redundant entry) (Digital Policy Office)

6. Make help consistent

   • Keep Contact - Chat - Help in the same location across templates - 3.2.6. (understanding) (W3C)

7. Simplify sign-in

   • Allow password managers and copy - paste, avoid cognitive tests - 3.3.8. (2.2 spec) (W3C)

Quick: Want a quick AA pass and a short punch list for your roofing site - claim your spot. You own the site from launch.

Example fixes - before - after

• Low-contrast CTA

  • Before: Text on brand background at ~2.5:1.

  • After: Adjust to ≥ 4.5:1 for body text and ≥ 3:1 for large type - validated with a contrast checker. (1.4.3, WebAIM checker) (W3C, WebAIM)

• Tiny link list in the footer

  • Before: 12 px links packed together.

  • After: Increase to 24 px targets or add spacing - 2.5.8. (Understanding) (W3C)

• Sticky header hides tab focus

  • Before: Focused item sits under a fixed header.

  • After: Add scroll-padding or offset so focused items remain visible - 2.4.11. (Understanding) (W3C)

• Drag-only price slider

  • Before: Requires dragging.

  • After: Add +/- buttons and a numeric input - 2.5.7. (Understanding) (W3C)

• Checkout re-asks address

  • Before: Forces re-entry across steps.

  • After: Prefill and let users confirm - 3.3.7 Redundant Entry. (Understanding) (Digital Policy Office)

How to test - automated and manual

Automated - first pass and CI

• Lighthouse - DevTools - built into Chrome and Edge. (overview) (Chrome for Developers)

• axe DevTools - extension and CI, powered by axe-core. (docs hub, extension) (Deque Docs)

• WAVE - quick visual checker for common issues. (tool) (WAVE)

• Contrast checkers - WebAIM and Section 508 tutorial. (WebAIM, Section 508 guide) (WebAIM, Section 508)

Manual - required to catch what tools miss

• Keyboard-only pass - verify tab order, visible focus, no traps, and that focus is not obscured. (2.4.11) (W3C)

• Screen reader spot-checks

  • NVDA on Windows - free download. (NV Access) (NV Access)

  • VoiceOver on macOS - built-in. (User guide) (Apple Support)

  • VoiceOver on iPhone - gestures reference. (Apple help) (Apple Support)

  • TalkBack on Android - getting started. (Android help) (Google Help)

Soft CTA: Want us to run these checks and return a prioritized punch list - claim your spot. Live in 7 days - ROI signal in 21 days.

Legal and UX upside - 2025 snapshot

• EU - European Accessibility Act (EAA) - applies from 28 June 2025 and sets accessibility requirements for many products and services offered in the EU. (European Commission overview) (European Commission)

  • Public-sector web in the EU typically references EN 301 549, the harmonized European standard aligned to WCAG. (ETSI explainer, EN 301 549 v3.2.1 PDF) (ETSI)

• US - ADA Title II final rule - state and local governments must meet WCAG 2.1 AA for web and mobile, with compliance timelines set in 2026 - 2027. (ADA.gov fact sheet, Final rule PDF) (ADA.gov)

Business case: Better contrast, visible focus, labels, and larger targets reduce abandonment and support conversions - these are rooted in user needs documented across W3C’s Understanding docs. (Understanding hub) (W3C)

Starter plan you can follow today

1. Audit 5 templates + 2 critical flows

   • Run Lighthouse for a snapshot and axe for deeper checks - log WCAG-mapped issues only. (Lighthouse overview, axe DevTools docs) (Chrome for Developers, Deque Docs)

2. Fix contrast + focus + labels first

   • Maximum reach for minimum effort - 1.4.3, 1.4.11, 2.4.11, 3.3.x. (1.4.3, 1.4.11, 2.4.11) (W3C)

3. Harden touch targets and remove drag-only controls

   • Satisfy 2.5.8 and 2.5.7 - start with nav, filters, and pagers. (2.5.8, 2.5.7) (W3C)

4. Clean up auth and forms

   • Allow paste and password managers, reduce redundant entry, and provide clear errors - 3.3.8 + 3.3.7. (3.3.8 in spec, 3.3.7 Understanding) (W3C, Digital Policy Office)

5. Bake tests into CI and spot-check monthly

   • Keep axe in CI, run a keyboard-only and screen-reader pass monthly. (axe DevTools docs, NVDA download) (Deque Docs, NV Access)

     
     

Resources

• WCAG 2.2 - W3C Recommendation - (spec, what’s new, WCAG overview) (W3C)

• Understanding docs - (focus not obscured, target size, dragging movements, consistent help, redundant entry, accessible authentication) (W3C, Digital Policy Office)

• Contrast - (1.4.3, 1.4.11, WebAIM checker) (W3C, WebAIM)

• Testing tools - (Lighthouse, axe DevTools, WAVE) (Chrome for Developers, Deque Docs, WAVE)

• Regulatory context - EU EAA and EN 301 549 - (EU overview, ETSI explainer, EN 301 549 PDF); US ADA Title II - (ADA fact sheet). (European Commission, ETSI, ADA.gov)

Need a concise AA checklist applied to your roofing site with simple fixes and proof in your dashboard - claim your spot. Live in 7 days - ROI signal in 21 days - and you own the site from day one.