WCAG 2.1 Compliance Checklist: A Complete Guide

WCAG 2.1 Compliance Checklist: Your Complete Guide to Level AA

The WCAG 2.1 compliance checklist is an essential resource for any organization serious about web accessibility. With 78 success criteria across four foundational principles, WCAG 2.1 Level AA represents the international standard for accessible digital experiences.

This comprehensive WCAG 2.1 compliance checklist breaks down every requirement into actionable steps, provides testing methods, and offers practical examples to guide your accessibility implementation. Whether you're building from scratch or auditing an existing site, this checklist ensures nothing falls through the cracks.

Why WCAG 2.1? While WCAG 2.2 is the latest version, WCAG 2.1 remains widely adopted and forms the foundation for many accessibility regulations worldwide, including several EU member state implementations of the European Accessibility Act.

Understanding WCAG 2.1 Conformance Levels

Before diving into our WCAG 2.1 compliance checklist, understand the three conformance levels:

• Level A: Minimum level of conformance (25 success criteria)
• Level AA: Standard level for most regulations (50 success criteria)
• Level AAA: Enhanced level, rarely required legally (78 success criteria)

Most organizations target Level AA as it balances comprehensive accessibility with practical implementation. This WCAG 2.1 compliance checklist focuses on Level AA requirements.

WCAG 2.1 Principle 1: Perceivable (Level AA)

1.1 Text Alternatives

✅ 1.1.1 Non-text Content (Level A)

• [ ] All images have meaningful alt text or are marked decorative
• [ ] Complex images (charts, graphs) have detailed descriptions
• [ ] Form controls have accessible names
• [ ] CAPTCHAs provide alternative formats

Testing: Use screen reader or inspect alt attributes in developer tools Common failures: Missing alt text, generic descriptions ("image", "photo")

1.2 Time-based Media

✅ 1.2.1 Audio-only and Video-only (Level A)

• [ ] Audio-only content has text transcript
• [ ] Video-only content has audio track or text description

✅ 1.2.2 Captions (Level A)

• [ ] All pre-recorded videos have synchronized captions
• [ ] Captions include relevant sound effects and speaker identification

✅ 1.2.3 Audio Description or Media Alternative (Level A)

• [ ] Videos with visual information have audio descriptions OR
• [ ] Full text alternative covers all visual and auditory information

✅ 1.2.4 Captions (Live) (Level AA)

• [ ] Live video content includes synchronized captions
• [ ] Captions are accurate and keep pace with audio

✅ 1.2.5 Audio Description (Level AA)

• [ ] All pre-recorded video has audio description track
• [ ] Audio descriptions don't overlap with dialogue

Testing: Review videos with sound off, test caption accuracy Tools: YouTube Studio, Rev.com, Otter.ai for transcription

1.3 Adaptable

✅ 1.3.1 Info and Relationships (Level A)

• [ ] Headings use proper HTML hierarchy (h1, h2, h3...)
• [ ] Lists use proper markup (<ul>, <ol>, <li>)
• [ ] Tables have headers (<th>) and captions when needed
• [ ] Form labels are programmatically associated with inputs

✅ 1.3.2 Meaningful Sequence (Level A)

• [ ] Content reading order makes sense when linearized
• [ ] Tab order follows logical sequence
• [ ] CSS positioning doesn't break content flow

✅ 1.3.3 Sensory Characteristics (Level A)

• [ ] Instructions don't rely solely on shape, size, visual location, orientation, or sound
• [ ] "Click the green button" includes other identifying information
• [ ] Audio cues are supplemented with visual indicators

✅ 1.3.4 Orientation (Level AA - WCAG 2.1)

• [ ] Content adapts to both portrait and landscape orientations
• [ ] No content is restricted to single orientation unless essential

✅ 1.3.5 Identify Input Purpose (Level AA - WCAG 2.1)

• [ ] Form inputs have autocomplete attributes where appropriate
• [ ] Personal data fields use HTML autocomplete tokens

Testing: Use browser reader mode, disable CSS, test screen reader Tools: Wave, aXe, HeadingsMap browser extension

1.4 Distinguishable

✅ 1.4.1 Use of Color (Level A)

• [ ] Color isn't the only way to convey information
• [ ] Required form fields marked with text/symbols, not just color
• [ ] Links distinguishable from surrounding text without color

✅ 1.4.2 Audio Control (Level A)

• [ ] Auto-playing audio longer than 3 seconds has pause/stop control
• [ ] Background audio doesn't interfere with screen readers

