Building Accessible Web Applications: WCAG 2.2 Compliance Guide

Web accessibility is not optional in 2026. Legal enforcement has accelerated, with ADA lawsuits targeting inaccessible websites reaching record numbers. More importantly, accessible websites reach more customers, perform better in search rankings, and provide superior user experiences for everyone — not just users with disabilities.

At DreamTech Dynamics, we build every website to WCAG 2.2 Level AA compliance by default. This guide covers what WCAG 2.2 requires, how to implement it practically, and why accessibility is a business advantage.

What Is WCAG 2.2?

WCAG (Web Content Accessibility Guidelines) 2.2 is the current international standard for web accessibility, published by the W3C. It builds on WCAG 2.1 with nine new success criteria focused on improving access for users with cognitive disabilities, low vision, and motor impairments.

The three conformance levels:

• Level A: Minimum accessibility (addresses the most critical barriers)
• Level AA: Standard compliance target (required by most legislation including ADA, EAA, Section 508)
• Level AAA: Enhanced accessibility (aspirational for most sites, required for some government applications)

Most businesses should target Level AA, which covers all Level A criteria plus additional requirements.

New in WCAG 2.2 (What Changed)

Focus Not Obscured (Minimum) — Level AA

When an element receives keyboard focus, it cannot be entirely hidden by other content (sticky headers, modals, cookie banners). At least part of the focused element must be visible.

Implementation: Ensure sticky navigation and fixed-position elements do not overlap focused content. Use scroll-padding-top to account for fixed headers.

Dragging Movements — Level AA

Any functionality that uses dragging (drag-and-drop, sliders, map interactions) must have a single-pointer alternative that does not require dragging.

Implementation: Provide click/tap alternatives for all drag interactions. Sortable lists need up/down buttons. Sliders need text input alternatives.

Target Size (Minimum) — Level AA

Interactive targets must be at least 24x24 CSS pixels, or have sufficient spacing from adjacent targets.

Implementation: Ensure all buttons, links, and form controls meet minimum size. Add padding to inline links that are close together.

Consistent Help — Level A

If help mechanisms (chat, contact info, FAQ links) appear on multiple pages, they must appear in the same relative order on each page.

Implementation: Place help elements in consistent locations (footer, header, or sidebar) across all pages.

Redundant Entry — Level A

If the user has already provided information in a process (multi-step form), that information must be auto-populated or available for selection in subsequent steps.

Implementation: Pre-fill form fields with previously entered data. Provide "same as billing address" options for shipping.

Accessible Authentication (Minimum) — Level AA

Authentication processes cannot require cognitive function tests (CAPTCHAs, remembering passwords) unless alternatives are provided.

Implementation: Support password managers, provide authentication via passkeys/biometrics, avoid puzzle CAPTCHAs without alternatives.

The Accessibility Implementation Checklist

Semantic HTML

• Use proper heading hierarchy (h1 through h6 in order)
• Use <nav>, <main>, <article>, <aside> for page landmarks
• Use <button> for actions and <a> for navigation
• Use <ul>, <ol> for lists (not styled divs)
• Use <table> with proper headers for tabular data

Keyboard Navigation

• All interactive elements are reachable via Tab key
• Focus order matches visual reading order
• Focus is visible with high-contrast indicators
• No keyboard traps (user can always Tab away)
• Skip links allow bypassing repetitive navigation
• Modal dialogs trap focus appropriately and return focus on close

Color and Contrast

• Text has minimum 4.5:1 contrast ratio against background (3:1 for large text)
• UI components have minimum 3:1 contrast against adjacent colors
• Information is not conveyed by color alone (add icons, patterns, or labels)
• Focus indicators have minimum 3:1 contrast against surrounding content

Images and Media

• All meaningful images have descriptive alt text
• Decorative images have empty alt (alt="")
• Complex images (charts, infographics) have detailed text alternatives
• Videos have captions and audio descriptions
• Audio content has transcripts

Forms

• Every input has a visible, associated label (using <label for="">)
• Required fields are indicated programmatically (not just by color)
• Error messages identify the specific field and describe how to fix the issue
• Form validation does not rely solely on color
• Help text is associated with inputs using aria-describedby

Dynamic Content

• Screen readers are notified of dynamic content changes (aria-live regions)
• Loading states are announced to assistive technology
• Auto-updating content can be paused or stopped
• Time limits provide warnings and extension options
• Animations can be reduced (respect prefers-reduced-motion)

Testing Your Accessibility

Automated Testing (Catches ~30% of Issues)

• axe DevTools: Browser extension for quick page audits
• Lighthouse: Built into Chrome DevTools, provides accessibility score
• Pa11y: CI/CD integration for automated accessibility checks
• jest-axe: Unit test integration for component-level testing

Manual Testing (Required for Full Coverage)

• Keyboard-only navigation: Unplug your mouse and use the entire site
• Screen reader testing: Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)
• Zoom testing: Verify the site works at 200% and 400% zoom
• Reduced motion: Enable reduced motion and verify animations respect it
• High contrast: Enable forced colors mode and verify content remains readable

User Testing

Automated and manual testing catch technical issues but miss usability problems. Include users with disabilities in usability testing for a complete picture.

The Business Case for Accessibility

Legal Risk Reduction

ADA digital accessibility lawsuits exceeded 4,000 cases in 2025. The European Accessibility Act (EAA) took effect in June 2025, extending requirements across the EU. Proactive compliance is significantly cheaper than reactive remediation after a lawsuit.

Market Expansion

15-20% of the global population has some form of disability. An inaccessible website excludes these potential customers entirely. Accessibility also benefits users with temporary impairments (broken arm, bright sunlight) and aging populations (growing demographic).

SEO Benefits

Accessibility and SEO share significant overlap:

• Semantic HTML helps search engines understand content structure
• Alt text provides context for image search
• Heading hierarchies establish content importance
• Link text describes destinations for both users and crawlers
• Fast page loads benefit both accessibility and ranking

Improved UX for Everyone

Accessibility improvements benefit all users:

• Clear color contrast is easier to read in any lighting
• Keyboard navigation benefits power users
• Caption support helps users in sound-sensitive environments
• Clear error messages reduce form abandonment
• Consistent navigation reduces cognitive load

Common Accessibility Mistakes

1. Missing alt text on images — The most common and easiest to fix
2. Low contrast text — Especially gray-on-white for "subtle" design elements
3. Missing form labels — Using placeholder text instead of proper labels
4. Inaccessible modals — Modals that do not trap focus or announce to screen readers
5. Auto-playing media — Video or audio that plays without user action
6. Mouse-only interactions — Hover effects, drag-and-drop, or custom controls without keyboard alternatives
7. Missing skip links — Forcing keyboard users through entire navigation on every page
8. PDF documents without accessibility — Scanned PDFs or documents without tagged structure

Our Accessibility-First Approach

At DreamTech Dynamics, accessibility is not a phase we add at the end — it is built into our component library, design system, and development process from day one:

• Our design system enforces minimum contrast ratios in all themes
• Components include ARIA attributes and keyboard handlers by default
• Automated accessibility tests run in CI/CD before any code ships
• We conduct manual screen reader testing before every major release

Get an accessibility audit — we will evaluate your current website against WCAG 2.2 Level AA criteria and provide a prioritized remediation plan.

For more on building inclusive web experiences, read our guide on web accessibility for developers or learn about how we build accessible websites.