WCAG 2.1: A Complete Guide for Developers

WCAG 2.1 (Web Content Accessibility Guidelines) is the current standard for web accessibility. Published by the W3C in June 2018, it builds on WCAG 2.0 with 17 additional success criteria that address mobile accessibility, low vision, and cognitive disabilities. This guide breaks down the most important criteria for developers.

Understanding the Structure

WCAG is organized into four principles (Perceivable, Operable, Understandable, Robust), each containing guidelines, and each guideline containing testable success criteria at three levels (A, AA, AAA). Most regulations require Level AA conformance.

Perceivable: Making Content Available to the Senses

1.1.1 Non-text Content (Level A)

All non-text content must have a text alternative. This is the most fundamental accessibility requirement.

<!-- ✅ Good: Descriptive alt text -->
<img src="chart.png" alt="Bar chart showing 45% increase in sales from Q1 to Q4 2024" />

<!-- ✅ Good: Decorative image -->
<img src="divider.png" alt="" role="presentation" />

<!-- ❌ Bad: Missing or unhelpful alt text -->
<img src="chart.png" />
<img src="chart.png" alt="image" />

1.4.3 Contrast (Minimum) — Level AA

Text must have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).

/* ✅ Good: Sufficient contrast */
.text-normal { color: #595959; background: #ffffff; } /* 7:1 ratio */

/* ❌ Bad: Insufficient contrast */
.text-low { color: #aaaaaa; background: #ffffff; } /* 2.3:1 ratio */

1.4.4 Resize Text (Level AA)

Text must be resizable up to 200% without loss of content or functionality. Use relative units (rem, em, %) instead of pixels for font sizes.

Operable: Users Must Be Able to Navigate

2.1.1 Keyboard (Level A)

All functionality must be operable through a keyboard interface.

<!-- ✅ Good: Interactive elements are focusable -->
<button onClick={handleClick}>Submit</button>

<!-- ❌ Bad: Non-focusable clickable div -->
<div onClick={handleClick}>Submit</div>

<!-- ✅ Fix: Add role and tabIndex -->
<div role="button" tabIndex={0} onClick={handleClick} 
     onKeyDown={(e) => e.key === 'Enter' && handleClick()}>
  Submit
</div>

2.4.7 Focus Visible (Level AA)

Focus indicators must be visible. Never remove focus outlines without providing an alternative.

/* ❌ Never do this */
*:focus { outline: none; }

/* ✅ Custom focus styles */
*:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

Understandable: Content Must Be Clear

3.1.1 Language of Page (Level A)

<!-- ✅ Always specify the page language -->
<html lang="en">

<!-- For multilingual content, specify inline language changes -->
<p>The French word <span lang="fr">bonjour</span> means hello.</p>

3.3.2 Labels or Instructions (Level A)

<!-- ✅ Good: Explicit label association -->
<label htmlFor="email">Email Address</label>
<input type="email" id="email" name="email" />

<!-- ✅ Good: Inline label with aria -->
<input type="email" aria-label="Email Address" placeholder="Email" />

Robust: Content Must Work with Assistive Tech

4.1.2 Name, Role, Value (Level A)

Custom widgets must expose their name, role, and value to assistive technologies via ARIA.

<!-- ✅ Custom accordion with proper ARIA -->
<button aria-expanded="false" aria-controls="panel-1">
  Section Title
</button>
<div id="panel-1" role="region" aria-labelledby="heading-1" hidden>
  Panel content...
</div>

WCAG 2.1-Specific Additions

Key new criteria added in WCAG 2.1 include:

1.3.4 Orientation (AA): Content must not be restricted to a single display orientation (portrait/landscape).
1.4.10 Reflow (AA): Content must reflow at 320px width without horizontal scrolling.
1.4.11 Non-text Contrast (AA): UI components and graphical objects must have 3:1 contrast against adjacent colors.
1.4.12 Text Spacing (AA): Content must support increased line height, paragraph spacing, letter spacing, and word spacing.
2.5.1–2.5.4 Input Modalities (A/AA): Support for pointer gestures, pointer cancellation, and motion actuation alternatives.

Next Steps

Start by running an automated scan with certvo.com to identify your site's most critical WCAG issues, then work through fixes systematically. Remember: automated tools catch about 30-50% of issues. Always supplement with manual keyboard testing and screen reader testing.