✅ 1.4.3 Contrast (Minimum) (Level AA)

• [ ] Normal text has 4.5:1 contrast ratio minimum
• [ ] Large text (18pt+ or 14pt+ bold) has 3:1 contrast ratio minimum
• [ ] UI components and graphics have 3:1 contrast ratio

✅ 1.4.4 Resize Text (Level AA)

• [ ] Text can be resized to 200% without loss of functionality
• [ ] No horizontal scrolling at 320px viewport width
• [ ] All content remains accessible when zoomed

✅ 1.4.5 Images of Text (Level AA)

• [ ] Text in images avoided unless decorative or logo
• [ ] When text images used, same information available as actual text

✅ 1.4.10 Reflow (Level AA - WCAG 2.1)

• [ ] Content reflows to 320px width without horizontal scrolling
• [ ] Vertical content reflows to 256px height without vertical scrolling
• [ ] No information or functionality lost during reflow

✅ 1.4.11 Non-text Contrast (Level AA - WCAG 2.1)

• [ ] UI components have 3:1 contrast against adjacent colors
• [ ] Graphical objects have 3:1 contrast against background
• [ ] Focus indicators meet contrast requirements

✅ 1.4.12 Text Spacing (Level AA - WCAG 2.1)

• [ ] Content adapts when users modify text spacing:
  • Line height: 1.5× font size
  • Paragraph spacing: 2× font size
  • Letter spacing: 0.12× font size
  • Word spacing: 0.16× font size
• [ ] No loss of content or functionality with modified spacing

✅ 1.4.13 Content on Hover or Focus (Level AA - WCAG 2.1)

• [ ] Hover/focus content is dismissible (ESC key)
• [ ] Hover/focus content is hoverable (can move mouse to it)
• [ ] Hover/focus content is persistent until dismissed or trigger removed

Testing: Color blindness simulators, contrast analyzers, text spacing bookmarklet Tools: Colour Contrast Analyser, WebAIM Contrast Checker, Text Spacing Bookmarklet

WCAG 2.1 Principle 2: Operable (Level AA)

2.1 Keyboard Accessible

✅ 2.1.1 Keyboard (Level A)

• [ ] All interactive elements accessible via keyboard
• [ ] No keyboard traps (user can navigate away)
• [ ] Custom components support keyboard interaction
• [ ] Mouse-specific events have keyboard equivalents

✅ 2.1.2 No Keyboard Trap (Level A)

• [ ] Keyboard focus can move away from any component
• [ ] Modal dialogs allow keyboard exit
• [ ] Embedded content doesn't trap focus

✅ 2.1.4 Character Key Shortcuts (Level A - WCAG 2.1)

• [ ] Single character shortcuts can be turned off, remapped, or only active on focus
• [ ] Prevents conflicts with assistive technology shortcuts

Testing: Tab through entire interface, test with screen reader Common issues: Dropdown menus, custom widgets, modal dialogs

2.2 Enough Time

✅ 2.2.1 Timing Adjustable (Level A)

• [ ] Time limits can be turned off, adjusted, or extended
• [ ] Users warned before time expires with option to extend
• [ ] Essential time limits clearly justified

✅ 2.2.2 Pause, Stop, Hide (Level A)

• [ ] Moving content can be paused, stopped, or hidden
• [ ] Auto-updating content has controls
• [ ] Animations longer than 5 seconds are pausable

Testing: Look for countdowns, auto-refresh, animations Examples: Session timeouts, carousels, live updates

2.3 Seizures and Physical Reactions

✅ 2.3.1 Three Flashes or Below Threshold (Level A)

• [ ] No content flashes more than 3 times per second
• [ ] Flashing content below general flash threshold
• [ ] Alternative provided for flashing content

Testing: Manual review of animations and video content Tools: Photosensitive Epilepsy Analysis Tool (PEAT)

2.4 Navigable

✅ 2.4.1 Bypass Blocks (Level A)

• [ ] Skip links provided to bypass repetitive content
• [ ] Skip to main content link at top of page
• [ ] Skip links are keyboard accessible and visible when focused

✅ 2.4.2 Page Titled (Level A)

• [ ] Every page has unique, descriptive title
• [ ] Page titles describe purpose or topic
• [ ] Titles update for single-page applications

✅ 2.4.3 Focus Order (Level A)

• [ ] Tab order follows logical sequence
• [ ] Focus moves predictably through interface
• [ ] Modal dialogs trap focus appropriately

