The Complete Guide to WCAG 2.1
Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with disabilities. This guide covers everything you need to know.
Table of Contents
1. What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of internationally recognized standards developed by the World Wide Web Consortium (W3C) through its Web Accessibility Initiative (WAI). These guidelines define how to make digital content — websites, web applications, and mobile apps — accessible to people with disabilities.
WCAG 2.1, published in June 2018, extended WCAG 2.0 with 17 new success criteria focusing on mobile accessibility, people with low vision, and people with cognitive or learning disabilities. WCAG 2.2, released in October 2023, added 9 more criteria. Most regulations worldwide reference WCAG 2.1 Level AA as the minimum standard.
78
Success Criteria in WCAG 2.1
1B+
People with disabilities worldwide
97%
Of top 1M sites have WCAG failures
2. Why Accessibility Matters
Web accessibility is not just a legal requirement — it is a moral imperative and a business advantage. Making your website accessible benefits everyone, not just people with permanent disabilities.
Legal Risk
ADA lawsuits increased 320% since 2018. The European Accessibility Act (EAA) takes effect in June 2025. Non-compliance can result in hefty fines.
Better SEO
Accessible websites rank higher. Proper headings, alt text, semantic HTML, and ARIA labels are all SEO-friendly practices.
Wider Audience
15% of the world's population lives with some form of disability. Accessibility opens your product to a larger market.
Better UX for All
Accessibility improvements (clearer navigation, readable text, consistent layout) benefit all users, including those on mobile or slow connections.
3. The Four Principles (POUR)
WCAG is organized around four foundational principles, commonly remembered by the acronym POUR:
1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
- • Provide text alternatives for non-text content (images, icons, videos)
- • Provide captions and audio descriptions for multimedia
- • Ensure content can be presented in different ways without losing meaning
- • Make content distinguishable (sufficient color contrast, resizable text)
2. Operable
User interface components and navigation must be operable by all users.
- • Make all functionality available from a keyboard
- • Give users enough time to read and use content
- • Do not design content that causes seizures or physical reactions
- • Help users navigate, find content, and determine where they are
3. Understandable
Information and the operation of the user interface must be understandable.
- • Make text content readable and understandable
- • Make web pages appear and operate in predictable ways
- • Help users avoid and correct mistakes (input assistance)
- • Use clear labels, instructions, and error messages
4. Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
- • Use valid, well-formed HTML
- • Ensure compatibility with current and future assistive technologies
- • Provide proper name, role, and value for all UI components
- • Use ARIA landmarks and roles correctly
4. Conformance Levels (A, AA, AAA)
WCAG defines three levels of conformance. Each successive level includes all criteria from the previous level.
Level A
Minimum — 30 criteria
The most basic level. If Level A criteria are not met, some users will find it impossible to use the content.
- ✓ Non-text content has text alternatives
- ✓ All functionality available via keyboard
- ✓ No content flashes more than 3 times/sec
- ✓ Page titles are descriptive
Level AA
Recommended — 20 additional criteria
The standard target for most organizations. Required by most laws and regulations worldwide (ADA, EAA, EN 301 549).
- ✓ Color contrast ratio at least 4.5:1
- ✓ Text can be resized to 200% without loss
- ✓ Images of text are avoided
- ✓ Multiple ways to find pages
Level AAA
Highest — 28 additional criteria
The highest level. Not usually required for entire sites, but specific pages or sections may target AAA for enhanced accessibility.
- ✓ Color contrast ratio at least 7:1
- ✓ Sign language for all multimedia
- ✓ No timing on interactions
- ✓ Context-sensitive help available
5. Most Common Accessibility Issues
According to the WebAIM Million study, these are the most frequently detected WCAG failures across the top 1 million websites:
Low contrast text
83.6%Text does not have sufficient contrast against its background (min 4.5:1 for normal text, 3:1 for large text).
Fix: Use a contrast checker tool. Ensure all text meets WCAG AA ratios.
Missing alt text for images
58.2%Images lack alternative text descriptions, making them invisible to screen reader users.
Fix: Add descriptive alt attributes to all informative images. Use alt="" for decorative images.
Empty links
50.1%Links contain no text content, so screen readers announce "link" with no description.
Fix: Add descriptive text or aria-label to all links.
Missing form labels
45.0%Form inputs lack associated <label> elements, making them unclear for assistive technology users.
Fix: Use <label> elements with for/id association, or aria-label for implicit labels.
Empty buttons
27.5%Buttons contain no text, making their purpose unknown to screen readers.
Fix: Add text content or aria-label to all buttons.
Missing document language
18.6%The <html> element lacks a lang attribute, preventing screen readers from using the correct pronunciation.
Fix: Add lang="en" (or appropriate code) to the <html> element.
6. WCAG 2.1 AA Checklist
Use this quick checklist to evaluate your website against WCAG 2.1 Level AA criteria:
Perceivable
- ☐ All images have appropriate alt text
- ☐ Videos have captions and audio descriptions
- ☐ Content structure is conveyed through proper headings (h1–h6)
- ☐ Color is not the only means of conveying information
- ☐ Text contrast ratio is at least 4.5:1 (3:1 for large text)
- ☐ Text can be resized to 200% without loss of content
- ☐ Content reflows properly at 320px width (no horizontal scroll)
Operable
- ☐ All functionality works with keyboard only
- ☐ No keyboard traps exist
- ☐ Focus indicators are visible
- ☐ Skip navigation links are provided
- ☐ Page titles are descriptive
- ☐ Focus order is logical and meaningful
- ☐ Touch targets are at least 44×44 CSS pixels
Understandable
- ☐ Page language is defined in HTML lang attribute
- ☐ Navigation is consistent across pages
- ☐ Form inputs have visible labels
- ☐ Error messages are descriptive and suggest corrections
- ☐ No unexpected context changes on focus or input
Robust
- ☐ HTML is valid and well-formed
- ☐ ARIA roles and properties are used correctly
- ☐ Status messages are announced to screen readers
- ☐ Custom widgets have proper name, role, and value
7. Legal Requirements
Web accessibility is legally mandated in many jurisdictions. Here are the key regulations you should know:
| Regulation | Region | Standard Referenced | Who It Applies To |
|---|---|---|---|
| ADA (Americans with Disabilities Act) | United States | WCAG 2.1 AA | Public accommodations, any business |
| EAA (European Accessibility Act) | European Union | EN 301 549 / WCAG 2.1 AA | E-commerce, banking, transport, media |
| Section 508 | United States | WCAG 2.0 AA | Federal agencies and contractors |
| AODA | Ontario, Canada | WCAG 2.0 AA | Public and private sector (50+ employees) |
| Equality Act 2010 | United Kingdom | WCAG 2.1 AA | All service providers |
8. Testing Tools & Resources
Automated tools can detect about 30–50% of accessibility issues. Manual testing is crucial for catching the rest. Here is a recommended toolkit:
Automated Scanning
- • certvo.com — AI-powered accessibility scanner with code fixes
- • axe DevTools — Browser extension for developers
- • Lighthouse — Built into Chrome DevTools
- • WAVE — Visual accessibility evaluator
Manual Testing
- • Keyboard-only navigation — Tab through every page
- • Screen readers — NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
- • Zoom testing — Test at 200% and 400% zoom
- • Color contrast analyzers — Verify contrast ratios
All WCAG 2.1 Success Criteria
Each criterion below links to a full plain-language explanation, with code examples and common failures. The criteria are grouped by the four POUR principles.
Perceivable
Non-text Content
All non-text content (images, icons, controls) must have a text alternative that serves the equivalent purpose.
Info and Relationships
The visual structure of a page (headings, lists, tables, form labels) must also be available programmatically — assistive tech relies on the markup, not the styling.
Contrast (Minimum)
Body text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt+, or 14pt bold) needs at least 3:1.
Non-text Contrast
UI components (form borders, focus indicators, icons that convey meaning) must have at least a 3:1 contrast ratio against adjacent colors.
Captions (Prerecorded)
Captions must be provided for all prerecorded audio in synchronized media.
Resize Text
Text must be resizable to 200% without loss of content or functionality.
Reflow
Content must reflow to a 320 CSS pixel width (the equivalent of 400% zoom on a 1280px viewport) without requiring horizontal scrolling for the primary reading direction.
Identify Input Purpose
Inputs collecting common personal information must have a programmatic purpose set, typically via the autocomplete attribute.
Content on Hover or Focus
Tooltip and hover content must be dismissible (Esc), hoverable (mouse can move into it), and persistent (stays until dismissed).
Audio-only and Video-only (Prerecorded)
For prerecorded audio-only content, provide a transcript. For prerecorded video-only content, provide either a transcript or an audio description.
Audio Description or Media Alternative (Prerecorded)
Prerecorded synchronised media must have either an audio description or a full media alternative.
Captions (Live)
Live audio in synchronised media must have captions.
Meaningful Sequence
When the sequence in which content is presented affects its meaning, a correct reading sequence must be programmatically determinable.
Sensory Characteristics
Instructions must not rely solely on sensory characteristics like shape, color, size, position, or sound.
Use of Color
Color must not be the only visual means of conveying information, indicating an action, or distinguishing a visual element.
Audio Control
If audio plays automatically for more than 3 seconds, a way to pause, stop, or control its volume independently of system volume must be provided.
Images of Text
If the technologies used can achieve the visual presentation, text must not be replaced by an image of text.
Text Spacing
When users override line height to 1.5×, paragraph spacing to 2×, letter spacing to 0.12×, and word spacing to 0.16×, no content or functionality must be lost.
Operable
Keyboard
Every interactive function on the page must be operable using only the keyboard.
No Keyboard Trap
Keyboard focus must never get trapped — users must always be able to navigate away using standard keys.
Focus Order
Components must receive focus in an order that preserves meaning and operability — usually matching the visual reading order.
Link Purpose (In Context)
The purpose of every link must be clear from its link text, or from its text combined with the surrounding context.
Headings and Labels
Headings and labels must describe the topic or purpose of the content they introduce.
Focus Visible
Any keyboard-operable interface must have a visible indicator showing which element has focus.
Pause, Stop, Hide
Any auto-starting moving, blinking, or scrolling content lasting longer than 5 seconds must be pausable, stoppable, or hideable.
Bypass Blocks
A mechanism is available to bypass blocks of content that are repeated on multiple pages.
Label in Name
For UI components with labels that include text, the accessible name must contain the visible label text.
Character Key Shortcuts
Single-character keyboard shortcuts must be turn-offable, remappable, or only active when the relevant control has focus.
Timing Adjustable
For each time limit set by the content, the user must be able to turn it off, adjust it, or extend it.
Three Flashes or Below Threshold
Content must not flash more than three times in any one-second period, or the flash must stay below the general flash and red flash thresholds.
Page Titled
Web pages must have titles that describe topic or purpose.
Pointer Cancellation
For functionality operated using a single pointer, completion of the action must occur on the up-event, not the down-event.
Motion Actuation
Functionality operated by device motion (shake, tilt) must also be operable by conventional UI controls and motion actuation must be disableable.
Understandable
Language of Page
The default human language of the page must be programmatically set via the lang attribute on <html>.
Error Identification
When an input error is detected, the field in error and the description of the error must be conveyed in text.
Labels or Instructions
Labels or instructions must be provided when content requires user input.
On Focus
When any component receives focus, it must not initiate a change of context.
On Input
Changing the setting of any component must not automatically cause a change of context unless the user has been warned.
Robust
Want to jump straight to fixes? Browse the how-to fix recipes — each one maps back to the WCAG criterion it covers.
Start Your Accessibility Journey Today
Scan your website for free and get a detailed WCAG compliance report with AI-powered fix suggestions.
Free Accessibility Scan