All Guides

Accessibility

Pass WCAG 2.1 Compliance

By TC Timebomb, Moonvine

A practical checklist for WCAG 2.1 Level AA — what to test and what to fix.

What this covers: WCAG 2.1 Level AA requirements broken into actionable checks: keyboard access, color contrast ratios, alt text, form labels, plus a quick audit checklist and testing tools.

Who it’s for: Site owners or developers who have been told their site needs WCAG compliance and need a practical breakdown of what to test and fix.

Key outcome: You’ll be able to test your site against WCAG 2.1 AA criteria, fix the four issues that cause most failures, and document your compliance efforts for legal protection.

Time to read: 7 minutes

Part of: Accessibility series

Jump to Quick Questions ↓

Every WCAG 2.1 requirement with pass/fail tests.

1 is the accessibility standard your site needs to meet—here’s what that actually means.

Someone told you your site needs to be “WCAG compliant.” Maybe it was a lawyer, a client, or an angry email. You Googled it and found 78 success criteria across 4 principles. Your eyes glazed over. Here’s the practical version.

WCAG 2.1 defines accessibility standards that make your site usable for everyone, including people with disabilities.

The Three Levels

Here’s how each one works.

Level A: Minimum. Your site is technically usable.
Level AA: The target. Required by most laws and policies.
Level AAA: Enhanced. Nice to have, rarely required.

Aim for Level AA. That’s what ADA lawsuits reference, what government contracts require, and what most organizations target.

The Big Four (Fix These First)

Checklists exist to catch the things you forget when you’re focused on the obvious. Work through them methodically.

These four issues account for most accessibility failures:

1. Keyboard Access

Can someone navigate your entire site without a mouse?

All interactive elements reachable via Tab
Visible focus indicator shows where you are
No keyboard traps (can always escape)

Full guide: Fix Keyboard Navigation Issues

2. 1

Can people actually read your text?

Normal text: 4.5:1 contrast ratio minimum
Large text (18px+ bold or 24px+): 3:1 minimum
UI components: 3:1 minimum

Full guide: Color Contrast Requirements

3. 1

Do images have text descriptions?

Informative images: Describe the content
Decorative images: Use empty alt (alt="")
Functional images (buttons/links): Describe the action

4. Form Labels

Do form inputs have associated labels?






Email

Full guide: Accessible Form Error Handling

Quick Audit Checklist

WCAG compliance ensures your website works for people with disabilities, including those who use screen readers, navigate by keyboard, or have visual impairments. Beyond legal requirements, accessible sites often have better SEO, mobile usability, and overall user experience.

Keyboard (WCAG 2.1.1, 2.1.2, 2.4.7):

Tab through entire page—can you reach everything?
Can you see where focus is at all times?
Can you escape all modals and menus?

Visual (WCAG 1.4.3, 1.4.11):

Text contrast at least 4.5:1?
Page usable at 200% zoom?
No information conveyed by color alone?

Content (WCAG 1.1.1, 1.3.1, 2.4.6):

All images have alt text?
Headings in logical order (H1â†’H2â†’H3)?
Link text describes destination (no “click here”)?

Forms (WCAG 1.3.1, 3.3.1, 3.3.2):

All inputs have visible labels?
Errors identified and described?
Required fields marked?

Testing Tools

Pick the tool that fits your workflow and budget.

WAVE — Free browser extension, catches common issues
axe DevTools — More detailed, integrates with browser
WebAIM Contrast Checker — Check color combinations
Your keyboard — Unplug your mouse, navigate your site

The Legal Reality

WCAG isn’t law itself, but it’s referenced by:

ADA (US): Courts increasingly use WCAG 2.1 AA as the standard
Section 508 (US Federal): Requires WCAG 2.0 AA for government sites
EN 301 549 (EU): References WCAG 2.1 AA
AODA (Ontario): Requires WCAG 2.0 AA

If you’re worried about lawsuits: Level AA compliance is your target. Document your efforts. Fix issues when reported.

WCAG Compliance Questions

What WCAG level do I need?

Most legal requirements (ADA, Section 508) align with WCAG 2.1 Level AA. Level A is minimum baseline, AAA is aspirational for most sites. If you’re unsure, target AA—it’s the practical standard for business websites.

Can I get sued for accessibility issues?

Yes. ADA lawsuits against websites have increased significantly since 2018. E-commerce, hospitality, and financial services are most targeted. The risk is real, but fixing common issues (alt text, form labels, keyboard navigation) reduces it substantially.

What are the most common WCAG violations?

According to WebAIM’s annual survey: missing image alt text (top issue), low color contrast, missing form labels, empty links, and missing document language. These five issues account for the majority of accessibility failures.

How do I test for WCAG compliance?

Start with automated tools (WAVE, axe DevTools)—they catch ~30% of issues. Then test keyboard navigation (can you use the site without a mouse?). For full compliance, add screen reader testing and ideally user testing with people who have disabilities.

The WCAG AA Compliance Check

WAVE or axe DevTools shows zero critical errors on key pages
You can deal with the entire site using only keyboard (Tab, Enter, Escape)
All images have descriptive alt text (or empty alt for decorative images)
All form fields have visible labels
Color contrast passes WCAG AA requirements (4.5:1 for text)

Validation: Run automated tools on your 5 most important pages. If those pass, spot-check others. Full WCAG AA compliance requires manual testing too.

Sources

WCAG Compliance Questions Answered

What is the difference between WCAG 2.1 Level A, AA, and AAA?

Level A is the minimum baseline (essential accessibility). Level AA is the standard most laws require and covers color contrast, keyboard navigation, and screen reader support. Level AAA is the highest standard but is rarely required and often impractical for all content.

Is WCAG compliance legally required?

In many jurisdictions, yes. The ADA in the US, the Accessibility for Ontarians with Disabilities Act in Canada, and the European Accessibility Act all reference WCAG 2.1 AA. ADA lawsuits against websites increased to over 4,000 per year in the US.

Can an overlay or widget make my site WCAG compliant?

No. Accessibility overlays (like AccessiBe or UserWay) do not fix underlying code issues and have been widely criticized by accessibility experts. They can actually create new barriers. Real compliance requires fixing your HTML, CSS, and content structure.

How do I test my site for WCAG compliance?

Start with automated tools like axe DevTools or WAVE to catch obvious issues. Then manually test keyboard navigation (Tab through every interactive element) and screen reader compatibility (VoiceOver on Mac, NVDA on Windows). Automated tools catch only 30-40% of issues.

✓ Your Site Meets WCAG 2.1 AA Success Criteria

Automated scan (axe or Lighthouse Accessibility) returns a score of 95+ with zero critical violations
All content is navigable and operable using only a keyboard, with visible focus indicators on every interactive element
Screen reader testing (VoiceOver or NVDA) confirms all page content is announced in logical reading order
Text can be resized to 200% without loss of content or functionality
All non-text content has text alternatives that serve the equivalent purpose

Test it: Open your site in Chrome, run Lighthouse Accessibility audit, then manually tab through the page with VoiceOver enabled to catch the issues automated tools miss.