The Complete WCAG 2.1 Compliance Checklist for 2026

Whether you're preparing for the April 2026 ADA deadline, the European Accessibility Act, or simply want to make your website usable by everyone, you need a clear plan. This checklist breaks WCAG 2.1 Level AA into practical, actionable items you can work through today.

How to Use This Checklist

Start at the top and work down. Each section covers a WCAG principle. Items marked with ⚡ are the most common failures we see in AccessiGuard scans — fix those first for the biggest impact.

1. Perceivable — Can Users See and Hear Your Content?

Images & Media

⚡ All images have alt text — Decorative images use alt="", meaningful images describe the content
Complex images (charts, infographics) have long descriptions nearby or via aria-describedby
Videos have captions — Auto-generated captions need human review for accuracy
Audio content has transcripts — Podcasts, voice messages, audio clips
No information conveyed only through images — Don't use screenshots of text

Color & Contrast

⚡ Text contrast ratio is at least 4.5:1 (normal text) or 3:1 (large text, 18px+ or 14px+ bold)
UI component contrast is at least 3:1 — Borders, icons, form field outlines
⚡ Color is not the only way to convey information — Error states need text + icon, not just red
Links are distinguishable from surrounding text (underline, or 3:1 contrast + additional indicator on hover/focus)

Text & Readability

Text can be resized to 200% without breaking layout or losing content
Content reflows at 320px width without horizontal scrolling
Line height is at least 1.5x font size; paragraph spacing at least 2x font size
No images of text — Use real text styled with CSS

2. Operable — Can Users Navigate and Interact?

Keyboard Navigation

⚡ All interactive elements are keyboard-accessible — Tabs, buttons, links, form fields
Focus order is logical — Tab moves through the page in reading order
⚡ Focus indicator is visible — At least 2px solid outline, 3:1 contrast
No keyboard traps — Users can always Tab away from any element
Skip navigation link available at the top of the page

Forms

⚡ All form fields have associated labels — Use <label for="..."> or aria-label
Required fields are clearly marked — Don't rely only on asterisks
Error messages are specific — "Email is required" not "Error in field 3"
⚡ Errors are announced to screen readers (use aria-live or role="alert")
Form instructions appear before the form, not only after submission

Links & Buttons

⚡ Link text is descriptive — "Read the full report" not "Click here"
⚡ No empty links or buttons — Every clickable element has accessible text
Links that open new windows warn the user (e.g., "opens in new tab")
Touch targets are at least 44×44 pixels

Time & Motion

No content flashes more than 3 times per second
Auto-playing media can be paused — Video, audio, carousels
Time limits can be extended — At least 10x the original time
Animations respect prefers-reduced-motion

3. Understandable — Can Users Comprehend Your Content?

Language

⚡ Page language is declared — <html lang="en"> (or your language)
Language changes within the page use the lang attribute on the element

Predictability

Navigation is consistent across pages
UI components behave consistently — Same button style = same behavior
No unexpected changes when users interact with form elements

Error Prevention

Important submissions are reversible — Confirm before deleting, allow undo
Legal and financial transactions have a review step
Data entry can be checked and corrected before submission

4. Robust — Does Your Code Work with Assistive Technology?

HTML Quality

⚡ Valid HTML — Properly nested elements, unique IDs, closed tags
ARIA is used correctly — Don't use aria-* attributes that contradict native HTML semantics
Custom components have appropriate ARIA roles, states, and properties
Status messages use aria-live regions (not just visual changes)

Testing

Test with a screen reader — NVDA (free, Windows) or VoiceOver (Mac/iOS)
Test keyboard-only navigation — Unplug your mouse for 10 minutes
Test at 200% zoom
Run an automated scan — Tools like AccessiGuard catch 30-40% of issues automatically
Manual review for the remaining 60-70% (reading order, context, usability)

Priority: Fix These 5 Things First

Based on scanning thousands of websites, these are the most common failures — and the easiest wins:

Missing image alt text — Add alt attributes to every <img>
Low color contrast — Use a contrast checker; aim for 4.5:1 minimum
Missing form labels — Every input needs a <label>
Empty links and buttons — Add text content or aria-label
Missing page language — Add lang="en" to your <html> tag

Fixing just these five covers roughly 70% of automated scan failures.

What Automated Tools Can and Can't Do

Automated scanning tools (including AccessiGuard) are excellent at catching structural issues:

✅ Missing alt text, labels, lang attributes
✅ Color contrast ratios
✅ Empty interactive elements
✅ Heading hierarchy
✅ ARIA misuse

But they can't evaluate:

❌ Whether alt text is meaningful
❌ Whether content makes sense in context
❌ Complex keyboard interaction patterns
❌ Whether video captions are accurate
❌ Cognitive load and readability

Best practice: Use automated scanning to find the low-hanging fruit, then do manual testing for the rest. AccessiGuard's scan coverage page lists exactly what our scanner checks.

Next Steps

Run a free scan on your website with AccessiGuard to see where you stand
Fix the top 5 issues from this checklist
Re-scan to verify your fixes
Schedule regular scans to catch regressions as your site changes
Plan manual testing for the issues automation can't catch

Web accessibility isn't a one-time project — it's an ongoing practice. But with a clear checklist and the right tools, it's entirely achievable.