Skip to main content
WCAG

WCAG 2.1 AA Explained

By Moss · 15 min read · March 2026

The Web Content Accessibility Guidelines (WCAG) 2.1 is the international standard for web accessibility, published by the World Wide Web Consortium (W3C). Level AA is the conformance level referenced by most accessibility laws, including the ADA Title II web rule and the European Accessibility Act.

Understanding Conformance Levels

WCAG defines three conformance levels:

  • Level A -- The minimum level. Addresses the most critical barriers.
  • Level AA -- The target level for most legal requirements. Includes Level A plus additional criteria.
  • Level AAA -- The highest level. Not typically required for entire sites but useful for specific content.

When a law requires "WCAG 2.1 AA," it means your content must meet all Level A and all Level AA success criteria.

Principle 1: Perceivable

Content must be presented in ways that users can perceive through at least one of their senses.

1.1 Text Alternatives

1.1.1 Non-text Content (A): Every non-text element needs a text alternative.

  • Informative images: Use descriptive alt text that conveys the same information.
  • Decorative images: Use alt="" (empty alt) so screen readers skip them.
  • Complex images (charts, graphs): Provide a detailed description nearby or via aria-describedby.
  • Form inputs with images: The alt text should describe the function, not the image.

1.2 Time-based Media

  • 1.2.1 Audio-only and Video-only (A): Provide transcripts for audio and either transcripts or audio descriptions for video.
  • 1.2.2 Captions (A): Synchronized captions for all prerecorded audio in video.
  • 1.2.3 Audio Description or Alternative (A): An alternative for prerecorded video content.
  • 1.2.4 Captions Live (AA): Real-time captions for live audio in video.
  • 1.2.5 Audio Description (AA): Audio description for prerecorded video (no exception for alternatives).

1.3 Adaptable

  • 1.3.1 Info and Relationships (A): Structure conveyed visually must also be in the code. Use proper headings, lists, tables, and form labels.
  • 1.3.2 Meaningful Sequence (A): Reading order in the DOM must match the visual order.
  • 1.3.3 Sensory Characteristics (A): Don't rely solely on shape, size, position, or color to convey information.
  • 1.3.4 Orientation (AA): Content should work in both portrait and landscape unless a specific orientation is essential.
  • 1.3.5 Identify Input Purpose (AA): Use autocomplete attributes on common form fields (name, email, address, etc.).

1.4 Distinguishable

  • 1.4.1 Use of Color (A): Color alone must not be the only way to convey information. Example: error states should include an icon or text, not just a red border.
  • 1.4.2 Audio Control (A): Audio that plays automatically for more than 3 seconds must have controls to pause, stop, or adjust volume.
  • 1.4.3 Contrast (Minimum) (AA): Text must have at least 4.5:1 contrast ratio against its background. Large text (18pt or 14pt bold) needs 3:1.
  • 1.4.4 Resize Text (AA): Text must be resizable up to 200% without loss of content or functionality.
  • 1.4.5 Images of Text (AA): Use real text instead of images of text, unless essential (logos, for example).
  • 1.4.10 Reflow (AA): Content must reflow to a single column at 320px width without horizontal scrolling (except for data tables, maps, etc.).
  • 1.4.11 Non-text Contrast (AA): UI components and graphical objects need 3:1 contrast. This includes form field borders, icons, and chart elements.
  • 1.4.12 Text Spacing (AA): Content must remain functional when users adjust line height to 1.5x, paragraph spacing to 2x, letter spacing to 0.12em, and word spacing to 0.16em.
  • 1.4.13 Content on Hover or Focus (AA): Tooltips and other content triggered by hover or focus must be dismissible, hoverable, and persistent.

Principle 2: Operable

Users must be able to operate the interface.

2.1 Keyboard Accessible

  • 2.1.1 Keyboard (A): All functionality must be available using a keyboard. No mouse-only interactions.
  • 2.1.2 No Keyboard Trap (A): Users must be able to move focus away from any component using the keyboard.
  • 2.1.4 Character Key Shortcuts (A): If single-character keyboard shortcuts exist, users must be able to turn them off, remap them, or they only activate on focus.

