The Complete WCAG 2.2 Accessibility Compliance Guide for Enterprise Web Apps

1. What Changed in the WCAG 2.2 Standard

The Web Content Accessibility Guidelines (WCAG) 2.2 standard introduces critical new success criteria focusing on users with cognitive disabilities, low vision, and motor impairments.

Key additions include Focus Appearance (ensuring keyboard focus indicators are clearly visible and not obscured by sticky footers), Target Size Minimum (interactive touch targets must measure at least 24x24 CSS pixels), and Accessible Authentication (prohibiting cognitive function tests like complex puzzles during login).

2. Focus Appearance & Modal Trapping Mechanics

One of the most frequent accessibility violations is improper focus management in modal dialogs. When a modal opens, focus must move into the dialog, trap keyboard Tab cycles within the modal boundaries, and return focus to the triggering element upon dismissal.

Never remove default browser focus rings with outline: none without providing an equivalent high-contrast custom focus ring.

import { useEffect, useRef } from 'react';

export function AccessibleModal({ isOpen, onClose, title, children }: any) {
  const modalRef = useRef<HTMLDivElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement as HTMLElement;
      modalRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      tabIndex={-1}
      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm focus:outline-none"
    >
      <div className="bg-slate-900 border border-slate-800 rounded-xl p-6 max-w-lg w-full">
        <h2 id="modal-title" className="text-xl font-bold text-white mb-4">{title}</h2>
        {children}
        <button
          onClick={onClose}
          className="mt-6 px-4 py-2 bg-blue-600 text-white rounded-lg focus:ring-2 focus:ring-white focus:outline-none"
        >
          Close
        </button>
      </div>
    </div>
  );
}

3. Color Contrast Ratios & Visual Target Sizing

Standard text must achieve a minimum contrast ratio of 4.5:1 against its background (3:1 for large text over 24px). Low-contrast gray text on dark backgrounds is a primary reason automated accessibility audits fail.

Ensure interactive elements (buttons, links, form inputs) maintain adequate spacing and meet the 24x24 CSS pixel minimum target size requirement to support users on mobile touchscreens.

4. Dynamic Announcements with ARIA Live Regions

In Single Page Applications, content changes dynamically without full page reloads. Sighted users notice toast notifications or inline error messages, but screen-reader users remain unaware unless changes are broadcast.

Use aria-live="polite" for non-urgent status updates (e.g., "Draft saved") and aria-live="assertive" for critical errors (e.g., "Payment failed: Card expired").

5. Continuous Accessibility Auditing with axe-core

Accessibility cannot be a manual retrospective checklist performed once a year before release. Integrate axe-core directly into Cypress or Playwright end-to-end CI test suites.

Any pull request introducing missing form labels, broken ARIA roles, or invalid contrast ratios will automatically fail CI testing before reaching production.

6. Frequently Asked Questions