WCAG 2.1 Image Requirements for WordPress: A Plain-English Guide

WCAG 2.1 is the technical accessibility standard that courts use to measure ADA compliance. Both the European Accessibility Act and US ADA lawsuits reference it. For WordPress site owners, a handful of specific WCAG 2.1 criteria apply directly to images. This guide breaks down exactly what's required, in plain English, and shows you how to test and fix your site.

What Is WCAG 2.1 and Why Does It Matter for WordPress?

The Web Content Accessibility Guidelines (WCAG) 2.1 is a set of technical standards published by the W3C, the international body that governs web standards. It defines how to make web content accessible to people with disabilities, including those who are blind, have low vision, or use screen readers.

WCAG 2.1 matters for WordPress site owners for three reasons:

• US ADA compliance: Federal courts use WCAG 2.1 Level AA as the de facto standard for determining if a website meets ADA Title III requirements. Over 4,600 ADA website lawsuits were filed in 2025 alone.
• European Accessibility Act: The EAA, which took effect June 2025, references EN 301 549, a European standard that maps directly to WCAG 2.1 AA. If you have EU customers, you're legally required to comply.
• SEO benefits: The same practices that make images accessible also improve how Google indexes them. Alt text helps both screen reader users and search crawlers understand your images.

Level A vs AA vs AAA: Which Applies to You?

WCAG 2.1 has three conformance levels. Understanding which one you need to hit is important before you start fixing things:

For most WordPress site owners, Level AA is your target. That's what the law requires, and it's achievable without a complete site rebuild.

WCAG 2.1 Criteria That Apply to Images

WCAG 2.1 has 78 success criteria across four principles (Perceivable, Operable, Understandable, Robust). Only a subset apply directly to images. Here are the ones WordPress site owners need to know:

1.1.1 Non-text Content (Level A): The Most Important One

What it says: All non-text content has a text alternative that serves the equivalent purpose.

What it means for images: Every image that conveys information needs descriptive alt text. This is the criterion violated most often and the one cited in the vast majority of ADA image lawsuits.

The exceptions matter: WCAG 1.1.1 has specific rules for different image types:

<!-- Fails 1.1.1: no alt attribute -->
<img src="product.jpg">

<!-- Fails 1.1.1: decorative image without empty alt -->
<img src="divider.png" alt="divider">

<!-- Passes 1.1.1: informational image with descriptive alt -->
<img src="product.jpg" alt="Blue ceramic coffee mug with white polka dots, 12oz">

<!-- Passes 1.1.1: decorative image correctly marked -->
<img src="divider.png" alt="">

1.4.5 Images of Text (Level AA)

What it says: If the same visual presentation can be achieved using text alone, an image of text should not be used, except for logos and cases where a specific text appearance is essential.

What it means for WordPress: Don't create banners, buttons, or headings as images. Use real HTML text styled with CSS instead. Images of text are inaccessible to screen readers, can't be resized by the user, and look blurry on high-DPI screens.

1.4.11 Non-text Contrast (Level AA)

What it says: UI components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.

What it means for images: Icons, charts, and diagrams that convey information need sufficient contrast. A light gray icon on a white background fails. This applies to infographics, graph lines, and UI screenshot images too.

4.1.2 Name, Role, Value (Level A)

What it means for images: When images are used as interactive elements (inside links or as buttons) they must have accessible names. A linked image with no alt text leaves screen reader users with no idea where the link goes.

<!-- Fails 4.1.2: linked image with no alt text -->
<a href="/shop"><img src="shop-icon.png"></a>

<!-- Passes 4.1.2: linked image describes the destination -->
<a href="/shop"><img src="shop-icon.png" alt="Visit our shop"></a>

Common WordPress Image Failures by WCAG Criterion

WordPress has some structural quirks that make certain WCAG failures more common than others:

How to Test Your WordPress Site for WCAG 2.1 Image Compliance

You don't need to be a developer to test for image accessibility issues. These free tools cover the major criteria:

Automated Scanners (Start Here)

• WAVE (wave.webaim.org): Enter any URL and get a visual overlay showing accessibility errors. Look for red "Missing alternative text" flags. Free, no account needed.
• axe DevTools: Free Chrome/Firefox extension. Audits the page you're viewing and maps each issue to its WCAG criterion. Good for developers who want precise failure details.
• Google Lighthouse: Built into Chrome DevTools (F12 → Lighthouse). Run an Accessibility audit and review the "Images" section. Scores out of 100 with specific failures listed.

Manual Testing

Automated tools catch around 30-40% of WCAG failures. For more thorough testing:

• Keyboard navigation: Tab through your page and verify that every interactive image (linked images, image buttons) receives focus and has a readable name announced.
• Screen reader test: Use NVDA (Windows, free) or VoiceOver (Mac, built-in) and navigate your site by image. Listen to what gets announced for each image. That's what a blind user hears.
• Right-click → Inspect: Check the alt attribute directly on any image you're unsure about.

How to Fix Image Compliance at Scale

For criterion 1.1.1 (missing alt text), manual fixes work for small sites but don't scale. If you have more than 50 images, you need automation.

The Manual Approach (Small Sites Only)

1. Go to Media → Library in WordPress admin
2. Switch to List View
3. Click each image and fill in the Alternative Text field
4. Keep alt text under 125 characters and genuinely descriptive
5. Leave alt text empty for purely decorative images

The Automated Approach (Recommended)

Altomatic is a WordPress plugin that uses AI to generate accurate, descriptive alt text for every image in your media library, automatically. It handles both existing images (via bulk processing) and new uploads (via automatic generation on upload).

It's the only plugin that also compresses your images to WebP/AVIF at the same time, so you're fixing WCAG 1.1.1 compliance and improving page speed in one step. See the bulk alt text guide for a walkthrough.

For 1.4.5 (Images of Text)

This requires manual review. Look through your theme's hero sections, sidebar banners, and any promotional images for text baked into the image. Where possible, replace with HTML text styled with CSS, which is both more accessible and looks better on all screen sizes.

WCAG 2.1 Image Compliance Checklist

How WCAG 2.1, ADA, and the EAA Relate to Each Other

It's worth understanding how these three things connect before you finalize your compliance plan:

• WCAG 2.1 is the technical standard (the "how").
• ADA (US) is the legal requirement. Courts use WCAG 2.1 AA to measure compliance.
• EAA (EU) references EN 301 549, which maps directly to WCAG 2.1 AA.

If you achieve WCAG 2.1 Level AA for images, you're in good shape for both the ADA and EAA. See our ADA compliance checklist and European Accessibility Act guide for the legal context behind each standard.