Web Accessibility (WCAG 2.2 AA)

Building interfaces usable by everyone, including people with disabilities, to the WCAG 2.2 AA standard — now a legally enforceable baseline, not a nice-to-have.


Definition

Accessibility means designing so all users, including those with disabilities, can perceive and operate an interface. Per Web Development Best Practices 2026: Engineering Guide, WCAG 2.2 AA (Oct 2023) is the 2026 baseline and is legally enforceable (ADA Title III, the European Accessibility Act in force since June 2025, Section 508, EN 301 549). Non-compliance risks procurement exclusion, lawsuits ($25k–$100k+ settlements), and weaker SEO.

Default patterns: semantic HTML first (real <button>/<nav>/<main>, not “div soup”), key WCAG 2.2 criteria (24×24 px targets, visible focus ≥3:1 contrast / ≥2 px, drag alternatives, consistent help), keyboard + screen-reader operability (NVDA/VoiceOver, ARIA only when native fails), ≥4.5:1 text contrast, meaningful alt text, inclusive design systems, and axe-core in CI + manual testing each release. Retrofitting costs 5–10× more than building it in. Established (W3C standard).


Key Properties

  • WCAG 2.2 AA is the enforceable legal baseline (ADA, EAA, Section 508).
  • Semantic HTML > ARIA; ARIA only when native elements fall short.
  • Specific 2.2 criteria: 24×24 targets, focus appearance, dragging alternatives, consistent help.
  • Build-in, don’t retrofit (5–10× cheaper); automate (axe-core in CI) + manual test each release.
  • Overlaps SEO: better semantics → better crawlability (Technical SEO from Architecture).

Examples from Sources

ExampleSource
24×24 px targets, ≥3:1 focus contrast, single-pointer alternatives to dragWeb Development Best Practices 2026: Engineering Guide
axe-core/Lighthouse in CI + manual NVDA/VoiceOver testing each releaseWeb Development Best Practices 2026: Engineering Guide

In the Sources

SourceContext
Web Development Best Practices 2026: Engineering GuidePillar 4 (Accessibility & Inclusive Design) — the checklist.
What Does It Really Mean For A Site To Be Keyboard Navigable?Independent deep-dive on Keyboard Navigation (focus, tab order, skip links, testing) — corroborates + deepens.

Concepts: Keyboard Navigation (child topic), Responsive & Intent-Based Design, Clean Code & Maintainability, Technical SEO from Architecture, Web Architecture & Scalability Entities: React, TypeScript, Smashing Magazine