Compliance

ADA Title II & WCAG 2.1 AA

State and local government web content must conform to WCAG 2.1 Level AA under ADA Title II (28 CFR Part 35). ply meets these requirements at the framework level — your output is compliant from the first line of markup.

Timeline

The Deadline

As of June 2024, the Department of Justice requires state and local government entities to make their web content and mobile apps conform to WCAG 2.1 Level AA. Compliance deadlines depend on population size:

Large entities

Populations of 50,000 or more — April 24, 2026

Small entities

Populations under 50,000 — April 26, 2027

Need help meeting your deadline? We offer compliance consulting — audits, remediation, and implementation for organizations that need to meet WCAG 2.1 AA requirements.

Schedule a consultation to get started.

Built in

What ply handles at the framework level

These WCAG 2.1 AA success criteria are met automatically when you use ply. No configuration, no plugins, no audits to schedule.

Criterion	How ply meets it
1.4.3 Contrast (Minimum)	Light theme: `#161616` on `#ffffff` (~15.4:1). Dark theme: `#f4f4f4` on `#161616` (~13.9:1). Both exceed 4.5:1 AA requirement.
1.4.4 Resize Text	All typography uses `rem`/`em` units. Content scales to 200% without loss of functionality.
1.4.10 Reflow	Responsive grid reflows to single column at 320px. No horizontal scrolling required.
1.4.11 Non-text Contrast	Input borders, focus indicators, and button backgrounds all exceed 3:1 against their backgrounds.
2.1.1 Keyboard	`:focus-visible` outlines on all interactive elements. `.skip-link` for bypass navigation. No keyboard traps.
2.2.2 Pause, Stop, Hide	`prefers-reduced-motion: reduce` disables all animations and transitions automatically.
2.4.7 Focus Visible	2px solid outline with 2px offset on every focusable element — buttons, links, inputs, nav items, dropdowns.
1.3.1 Info and Relationships	Auto-styles semantic HTML (`<nav>`, `<table>`, `<details>`, `<dialog>`, headings). Visual presentation follows semantic structure.
1.3.2 Meaningful Sequence	Flexbox layout preserves DOM order. No CSS `order` properties that break reading sequence.

Automatic

Accessibility media queries

ply responds to user preferences at the OS level. These activate automatically with no application code required.

Dark mode

prefers-color-scheme: dark — all colors adapt with WCAG AA contrast maintained. Only activates when no data-theme is set.

Reduced motion

prefers-reduced-motion: reduce — all animations and transitions disabled via universal selector.

High contrast

prefers-contrast: more — text switches to pure black/white, borders strengthen for maximum distinction.

Your part

What needs application-level attention

ply provides the visual infrastructure for compliance. These criteria require attention at the application level:

Concern	What to do
Alt text on images	Add `alt` to every `<img>`. Use `alt=""` for decorative images.
ARIA on custom widgets	Custom dropdowns, modals, and tabs need `aria-expanded`, `aria-controls`, `role`.
Heading hierarchy	One `<h1>` per page. Use h2–h6 in sequence, no skipping.
Custom color contrast	If you override `--ply-*` variables, verify 4.5:1 for text and 3:1 for UI components.
Keyboard operability	Custom JS components (tabs, accordions, drag-and-drop) must work with keyboard alone.
Form labels	Associate `<label>` elements with inputs using `for`/`id`.
Page language	Set `lang` attribute on `<html>`.
Error identification	Use ARIA and JavaScript to programmatically identify and describe form errors.

Architecture

Zero JavaScript, zero ARIA failures

Most accessibility failures in JavaScript frameworks come from mismanaged ARIA state — a dropdown that says aria-expanded="false" when it's open, a modal that doesn't trap focus, a live region that never updates.

ply is CSS-only. There is no JavaScript to mismanage state. Browser native behaviors handle focus trapping (<dialog>), disclosure (<details>), and form validation. The attack surface for ARIA conformance bugs is zero at the framework level.

Documentation

VPAT 2.5

ply publishes a Voluntary Product Accessibility Template (VPAT 2.5, WCAG 2.1 Edition) documenting conformance against all Level A and Level AA success criteria.

The evaluation covers 33 Level A criteria and 16 Level AA criteria. Of these, ply Supports all criteria within its scope as a CSS framework. Criteria outside the scope of a CSS-only framework (multimedia, page titles, form logic) are marked Not Applicable.

View Full VPAT

AI + Compliance

Why this matters for AI-generated content

AI coding tools generate markup fast. Most of it is <div> soup with broken semantics — no landmarks, no heading hierarchy, no focus management. That output fails accessibility audits before a human ever reviews it.

ply inverts this. Because the framework styles semantic HTML elements directly, the fastest way to build with ply is also the accessible way. Your AI agent uses <nav> instead of <div class="nav"> because ply makes it look right with less code. Compliance becomes a side effect of taking the path of least resistance.

See how ply handles accessibility features at the framework level, or set up your AI agent to generate compliant markup automatically.