A megaphone above WCAG 2.2

WCAG 2.2: What changes for websites and how does it impact users?

Estimated read time: 10 minutes

The Web Content Accessibility Guidelines (WCAG) are an international standard for making web content accessible to people with disabilities. An updated version of WCAG – version 2.2 with 9 new success criteria and one promoted from AA to A – is expected to become the official standard in the summer of 2021. These updates focus on added guidance to help users with cognitive challenges, added criteria for eBooks and other types of digitized media, and new helpful guidelines especially for touchscreens and mobile platforms.

WCAG 2.2 follows the same theme of WCAG 2.1 – improving accessibility for three groups:

  1. users with cognitive or learning disabilities
  2. users with low vision
  3. users with disabilities on mobile devices

I’m Kate – an IAAP (International Association of Accessibility Professionals) certified Web Accessibility Specialist and I work with Sam – an expert screen reader user. We both work for Fable, a leading accessibility testing platform powered by people with disabilities. While the W3C is an extremely thorough technical document, we thought it might be helpful to create a plain language summary of these changes, focused on required actions and resulting impact.

At Fable, we believe organizations should go beyond accessibility guidelines to create exceptional and accessible user experiences. However, WCAG compliance is often embedded into accessibility legislation, so it’s useful to understand what’s needed to comply and what the outcome should be.

We’re going to review WCAG 2.2 from two perspectives:

  1. Organizations that want to meet the new level A and AA guidelines
  2. How assistive technology users will benefit from the new guidelines

Note: we’re only going to cover changes that impact A and AA compliance, not AAA. Level AA compliance is widely considered the globally accepted minimum standard, based on various accessibility laws. We’ve done our best to ensure we’re accurately interpreting 2.2, but please make sure you’re also using the official W3C WCAG 2.2 reference document.

Guideline 2.4 Navigable

2.4.7 Focus Visible (A)

This success criterion is not new, but it is being promoted from AA to A.

You could use the default browser focus state (but make sure you haven’t removed them using “outline: none” in your CSS).

Alternatively, you can create your own highly visible focus states (which are even better than the browser defaults which aren’t always highly visible). Reversing the link colour and background on focus is a great way to maintain your branding in focus states. Adding a thick border can also work well. Or even combining the two approaches can work.

Picture of Sam a white man with a beard wearing headphones and working on a laptop.

The Effect on People with Disabilities: Where am I?

This reflects just how important it is for people who can see and use a keyboard to know where the focus is at all times. It’s nearly impossible to navigate without seeing what you are currently focused on.

Pro tip: add outlines for Windows High Contrast Mode users

2.4.11 Focus Appearance (Minimum) (AA)

To meet this new success criterion, update your design system focus states to include:

  • 1 pixel or greater border around the entire focused element OR
    8 pixel or greater border on the shortest side
  • Colour change with 3 to 1 contrast difference from unfocused state
  • 3 to 1 contrast with all background colours OR 2 pixel or greater border around the entire focused element

Make sure that when focusable elements are taken out of the design system and used on your website or app that the focus indicator (i.e., border) is not hidden or overlapping with other elements on the screen.

Guideline 2.5 Input Modalities

2.5.7 Dragging (AA)

Supply alternatives to dragging in a user interface, unless dragging is essential. For example, ensure users can adjust the price range of a search filter using + and – buttons or entering a number in an input field instead of dragging a slider.

The Effect on People with Disabilities: Everyone wants to reorder things

From apps on a homepage, to items in a queue or list, dragging to reorder is a fundamental interact