WCAG 2.1: What's New in Web Content Accessibility Guidelines 2.1

WCAG 2.1web accessibilityaccessibility guidelinesWCAG complianceBrowseCheck
·10 min read

The Web Content Accessibility Guidelines (WCAG) 2.1, published in June 2018, represents a significant evolution in web accessibility standards. Building upon WCAG 2.0's foundation, version 2.1 introduces 17 new success criteria addressing gaps in mobile accessibility, low vision user needs, and cognitive disabilities. Understanding what's new in WCAG 2.1 is essential for organizations committed to inclusive digital experiences.

Why WCAG 2.1 Was Necessary

When WCAG 2.0 was published in 2008, the mobile web was in its infancy. The iPhone had just launched, responsive design didn't exist, and touch interfaces were uncommon. A decade later, the digital landscape had transformed dramatically:

  • Mobile-first browsing: Over 60% of web traffic comes from mobile devices
  • Touch interfaces: Smartphones and tablets dominate personal computing
  • Diverse input methods: Voice control, gestures, and alternative pointers
  • Aging populations: Growing numbers of users with low vision and cognitive challenges

WCAG 2.0, while comprehensive, didn't adequately address these modern accessibility challenges. WCAG 2.1 fills those gaps while maintaining complete backward compatibility—everything that conformed to WCAG 2.0 also conforms to WCAG 2.1.

The 17 New Success Criteria

WCAG 2.1 adds 17 new success criteria across the three conformance levels (A, AA, AAA). These additions focus on three primary areas: mobile accessibility, low vision needs, and cognitive/learning disabilities.

Mobile and Touch Accessibility (5 Criteria)

Modern accessibility must account for how people actually use the web—increasingly through mobile devices with touch interfaces.

1.3.4 Orientation (AA): Content doesn't restrict viewing to a single orientation (portrait or landscape) unless essential. Users should be able to rotate their devices freely.

1.4.10 Reflow (AA): Content reflows to a single column at 320 CSS pixels width without requiring horizontal scrolling or loss of information. This helps users who zoom content significantly.

1.4.11 Non-Text Contrast (AA): UI components and graphical objects have at least 3:1 contrast against adjacent colors. This ensures buttons, form controls, and icons are visually distinguishable.

1.4.12 Text Spacing (AA): No loss of content or functionality occurs when users adjust text spacing (line height, paragraph spacing, letter spacing, word spacing). This supports users who need modified spacing to read comfortably.

1.4.13 Content on Hover or Focus (AA): Content that appears on hover or focus can be dismissed, doesn't obscure other content, and remains visible until user action or dismissal. This addresses tooltips and similar dynamic content.

Pointer and Input Flexibility (4 Criteria)

Not everyone uses a mouse. WCAG 2.1 addresses touch screens, styluses, voice control, and other input methods.

2.5.1 Pointer Gestures (A): Functionality requiring multi-point or path-based gestures (pinch-to-zoom, swipe) also works with single-point activation. This helps users who can't perform complex gestures.

2.5.2 Pointer Cancellation (A): For single-pointer functionality, activation occurs on the up-event, and users can abort or undo actions. This prevents accidental activation.

2.5.3 Label in Name (A): For UI components with visible labels, the accessible name includes the visible text. This helps voice control users who say what they see.

2.5.4 Motion Actuation (A): Functionality triggered by device motion (shaking, tilting) can also be operated through UI components, and motion response can be disabled. This helps users who can't perform physical movements or experience accidental activation.

Low Vision and Zoom (3 Criteria)

Users with low vision often rely on zoom and customization features. WCAG 2.1 ensures sites work well when magnified or customized.

1.4.10 Reflow (AA): Already mentioned above—essential for low vision users who zoom significantly.

1.4.11 Non-Text Contrast (AA): Already mentioned above—critical for users with low vision to perceive UI elements.

1.4.12 Text Spacing (AA): Already mentioned above—supports users who need modified spacing to read.

Cognitive and Learning Disabilities (5 Criteria)

Cognitive disabilities affect how users process information, remember steps, and understand content. WCAG 2.1 addresses these often-overlooked needs.

