Introduction

In the world of web design, progress never ceases. And the latest addition to the Web Content Accessibility Guidelines (WCAG) family, WCAG 2.2, has just made its debut. It’s bringing a fresh set of new and updated guidelines that will leave a lasting impact on both new and existing designs. This is a significant victory for inclusive design, as WCAG 2.2 takes a substantial step towards addressing some of the persistent issues that have been causing headaches for users.

Sure, implementing these updates may require some effort, especially when it comes to retrofitting existing designs. However, the payoff is undeniably worth it. At the end of the day, these efforts are an investment in making your product more inclusive and user-friendly for everyone. So, let’s dive right in and explore what’s in store with WCAG 2.2 and how, as a designer, you can seamlessly integrate these changes into your work.

Guideline 2.5 — Input Modalities

Guideline 2.5 of WCAG 2.2 introduces two crucial changes, primarily focusing on improvements in functionality beyond keyboard interactions.

2.5.7 Draggable Movements (AA)

What are Draggable Movements?
This guideline advocates replicating dragging gestures that use a mouse with simpler pointer alternatives like taps or clicks. Dragging involves tapping or clicking to initiate movement, holding while moving the pointer, and releasing to complete the action.

Why is This Guideline Important?
Not all users can accurately perform dragging gestures, potentially excluding them from certain functionality. This guideline benefits users with mobility impairments, tremors, and fine motor skill issues.

How to Incorporate This Guideline in Your Designs
Identify where dragging gestures are required and ensure an alternative tap/click gesture is available, such as up/down or left/right buttons. Remember that solutions may vary based on context, so creativity is key to finding the most suitable alternative. Balancing functionality and accessibility ensures all users can effectively interact with your product.

2.5.8 Target Size (Minimum) (AA)

What is Target Size?
This update mandates that all pointer inputs (e.g., buttons) must be at least 24×24 CSS pixels in size.

Why is This Guideline Important?
Enlarging controls simplifies activation, especially for users with dexterity issues when targets are closely spaced.

How to Incorporate This Guideline in Your Designs

Design your websites and apps to ensure pointer inputs meet the minimum size requirement. Use larger targets for essential controls and increase spacing between closely spaced targets to reduce the risk of incorrect activation.

Guideline 2.4 Navigable

This guideline focuses on enabling users to navigate, find content, and understand their position within a web page.

2.4.11 Focus Not Obscured (Minimum) (AA)

What is Focus Not Obscured?
When a user focuses on an element with their keyboard, it must be at least partially visible, ideally fully visible. This ensures users know their position and aids navigation.

Why is This Guideline Important?
Obscured focus elements can lead to confusion and incorrect page navigation. Users with repetitive strain injuries or other disabilities benefit from this requirement.

How to Incorporate This Guideline in Your Designs
Design with the tabbing order and keyboard navigation in mind. Ideally, ensure the element with focus is always visible. When not possible, reduce instances where focus elements are obscured.

2.4.12 Focus Not Obscured (Enhanced) (AAA)

This AAA success criterion mandates that the element in focus must be fully visible without any author-created content obscuring it.

2.4.13 Focus Appearance (AAA)

This success criterion takes focus indicators to the next level, requiring that focus indicators meet specific contrast and size requirements.

2.4.14 Focus Appearance (Enhanced) (AAA)

Going beyond the minimum requirements, this criterion enforces further contrast and size standards for focus indicators.

Guideline 3.2 Predictable

This guideline aims to make web pages appear and operate predictably.

3.2.6 Consistent Help (A)

What is Consistent Help?
This guideline calls for the consistent placement of help mechanisms, including human contact details, self-help options, and automated mechanisms like chatbots, on all web pages.

Why is this Guideline Important?
Consistent help placement makes it easier for users, especially those with disabilities, to access assistance throughout their journey.

How to Incorporate This Guideline in Your Designs
Ensure help mechanisms are consistently placed, easily accessible, and follow a uniform design pattern across all pages.

Guideline 3.3 Input Assistance

This guideline helps users avoid and correct mistakes.

3.3.7 Redundant Entry (A)

What is Redundant Entry?
Redundant information entry is discouraged. Information provided by the user should be automatically populated or readily available when required again within the same session.

Why is this Guideline Important?
Reducing the need to re-enter information multiple times lessens cognitive effort and enhances user experience.

How to Incorporate This Guideline in Your Designs
Implement mechanisms to automatically populate previously entered information when needed.

3.3.8 Accessible Authentication (Minimum) (AA)

What is Accessible Authentication?
This criterion discourages using puzzles or cognitive tests (like CAPTCHAs) for login. Such tests can be challenging for users with cognitive disabilities.

Why is this Guideline Important?

Accessible authentication ensures that individuals with disabilities can participate fully in online activities. It breaks down barriers that may prevent users with visual, cognitive, motor, or other impairments from accessing essential services, making purchases, or engaging in various online interactions.

How to Incorporate This Guideline in Your Designs
Design login interactions without relying on puzzles or cognitive tests.

3.3.9 Accessible Authentication (Enhanced) (AAA)

This AAA-level criterion goes further, prohibiting recognition of objects or user-supplied images or media during the login process.

All of that to say…

In conclusion, WCAG 2.2 brings a range of improvements that not only enhance accessibility but also improve the overall user experience. As a designer, you have a unique opportunity to make the web more inclusive and user-friendly from the very beginning. By embracing these changes, you’re not just ticking compliance boxes but actively working to create a seamless and accessible online experience for all users.