✅ 2.4.4 Link Purpose (Level A)

• [ ] Link purpose clear from link text alone OR
• [ ] Link purpose clear from link text plus context
• [ ] "Read more" links include topic information

✅ 2.4.5 Multiple Ways (Level AA)

• [ ] Multiple ways to locate pages (search, sitemap, navigation)
• [ ] Site search functionality available
• [ ] Breadcrumb navigation provided

✅ 2.4.6 Headings and Labels (Level AA)

• [ ] Headings and labels are descriptive
• [ ] Form labels clearly identify purpose
• [ ] Headings organize content hierarchy

✅ 2.4.7 Focus Visible (Level AA)

• [ ] Keyboard focus indicator visible for all focusable elements
• [ ] Focus indicators meet color contrast requirements
• [ ] Custom focus styles don't remove default focus

Testing: Tab navigation, screen reader testing, keyboard-only navigation Tools: Focus order bookmarklet, keyboard navigation testing

2.5 Input Modalities (WCAG 2.1)

✅ 2.5.1 Pointer Gestures (Level A - WCAG 2.1)

• [ ] Multipoint gestures (pinch zoom) have single-pointer alternative
• [ ] Path-based gestures (swipe) have simple alternative
• [ ] Complex gestures not required for essential functions

✅ 2.5.2 Pointer Cancellation (Level A - WCAG 2.1)

• [ ] Down-event doesn't execute functions (use up-event)
• [ ] Up-event can be aborted
• [ ] Click actions happen on up-event, not down-event

✅ 2.5.3 Label in Name (Level A - WCAG 2.1)

• [ ] Programmatic names include visible label text
• [ ] Voice control users can activate by speaking visible label
• [ ] Accessible names start with visible label text

✅ 2.5.4 Motion Actuation (Level A - WCAG 2.1)

• [ ] Device motion actions (shake, tilt) have alternative input methods
• [ ] Motion activation can be turned off
• [ ] Essential motion controls clearly identified

Testing: Touch device testing, voice control testing, motion sensor testing

WCAG 2.1 Principle 3: Understandable (Level AA)

3.1 Readable

✅ 3.1.1 Language of Page (Level A)

• [ ] Primary language declared in HTML (<html lang="en">)
• [ ] Language declaration is valid
• [ ] Screen readers can pronounce content correctly

✅ 3.1.2 Language of Parts (Level AA)

• [ ] Content in different languages marked up (<span lang="es">)
• [ ] Foreign phrases and terms identified
• [ ] Proper names and technical terms don't need language markup

Testing: HTML validator, screen reader pronunciation Common issues: Mixed-language content, missing lang attributes

3.2 Predictable

✅ 3.2.1 On Focus (Level A)

• [ ] Focus doesn't trigger unexpected changes of context
• [ ] Forms don't auto-submit when receiving focus
• [ ] Navigation doesn't change when elements receive focus

✅ 3.2.2 On Input (Level A)

• [ ] Changing settings doesn't cause unexpected context changes
• [ ] Form submission requires explicit action (submit button)
• [ ] Auto-complete suggestions don't change context

✅ 3.2.3 Consistent Navigation (Level AA)

• [ ] Navigation appears in same relative order across pages
• [ ] Primary navigation consistent throughout site
• [ ] Breadcrumb navigation follows consistent pattern

✅ 3.2.4 Consistent Identification (Level AA)

• [ ] Same functionality identified consistently across pages
• [ ] Icons and buttons for same actions are identical
• [ ] Form controls with same purpose have same labels

Testing: Navigate multiple pages, test form interactions Focus areas: Global navigation, form patterns, button consistency

3.3 Input Assistance

✅ 3.3.1 Error Identification (Level A)

• [ ] Input errors identified and described in text
• [ ] Error messages specify which fields have problems
• [ ] Errors visible to screen readers

✅ 3.3.2 Labels or Instructions (Level A)

• [ ] Form controls have labels or instructions
• [ ] Required fields clearly identified
• [ ] Input format requirements explained (dates, phone numbers)

✅ 3.3.3 Error Suggestion (Level AA)

• [ ] Error messages suggest corrections when possible
• [ ] Specific guidance provided for form errors
• [ ] Security-sensitive fields have appropriate error messages

✅ 3.3.4 Error Prevention (Level AA)

• [ ] Legal/financial/data submissions are reversible, checked, or confirmed
• [ ] Multi-step processes have review step
• [ ] Important actions have confirmation dialogs