1.3.5 Identify Input Purpose (AA): Input fields collecting user information have programmatically determinable purpose. This enables browsers to auto-fill forms and helps users with cognitive disabilities complete forms more easily.

2.2.6 Timeouts (AAA): Users are warned about data loss due to inactivity timeouts. This helps users who need more time to complete tasks.

2.3.3 Animation from Interactions (AAA): Motion animation triggered by interactions can be disabled unless essential. This helps users with vestibular disorders and attention difficulties.

2.5.5 Target Size (AAA): Touch targets are at least 44x44 CSS pixels except when equivalent alternatives exist, inline with text, or when size is essential. While AAA level, this is critical for mobile usability.

2.5.6 Concurrent Input Mechanisms (AAA): Content doesn't restrict use of input modalities unless essential. Users can switch between keyboard, mouse, touch, and voice freely.

Parsing and Compatibility (1 Criterion)

4.1.3 Status Messages (AA): Status messages are programmatically determined and presented to assistive technology users without receiving focus. This ensures screen reader users receive important updates like "Item added to cart" or "Form submitted successfully."

What WCAG 2.1 Level AA Means for Your Website

Most accessibility laws and standards, including AODA, reference WCAG 2.0 Level AA. However, forward-thinking organizations are adopting WCAG 2.1 Level AA as their target, which includes:

  • All WCAG 2.0 Level A criteria (25 criteria)
  • All WCAG 2.0 Level AA criteria (13 criteria)
  • All WCAG 2.1 Level A criteria (5 new criteria)
  • All WCAG 2.1 Level AA criteria (7 new criteria)

Total: 50 success criteria to meet WCAG 2.1 Level AA

Priority New Criteria for Modern Websites

If you're already WCAG 2.0 Level AA compliant, focus on these WCAG 2.1 additions for maximum impact:

High Priority

Reflow (1.4.10): Essential for mobile users and zoom users. Test your site at 320px width—can users access all content without horizontal scrolling?

Non-Text Contrast (1.4.11): Buttons, form fields, and icons need 3:1 contrast. Review your UI components with contrast checkers.

Label in Name (2.5.3): If a button shows "Submit," its accessible name should include "Submit." Critical for voice control users.

Identify Input Purpose (1.3.5): Add autocomplete attributes to forms (name, email, phone, address fields). Helps everyone, especially users with cognitive disabilities.

Medium Priority

Orientation (1.3.4): Don't lock orientation unless truly necessary (like a game or camera app).

Text Spacing (1.4.12): Test that your site works when users override spacing. Users with dyslexia often need modified spacing.

Content on Hover or Focus (1.4.13): Ensure tooltips and dropdowns are dismissible and don't obscure content.

Status Messages (4.1.3): Use ARIA live regions to announce dynamic updates to screen reader users.

Consider for AAA

Target Size (2.5.5): While AAA level, 44x44px touch targets dramatically improve mobile usability for everyone.

WCAG 2.1 vs WCAG 2.0: Backward Compatibility

WCAG 2.1 was designed to be fully backward compatible with WCAG 2.0. This means:

  • If you meet WCAG 2.0 Level AA, you meet 43 of 50 WCAG 2.1 Level AA criteria
  • You only need to address the 7 new Level A and AA criteria
  • Nothing that passed WCAG 2.0 will fail WCAG 2.1
  • The four principles (POUR) remain unchanged
  • Level structure (A, AA, AAA) remains the same

Organizations currently targeting WCAG 2.0 can incrementally adopt WCAG 2.1 without disrupting existing compliance efforts.

Should You Target WCAG 2.1 or WCAG 2.0?

While many laws still reference WCAG 2.0, targeting WCAG 2.1 provides several advantages:

Better mobile experience: WCAG 2.1 explicitly addresses mobile and touch, critical for modern websites.

Future-proofing: Regulations are beginning to reference WCAG 2.1 (European EN 301 549 updated to WCAG 2.1 in 2021).

Improved usability: The new criteria benefit all users, not just those with disabilities.

