WCAG 2.1 Level AA Explained: The Criteria That Actually Matter

WCAG 2.1 Level AA covers 78 success criteria, but if you read enough demand letters and remediation reports you start to see the same five or six categories of failure repeating. Knowing those categories is more useful than memorizing the spec. Here is the practical breakdown.

Category 1: Perceivable text alternatives

Every meaningful image, icon, and graphic that conveys information needs an accessible name. Decorative images need to be marked as decorative so assistive technology can skip them. The most common failures we see in scans:

• Product images with empty or generic alt text like image1.jpg
• Icon-only buttons (cart, search, close) without aria-label
• Logos that link to home with no accessible name
• Background images that carry information but cannot be reached by screen readers

Pattern that holds up

Treat alt text as the answer to: what would a sighted user need to know about this image to make the same decision? For decorative images, set alt to an empty string. Never use the filename as alt text.

Category 2: Color contrast and color reliance

Normal-size text must have a contrast ratio of at least 4.5 to 1 against its background. Large text (18.66 px bold or 24 px regular and up) needs 3 to 1. Color must never be the only way to convey information. The repeated failures:

• Light gray placeholder text on a white form input
• Required fields indicated only by a red asterisk with no label change
• Charts where data series are distinguished only by hue
• Brand-colored links inside paragraphs without underlines

Category 3: Keyboard operability

Every interactive element must be reachable and operable with a keyboard alone. The Tab key moves forward, Shift plus Tab moves backward, Enter and Space activate. Custom widgets that hijack these keys without honoring native semantics fail.

• Modal dialogs that trap keyboard users with no escape
• Custom dropdowns built from divs with no role or focus management
• Sliders and date pickers that only respond to mouse
• Skip-to-content links missing on long header pages

Category 4: Form labels and validation

Every input must have a label associated with it programmatically, not just visually. Validation errors must be announced to assistive technology and described in text, not only in color. The mistakes we see in nearly every scan:

• Placeholder text used as the only label
• Errors marked only by a red border with no message
• Required state communicated only through styling
• Multi-step forms with no progress indicator readable by screen readers

Category 5: Structure and landmarks

Pages need a clear heading hierarchy (one h1, then h2s under it, h3s under those) and proper landmark elements (header, nav, main, footer). Screen reader users navigate by these. Skipping levels or using divs where landmarks should be is a common automated finding.

Category 6: Motion, time, and audio

Anything that auto-plays, scrolls automatically, or animates needs a way to pause, stop, or reduce. Users who specify prefers-reduced-motion in their operating system should not see infinite ticker animations or large parallax effects. Video without captions and audio without transcripts are direct WCAG failures.

What to fix first

If you are looking at a fresh report with dozens of findings, do them in this order: critical impact first (image-alt, label, color-contrast on body text), then serious (keyboard traps, focus order), then moderate, then minor. Critical and serious findings show up in nearly every demand letter. Moderate and minor matter for real users but are rarely the centerpiece of a complaint.