<img loading="lazy" alt="Post List Summary Featured Image" src="https://f.hubspotusercontent30.net/hubfs/3280432/Mobile-App-Accessibility.png">

WCAG 2.0 vs. 2.1: Why You Should Adopt ASAP

By UsableNet on Oct 26, 2020
Topics: WCAG

0 Comments

The Web Content Accessibility Guidelines (WCAG) are the de facto industry standard for website accessibility. The WCAG details the criteria you need to meet to make your site accessible to all users. Well-known recommendations include adding alt text to images and closed captions or transcripts for videos.

The WCAG 2.1 was the latest iteration of the standards, introduced in June 2018.

Editor's Note: WCAG 2.2 is here! Click to read more about what the release of WCAG 2.2 means for your business.

Even with the release of WCAG 2.2, WCAG 2.1 is the most adopted industry standard for accessibility. WCAG 2.1 has 17 additional usability and accessibility considerations. WCAG 2.1 offers two important benefits for users of assistive technology over 2.0.

  • Enormous focus on mobile, which was a big gap in WCAG 2.0 even though it’s a fundamental channel with significant developments from both iOS and Android
  • Specifically addresses issues for users with motor and dexterity disabilities, individuals with low vision, those with vestibular disabilities, and people with cognitive disabilities. 

Following the WCAG 2.1 guidelines is the best way to ensure that digital content and environments (including your website and apps) are usable and accessible for people with disabilities. In addition, based on recent legal trends, adhering to WCAG 2.1 is the safest bet to protect your business from accessibility lawsuits and liabilities.

Learn how WCAG compliance aligns with the European Accessibility Act (EAA) here.

In discussing WCAG 2.1, we’ll touch on why the W3C decided to update the standard, what’s different from WCAG 2.0, why you should follow these recommendations, and how you can get started making these changes.

Test your site against WCAG 2.2 standards here.

Why the Change?

There are many reasons that the W3C decided to create the WCAG 2.1 in lieu of a brand new standard (such as the upcoming WCAG 3.0 AG Working Group). According to the W3C, WCAG 2.1 was initiated with the goal to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Although a WCAG 3.0 is very much in the works, they felt a need to address these critical user groups in an agile way.

Ultimately, the W3C created WCAG 2.1 to help people, such as users with disabilities, who needed clarity on the existing standards to ensure a seamless experience on websites, apps, and other applicable digital content.

For businesses operating in the EU, understanding WCAG compliance is essential for meeting EAA requirements. Learn more.

The Differences Between the WCAG 2.0 and 2.1

Seventeen new criteria differentiate WCAG 2.0 from WCAG 2.1. The biggest difference is the advanced considerations for mobile users.

WCAG 2.1 has a greater impact on mobile usage and the preferences of those with low vision and cognitive disabilities. Mobile was overlooked in past accessibility guidelines like WCAG 2.0.

In today’s world, many of us, including people within the disability community, increasingly rely heavily on mobile for everyday tasks. This makes moving to the standards outlined in WCAG 2.1 all the more urgent.

All of the mandates from 2.0 are included in 2.1, so if you were previously up to date, you can build on the changes you already made and simply incorporate the new requirements.

These are the new criteria that you’ll need to include:

  • Orientation. The site or app must work regardless of the orientation of the device. If a wheelchair user has a tablet attached to their device and can’t rotate it horizontally, they should still be able to use the site.
  • Identify Input Purpose. Auto-fill or auto-correct suggestion text for input fields, including for things like customer addresses.
  • Identify Purpose. The purpose of UI components, icons, and regions should be programmatically determined in content using markup languages.
  • Reflow. Content can be presented without requiring scrolling in two dimensions. (See specific dimensions here).
  • Non-Text Contrast. Presentation of UI components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.
  • Text Spacing. No loss of content or functionality happens by setting text spacing and changing no other property in content implemented using markup languages.
  • Content on hover or focus. When receiving and removing pointer hover or keyboard focus to reveal additional content, you need the additional content to be dismissible, persistent if the user is still hovering, and still available once the pointer moves over the additional content.
  • 4 Character Key Shortcuts. Mechanisms must be available to turn shortcuts on or off, to remap a shortcut, or to only become active when the component has focus.
  • Timeouts. Users are warned about the duration of inactivity that could cause data loss unless data is preserved for more than 20 hours.
  • Animation from Interactions. Motion animation triggered by interaction can be disabled unless it’s essential to the functionality or information being conveyed.
  • Pointer Gestures. All functionality using multipoint or path-based gestures can be operated with a single pointer without path-based gestures unless they’re essential.
  • Pointer Cancellation. For functionalities that can use a single pointer, there must be either a no-down event, an up reversal, an abort or undo option for down-events unless they’re essential.
  • Label in Name. UI components with text or images-of-text labels, the text must be presented visually.
  • Motion Actuation. Functionality operated by device or user motion can also be operated by UI components, and the motion can be disabled except in a few particular use cases.
  • Target Size. The size of the target for pointer inputs is at least 44x44 CSS pixels, barring a few particular exceptions.
  • Concurrent Input Mechanisms. Web content can’t restrict the use of input modalities available except where restriction is essential to ensure security or respect user settings.
  • Status Messages. Status messages can be determined through properties so they can be presented with assistive technologies without receiving focus on content implemented using markup languages.

Meeting these accessibility criteria is not only a best practice but will also be mandatory under the European Accessibility Act (EAA) for businesses serving EU customers.

Why Adopt WCAG 2.1 Recommendations

Here are some key reasons we recommend businesses adopt WCAG 2.1 as soon as possible:

  • Legal Compliance: More than 75% of all federal ADA lawsuits reference WCAG 2.1 (level AA), making it the safest compliance standard.

  • State Regulations: The California Consumer Privacy Act (CCPA) references WCAG 2.1 as the standard for accessibility.

  • Global Standards: WCAG 2.1 is widely adopted in accessibility laws, including Section 508 (U.S.), AODA (Canada), and EAA (Europe).

  • Enterprise Vendor Requirements: Some major corporations, like Verizon, require their vendors to meet WCAG 2.1 for accessibility compliance.

Aligning with WCAG 2.1 can improve usability for all users, reduce legal risk, improve brand reputation, and enhance user engagement.

Navigating the European Accessibility Act: Requirements and Best Practices

With EAA enforcement beginning in June 2025, businesses must comply with WCAG and other accessibility regulations. For more, watch our On-Demand webinar on Navigating the European Accessibility Act. 

UsableNet

UsableNet

Founded in 2000, UsableNet created some of the first tools and platforms to make websites accessible and usable for all people. Starting out, we worked with government agencies as well as universities and corporations. Today, accessibility has become important to almost all companies. We provide accessibility solutions to Fortune 1000 companies, small and medium enterprises, government, and education organizations across industries including retail, travel, hospitality, food services, automotive, financial services, and healthcare.

Need to improve digital usability, accessibility or performance? We can help.
Partner with us. Get in touch.