WCAG 2.2 Explained – What Designers and Content Creators Need To Know

As the digital landscape evolves, ensuring inclusive and accessible online experiences becomes more critical than ever. Recently, the WC3 released its version 2.2 updates to the Web Content Accessibility Guidelines (WCAG), bringing with it new standards and considerations. If you’re a website designer, application developer, or digital marketer, understanding these changes is crucial for creating content that reaches all users barrier-free.

The Evolution of WCAG: A Brief Overview

Originally introduced in 1999, WCAG has seen significant updates over the years, with versions 2.0 and 2.1 paving the way for the recent 2.2 release. These guidelines serve as the standard for evaluating the accessibility of digital products, including websites, applications, and responsive designs.

Key Milestones

Why WCAG Matters for Designers and Content Creators

WCAG is more than just a set of rules; it influences legal and policy frameworks around the world. Governments and private entities alike rely on WCAG to shape accessibility laws and regulations. For designers and content marketers, compliance with these guidelines is not only ethical but also essential for reaching broader audiences.

What’s New in WCAG 2.2: A Designer’s Perspective

WCAG 2.2 introduces nine new success criteria that specifically address mobility, cognitive impairments, and advancements in technology. Let’s explore some key criteria updates that directly impact design:

1. Consistent Help (3.2.6, Level A): Ensuring that users receive consistent and clear assistance throughout their digital journey is paramount. Designers should focus on providing help mechanisms to users and that those mechanisms can be easily and consistently located across multiple pages of a site or application.

2. Redundant Entry (3.3.7, Level A): Avoiding unnecessary repetition in form submissions is a critical consideration. Redundant entry guidelines emphasize efficiency and ease of use for all users, especially those with cognitive challenges. When entering information in as part of a process, that information is pre-populated throughout the process. For example, the check-out process in an e-commerce website, the user can opt to use their shipping address as their billing address. 

3. Accessible Authentication (3.3.8 Level AA): This criterion reinforces the need to design a work around to any cognitive function tests used on a website or application for authentication.  Specifically, for each step in an authentication process that relies on a cognitive function test, at least one other authentication method is available that does not rely on a cognitive function test, or a mechanism is available to assist the user in completing the cognitive function test.  Examples to address include authentication that gives a link that sends users an email, which in turn contains a link that authenticates the user, or ability to mark up input fields so that password managers can store authentication information.

4. Target Size (2.5.8, Level AA): This criterion dives into the pixel specifics. Designers must ensure that clickable or tappable targets are at least 24 by 24 pixels or provide sufficient distance from the next clickable or tappable target, ensuring users can interact with elements comfortably and not activate elements unintentionally. Real-world examples and visual aids can help designers understand and implement this effectively.

5. Focus Not Obscured (2.4.11, Level AA): Addressed when a user interface component receives keyboard focus, ensuring that component is not hidden due to author-created content. In effect, parts of the page should not overlap or hide focus of other actionable components. Consider a site with content that is created and put on top of other content; focus is not invisible when navigating that content underneath it.  This helps keyboard users navigating through the page without the use of a mouse. Another example would be sites using a sticky header that moves with the viewing window as you scroll up and down the web page but stays docked at the top of the page. If the header is overlapping page content, focus should still be visible to the content underneath the header. To properly test, one must make sure that the viewing window moves accordingly in a way that doesn’t obscure focus indication when the user is using the keyboard.

6. Dragging Movements (2.5.7, Level AA): If the user interface allows for dragging (with a mouse or by tapping a touch screen) you should be able to operate with a mouse click as well.  Any functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential.  In practice, a map that allows dragging to pan over an area also has directional arrows/buttons that move the map (up/down/left/right).

Looking Ahead: What Designers and Content Creators Should Anticipate

While WCAG 2.2 maintains backward compatibility with its predecessors, it’s essential for designers and content marketers to stay updated. An updated Voluntary Product Accessibility Template (VPAT) for WCAG 2.2, VPAT Version 2.5, was released by  The Information Technology Industry Council (ITI), creators of the VPAT.

Updated template resources incorporating WCAG 2.2 into the EU, WCAG, and INT editions of the VPAT now reflect the WCAG 2.2 updates.

In conclusion, the release of WCAG 2.2 underscores the industry’s commitment to inclusivity. Designers and content creators play a pivotal role in translating these guidelines into user-friendly, accessible digital experiences. By staying informed, addressing challenges proactively, and embracing the spirit of inclusivity, we can collectively create a web that truly serves everyone.

Acknowledgments: This article was adapted from a presentation and insights by Soheil Varamini, Senior Accessibility Audit Specialist at Microassist.

Related Posts

Advancements in Web Accessibility: From WCAG 2.0 to WCAG 2.1

VPAT: What Technology Vendors Need to Know

Don’t Forget The Documents: Minimizing ADA Accessibility Liability In Online PDFs