2.2 Enough Time

  • 2.2.1 Timing Adjustable (A): If there's a time limit, users can turn it off, adjust it, or extend it.
  • 2.2.2 Pause, Stop, Hide (A): Moving, blinking, or auto-updating content can be paused, stopped, or hidden.

2.3 Seizures and Physical Reactions

  • 2.3.1 Three Flashes or Below Threshold (A): No content flashes more than three times per second.

2.4 Navigable

  • 2.4.1 Bypass Blocks (A): Provide a "skip to main content" link.
  • 2.4.2 Page Titled (A): Pages must have descriptive titles.
  • 2.4.3 Focus Order (A): Focus order must be logical and meaningful.
  • 2.4.4 Link Purpose (A): Link text must describe the destination. Avoid "click here" or "read more" without context.
  • 2.4.5 Multiple Ways (AA): Provide at least two ways to find pages (navigation, search, site map).
  • 2.4.6 Headings and Labels (AA): Headings and labels must describe the content they introduce.
  • 2.4.7 Focus Visible (AA): Keyboard focus must have a visible indicator.

2.5 Input Modalities

  • 2.5.1 Pointer Gestures (A): Multi-point or path-based gestures must have single-pointer alternatives.
  • 2.5.2 Pointer Cancellation (A): Actions should trigger on "up" event, not "down," and should be reversible.
  • 2.5.3 Label in Name (A): The accessible name of a component must include its visible text label.
  • 2.5.4 Motion Actuation (A): Functionality triggered by device motion must have a UI alternative and be disableable.

Principle 3: Understandable

Content and operation must be understandable.

3.1 Readable

  • 3.1.1 Language of Page (A): Set the lang attribute on the <html> element.
  • 3.1.2 Language of Parts (AA): Mark up content in a different language with the appropriate lang attribute.

3.2 Predictable

  • 3.2.1 On Focus (A): Moving focus to a component should not trigger a change of context.
  • 3.2.2 On Input (A): Changing a form control should not automatically cause a change of context unless the user is warned.
  • 3.2.3 Consistent Navigation (AA): Navigation should appear in the same order across pages.
  • 3.2.4 Consistent Identification (AA): Components with the same functionality should be identified consistently.

3.3 Input Assistance

  • 3.3.1 Error Identification (A): Errors must be identified and described in text.
  • 3.3.2 Labels or Instructions (A): Provide labels or instructions for user input.
  • 3.3.3 Error Suggestion (AA): When an error is detected and suggestions are known, provide them.
  • 3.3.4 Error Prevention (AA): For legal, financial, or data-altering submissions, allow review, confirmation, or reversal.

Principle 4: Robust

Content must work with current and future technologies.

4.1 Compatible

  • 4.1.1 Parsing (A): Deprecated in WCAG 2.2, but in 2.1 requires valid HTML.
  • 4.1.2 Name, Role, Value (A): All UI components must have accessible names and expose their roles and states to assistive technologies.
  • 4.1.3 Status Messages (AA): Status messages (success, error, progress) must be announced to screen readers without receiving focus, typically using ARIA live regions.

Testing for WCAG Conformance

A thorough WCAG audit combines three approaches:

  1. Automated testing: Tools like axe, WAVE, or Lighthouse catch approximately 30-40% of issues (missing alt text, contrast, missing labels).

  2. Manual testing: Keyboard navigation, screen reader testing, zoom/reflow checks, and visual inspection catch issues automation misses.

  3. Assistive technology testing: Test with actual screen readers (NVDA, JAWS, VoiceOver), magnification software, and voice control.

No single approach is sufficient. Automated tools are a starting point, but manual and assistive technology testing are essential for true conformance.

2026 — Adaline Courses | Part of the Adaline ecosystem