Competitive advantage: Demonstrate commitment to cutting-edge accessibility standards.

Minimal additional effort: Only 7 new criteria at Level AA, many of which align with existing best practices.

Common WCAG 2.1 Implementation Challenges

Organizations implementing WCAG 2.1 often encounter these challenges:

Reflow Testing

Testing at 320px width reveals layout issues in sites designed for desktop-first. Common problems:

  • Content cut off at narrow widths
  • Horizontal scrolling required
  • Overlapping elements
  • Hidden navigation

Solution: Adopt mobile-first responsive design and test thoroughly at 320px width.

Non-Text Contrast

Subtle, low-contrast UI elements fail this criterion. Common violations:

  • Disabled form fields with insufficient contrast
  • Placeholder text below 3:1 contrast
  • Icon-only buttons with low contrast
  • Subtle focus indicators

Solution: Review all interactive elements with contrast checking tools, ensuring 3:1 minimum contrast.

Autocomplete Attributes

Adding proper autocomplete attributes requires understanding the 53 defined input types. Common mistakes:

  • Using wrong autocomplete values
  • Missing autocomplete on common fields
  • Incorrect autocomplete token combinations

Solution: Reference the HTML5.2 autocomplete specification and use standard values (name, email, tel, street-address, etc.).

Status Messages

Implementing ARIA live regions correctly requires understanding different politeness levels and use cases. Common mistakes:

  • Using role="alert" for non-critical messages
  • Missing live region announcements
  • Overly verbose announcements
  • Announcements that interrupt screen reader users

Solution: Use aria-live="polite" for most status messages, aria-live="assertive" only for critical alerts.

Testing for WCAG 2.1 Compliance

Testing WCAG 2.1 requires expanding your testing toolkit beyond WCAG 2.0:

Automated testing: Modern tools like axe DevTools include WCAG 2.1 checks. Ensure your scanner supports WCAG 2.1 criteria.

Responsive testing: Test at 320px width with 400% zoom to verify reflow.

Contrast checking: Use tools that check both text and non-text contrast (buttons, form controls, icons).

Mobile device testing: Test on actual smartphones and tablets with touch interfaces.

Orientation testing: Verify content works in both portrait and landscape orientations.

Text spacing testing: Use browser extensions that override spacing to verify no content loss.

Voice control testing: If possible, test with voice control software like Voice Control (iOS/macOS) or Voice Access (Android).

Screen reader testing: Verify status messages are announced appropriately with NVDA or VoiceOver.

Continuous monitoring solutions like BrowseCheck help track WCAG 2.1 compliance over time, alerting teams when new violations are introduced as sites evolve.

The Future: WCAG 2.2 and Beyond

WCAG 2.1 isn't the end of the evolution. WCAG 2.2 was published in October 2023, adding 9 more success criteria focused on mobile accessibility and cognitive support. WCAG 3.0 is in development with a complete restructuring of how accessibility is measured.

However, WCAG 2.1 remains the current standard referenced by most regulations and will be relevant for years to come. Organizations adopting WCAG 2.1 now position themselves well for future updates while delivering better experiences today.

Conclusion

WCAG 2.1 brings web accessibility standards into the mobile era, addressing touch interfaces, flexible input methods, zoom requirements, and cognitive needs that WCAG 2.0 couldn't anticipate in 2008. The 17 new success criteria, particularly the 12 at Level A and AA, represent essential improvements for modern web accessibility.

For organizations currently meeting WCAG 2.0 Level AA, upgrading to WCAG 2.1 Level AA requires addressing just 7 additional criteria—a manageable effort that delivers significant benefits for users with disabilities and improved usability for everyone.

Whether legally required or not, WCAG 2.1 represents current best practices for web accessibility. Adopting these standards demonstrates commitment to inclusive design and positions your organization at the forefront of digital accessibility.

Ready to assess your WCAG 2.1 compliance? Start with an audit specifically targeting the new criteria, particularly reflow, non-text contrast, and input purpose identification. These foundational improvements create immediate impact for mobile users and people with disabilities.

← Back to blog