Accessibility Resource

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.

A

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
AA

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
AAA

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

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

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