WCAG 2.1: A Complete Guide for Developers

WCAG 2.1 (Web Content Accessibility Guidelines) was published by the W3C in June 2018 and builds on WCAG 2.0 with 17 additional success criteria that address mobile accessibility, low vision, and cognitive disabilities. The newest version is WCAG 2.2 (current W3C Recommendation dated 12 December 2024), but WCAG 2.1 Level AA is still the level that most laws point to: EN 301 549 under the European Accessibility Act, and the US Department of Justice's 2024 rule for state and local government (ADA.gov). What changed between the two is covered in WCAG 2.1 vs 2.2. This guide breaks down the most important 2.1 criteria for developers.

Updated October 2026 with the criteria that failed most often in Certvo's scan data.

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.

Which Criteria Fail Most Often in 2026

In the Certvo Web Accessibility Report 2026 (1,569 websites scanned with axe-core), these were the success criteria with the highest automated failure rates:

1. 4.1.2 Name, Role, Value (Level A): failed on 67.0% of sites (1,052 of 1,569).
2. 1.4.3 Contrast (Minimum) (Level AA): failed on 51.4% of sites (806 of 1,569).
3. 2.4.4 Link Purpose (In Context) (Level A): failed on 50.1% of sites (786 of 1,569).
4. 1.1.1 Non-text Content (Level A): failed on 29.9% of sites (469 of 1,569).
5. 1.3.1 Info and Relationships (Level A): failed on 22.4% of sites (351 of 1,569).

Rates for every criterion are on WCAG failure rates. Only 18.7% of the sites passed every automated Level AA check.

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 with the fix recipes. Automated tools only cover part of WCAG, so always supplement them with manual keyboard testing and screen reader testing.