Testing: Submit forms with errors, test required field validation Tools: Form testing checklist, validation testing

WCAG 2.1 Principle 4: Robust (Level AA)

4.1 Compatible

✅ 4.1.1 Parsing (Level A)

• [ ] HTML has complete start/end tags
• [ ] Elements nested according to specifications
• [ ] IDs are unique within page
• [ ] Attributes don't duplicate on elements

✅ 4.1.2 Name, Role, Value (Level A)

• [ ] All UI components have accessible name
• [ ] Role communicated to assistive technologies
• [ ] States and values programmatically determined
• [ ] Custom widgets implement ARIA patterns correctly

✅ 4.1.3 Status Messages (Level AA - WCAG 2.1)

• [ ] Status messages identified to assistive technologies
• [ ] Success messages announced to screen readers
• [ ] Error summaries communicated programmatically
• [ ] Live regions used appropriately (aria-live, role="status")

Testing: HTML validator, screen reader testing, ARIA validation Tools: aXe, Wave, HTML5 validator, ARIA validator

WCAG 2.1 Compliance Testing Tools

Automated Testing

• axe-core: Industry-standard accessibility testing engine
• WAVE: Web accessibility evaluation tool
• Lighthouse: Built into Chrome DevTools
• Pa11y: Command-line accessibility testing

Manual Testing Tools

• Keyboard navigation: Tab through entire interface
• Screen readers: NVDA (free), JAWS, VoiceOver
• Color contrast: Colour Contrast Analyser, WebAIM checker
• Text spacing: Text Spacing Bookmarklet

Browser Extensions

• axe DevTools: Comprehensive accessibility scanning
• WAVE: Quick accessibility overview
• HeadingsMap: Heading structure visualization
• Accessibility Insights: Microsoft's accessibility testing suite

WCAG 2.1 Testing Methodology

1. Automated Scanning (30% of issues)

Run automated tools to catch obvious violations:

• Missing alt text
• Color contrast failures
• HTML validation errors
• Basic ARIA implementation issues

2. Manual Testing (70% of issues)

Human evaluation catches complex issues:

• Keyboard navigation flow
• Screen reader experience
• Content quality and clarity
• Context and usability

3. User Testing

Real users with disabilities provide invaluable feedback:

• Blind users with screen readers
• Users with motor disabilities
• Users with cognitive disabilities
• Deaf users reviewing captions

Common WCAG 2.1 Failures and Fixes

1. Missing Alt Text

Failure: Images without alt attributes Fix: Add meaningful alt text or alt="" for decorative images

2. Color Contrast Issues

Failure: Text doesn't meet 4.5:1 contrast ratio Fix: Darken text color or lighten background

3. Keyboard Traps

Failure: Users can't navigate away from modal dialogs Fix: Implement proper focus management and ESC key handling

4. Missing Form Labels

Failure: Form inputs without associated labels Fix: Use <label> elements or aria-label attributes

5. Improper Heading Structure

Failure: Skipping heading levels (h1 to h3) Fix: Use sequential heading hierarchy

6. Inaccessible Custom Components

Failure: Custom dropdowns, accordions without keyboard support Fix: Implement ARIA patterns and keyboard interaction

WCAG 2.1 Compliance Documentation

Accessibility Statement

Document your WCAG 2.1 compliance efforts:

• Conformance level achieved (A, AA, AAA)
• Known accessibility issues
• Alternative formats available
• Contact information for accessibility concerns

Conformance Report

Create detailed WCAG 2.1 conformance documentation:

• Success criteria evaluation
• Testing methodology
• Issue remediation timeline
• Ongoing monitoring process

Start Your WCAG 2.1 Compliance Journey

This WCAG 2.1 compliance checklist provides the framework, but implementation requires systematic approach:

1. Baseline assessment: Scan your site for current accessibility status
2. Priority matrix: Address Level A violations first, then Level AA
3. Team training: Educate developers, designers, and content creators
4. Process integration: Build accessibility into design and development workflows
5. Ongoing monitoring: Regular testing and user feedback collection

Ready to start your WCAG 2.1 compliance assessment? Our automated scanning tool evaluates your website against all 78 WCAG 2.1 success criteria and provides clear remediation guidance.

Start Free WCAG 2.1 Scan

---

Need expert guidance on WCAG 2.1 compliance? Our accessibility specialists have helped hundreds of organizations achieve and maintain WCAG conformance. Get personalized compliance strategy tailored to your specific needs.