Building Accessible Web Apps: WCAG 2.2 Compliance Guide for Developers

Why Accessibility Is a Core Engineering Requirement#

Web accessibility (commonly abbreviated as a11y) is the practice of designing and building digital websites and web applications that are usable by everyone—including people with visual impairments, motor limitations, auditory conditions, or cognitive differences.

Beyond being a fundamental ethical responsibility and a legal compliance requirement (under ADA, European Accessibility Act, and Section 508), accessible code creates better, cleaner software for everyone, improves keyboard productivity, and dramatically boosts search engine indexing.

This guide provides a practical, code-level overview of complying with the latest WCAG 2.2 standards.

1. The Four Foundational Principles of WCAG (POUR)#

WCAG guidelines are organized under four core principles:

1. Perceivable: Information and UI components must be presentable to users in ways they can perceive (e.g., text alternatives for images, captions for audio).
2. Operable: UI components and navigation must be operable (e.g., full keyboard navigation, sufficient time to read content, no seizure-inducing flashes).
3. Understandable: Information and the operation of the UI must be understandable (e.g., predictable layout behavior, clear input error messages).
4. Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including modern assistive screen readers.

2. Semantic HTML: The 80/20 of Web Accessibility#

The single most effective way to make any website accessible is to use Semantic HTML instead of generic

<!-- INACCESSIBLE: A fake button using a div -->
<div class="custom-btn" onclick="submitForm()">Submit</div>

<!-- ACCESSIBLE: A native semantic button -->
<button type="submit" class="custom-btn">Submit</button>

<!-- Perfect Accessible Form Pattern -->
<form class="space-y-4">
  <div>
    <label for="user-email" class="block text-sm font-medium text-gray-900">
      Email Address <span aria-hidden="true" class="text-red-500">*</span>
    </label>
    <input
      id="user-email"
      name="email"
      type="email"
      required
      aria-required="true"
      aria-describedby="email-hint email-error"
      placeholder="you@example.com"
      class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-teal-500"
    />
    <p id="email-hint" class="text-xs text-gray-500 mt-1">
      We will send your verification link to this address.
    </p>
  </div>
</form>

/* High-contrast, WCAG AA compliant colors */
:root {
  --bg-color: #030712; /* Deep Black Background */
  --text-primary: #ffffff; /* 21:1 Contrast Ratio (Exceeds AAA!) */
  --text-muted: #a1a1aa; /* 7.2:1 Contrast Ratio (Passes AA!) */
  --brand-teal: #00f2fe; /* High contrast against dark background */
}

/* BAD: Completely removes keyboard focus visibility */
button:focus {
  outline: none;
}

/* GOOD: Provides clear, accessible focus styles for keyboard users */
button:focus-visible {
  outline: 2px solid #00f2fe;
  outline-offset: 2px;
}