WCAG Level AA Requirements

WCAG Level AA: The Compliance Standard

Level AA is the conformance level required by most accessibility laws worldwide, including the European Accessibility Act, ADA compliance in the US, and various national regulations. Meeting Level AA means your content is accessible to the vast majority of users with disabilities.

Level AA Success Criteria

Level AA includes all 30 Level A criteria plus 20 additional requirements:

Perceivable (Level AA)

1.2.4 Captions (Live)

Live audio content in synchronized media must have captions.

This applies to:

• Live webinars
• Live streaming events
• Real-time video conferences (when public)

Implementation Options:

• Real-time captioning services (CART)
• Automatic speech recognition with human review
• Live captioning software integration

1.2.5 Audio Description (Prerecorded)

Audio description must be provided for all prerecorded video content.

Audio description narrates visual information not available through the main soundtrack:

• Scene changes
• Character actions
• On-screen text
• Visual gags or important visual details

1.3.4 Orientation

Content must not restrict display to a single orientation unless essential.

/* Bad: Forcing landscape */
@media (orientation: portrait) {
  .app { display: none; }
  .rotate-message { display: block; }
}

/* Good: Supporting both orientations */
@media (orientation: portrait) {
  .layout { flex-direction: column; }
}
@media (orientation: landscape) {
  .layout { flex-direction: row; }
}

1.3.5 Identify Input Purpose

The purpose of input fields collecting user information must be programmatically determinable.

<input type="text" 
       name="name" 
       autocomplete="name"
       aria-label="Full name">

<input type="email" 
       name="email" 
       autocomplete="email"
       aria-label="Email address">

<input type="tel" 
       name="phone" 
       autocomplete="tel"
       aria-label="Phone number">

1.4.3 Contrast (Minimum)

Text must have a contrast ratio of at least:

• 4.5:1 for normal text (under 18pt or 14pt bold)
• 3:1 for large text (18pt+ or 14pt+ bold)

/* Good: High contrast */
.text {
  color: #1a1a1a;      /* Very dark gray */
  background: #ffffff; /* White */
}
/* Ratio: 16.1:1 ✓ */

/* Bad: Low contrast */
.text {
  color: #767676;      /* Medium gray */
  background: #ffffff; /* White */
}
/* Ratio: 4.54:1 - Barely passes for normal text */

1.4.4 Resize Text

Text must be resizable up to 200% without loss of content or functionality.

Testing Method:

1. Set browser zoom to 200%
2. Verify no content is cut off
3. Verify no horizontal scrolling is required
4. Verify all functionality still works

1.4.5 Images of Text

Text should be used rather than images of text, except for:

• Logos
• Text that is essential to the information (like a signature)

1.4.10 Reflow

Content must reflow to a single column at 320px width without horizontal scrolling (except for content that requires 2D layout like data tables).

/* Responsive design for reflow */
.container {
  max-width: 100%;
  padding: 1rem;
}

@media (max-width: 320px) {
  .sidebar { display: none; }
  .content { width: 100%; }
}

1.4.11 Non-text Contrast

User interface components and graphical objects must have a contrast ratio of at least 3:1.

This applies to:

• Form field borders
• Icons conveying information
• Chart elements
• Focus indicators

1.4.12 Text Spacing

No loss of content when text spacing is adjusted to:

• Line height: 1.5x font size
• Paragraph spacing: 2x font size
• Letter spacing: 0.12x font size
• Word spacing: 0.16x font size

1.4.13 Content on Hover or Focus

Content triggered by hover or focus must be:

• Dismissible without moving pointer/focus
• Hoverable (pointer can move to the new content)
• Persistent until dismissed or no longer relevant

/* Good tooltip implementation */
.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus + .tooltip,
.tooltip:hover {
  display: block;
}

.tooltip {
  /* Allows hovering on tooltip itself */
  pointer-events: auto;
}

Operable (Level AA)

2.4.5 Multiple Ways

More than one way must be available to locate a page within a set of pages.

Examples:

• Site search
• Site map
• Table of contents
• Navigation menus

2.4.6 Headings and Labels

Headings and labels must describe topic or purpose.

<!-- Bad -->
<h2>Section 1</h2>
<label>Enter data:</label>

<!-- Good -->
<h2>Contact Information</h2>
<label for="email">Email Address</label>

2.4.7 Focus Visible

Keyboard focus indicator must be visible.

/* Never remove focus without replacement */
/* Bad */
*:focus { outline: none; }

/* Good */
*:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Even better - use focus-visible for cleaner UX */
*:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

2.5.3 Label in Name

For components with visible text labels, the accessible name must contain the visible text.

<!-- Bad: Visible and accessible names don't match -->
<button aria-label="Submit form now">Send</button>

<!-- Good: Accessible name contains visible text -->
<button aria-label="Send message">Send</button>

2.5.4 Motion Actuation

Functions triggered by device motion must be able to be disabled and have alternative means of operation.

Understandable (Level AA)

3.1.2 Language of Parts

The human language of each passage or phrase must be programmatically determinable.

<p>The French phrase <span lang="fr">je ne sais quoi</span> 
is commonly used in English.</p>

3.2.3 Consistent Navigation

Navigation mechanisms repeated on multiple pages must be in the same relative order.

3.2.4 Consistent Identification

Components with the same functionality must be identified consistently.

3.3.3 Error Suggestion

If an input error is detected and suggestions are known, provide the suggestions.

<input type="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error">
  Invalid email format. Example: [email protected]
</span>

3.3.4 Error Prevention (Legal, Financial, Data)

For pages involving legal commitments, financial transactions, or data modification:

• Submissions are reversible, OR
• Data is checked and user can correct, OR
• Confirmation mechanism is provided

Robust (Level AA)

4.1.3 Status Messages

Status messages must be programmatically determinable through role or properties.

<!-- Success message announced to screen readers -->
<div role="status" aria-live="polite">
  Your changes have been saved.
</div>

<!-- Error alert -->
<div role="alert">
  Please correct the errors before continuing.
</div>