What’s new in WCAG 2.2

What’s new in WCAG 2.2 Candidate Recommendation

Allison Ravenhall, @RavenAlly on Twitter

9 new success criteria - categorisations

2 x A, 5 x AA, 2 x AAA

5 x Operable, 4 x Understandable 3 x Navigable

2 x Input Modalities, 1 x Predictable, 3 x Input Assistance

Redundant Entry (Level A)

Shipping address is the same as billing address is the most common example of Redundant Entry.

When a form or process captures the same information more than once, enable automated methods to reuse the information: autofill, list of previously used data, checkbox to confirm reuse, etc.

Consistent Help (Level A)

When you have help channels, make sure they're presented widely and consistently across the site

Examples of help channels

• Phone number & hours

• Contact form

• Email address

• Chatbot

• Human messaging

• Frequently Asked Questions

• Support / help pages

• Social media channels

Focus Not Obscured (Level AA & AAA)

The chat window partially obscures a list of links in the footer. One of the links has a keyboard focus outline displayed.

Closeup screenshot of a website that use a floating non-modal chat window

To meet level AA, focus location may be partially obscured but not totally hidden by floating content.

To meet level AAA, focus location may not be obscured by floating content at all.

Dragging Movements (Level AA)

Isn’t this covered in 2.5.1 Pointer Gestures?

No, Pointer Gestures is scoped to path-based movements only, and dragging is not path-based.

Is meeting 2.1.1 Keyboard good enough?

No, this is specifically for pointer interfaces.

Screenshot of Google maps desktop web experience in sighted keyboard navigation mode

An example of an experience that works well for keyboard, but still requires complex swiping movements for pointer-based interfaces.

Screenshot of kanban board containing 4 columns of cards

An example of an experience that typically leans heavily on drag-and-drop interactions but can be augmented with context menu single-clicks.

Screenshot of a backlog list containing one column of items

An example of an experience that typically leans heavily on drag-and-drop interactions but can be augmented with context menu single-clicks.

Target Size (Minimum) (Level AA)

Minimum target size

Is 24 x 24px

If targets are smaller than 24 x 24, that's permitted, but

The target needs to have an exclusive offset of 24px in all directions to reduce accidental incorrect taps.

The nature of the target offset calculation

…means the exclusive area occupied by a target grows as a target size shrinks.

24 x 24px button has no exclusion area.

12 x 12px button has 12px offset.

6 x 6 px button has 18px offset.

Target size exemptions

• Inline elements

• Browser-defined elements

• Another conformant element that performs the same action

• Size or spacing is essential e.g. map pins

Accessible Authentication (Level AA & AAA)

The intent of accessible authentication is

Make it possible to authenticate without remembering, transcribing, or manipulating any information.

Alternate conformant authentication methods

• Biometrics

• Common identifiers: Name, email, phone number

• USB tokens

• Authentication links

• 3rd party login via OAuth

• WebAuthn (device authentication)

Options to make traditional username-password entry conformant

Provide support for password, one-time code entry

• Copy-paste

• Password manager integration

• Browser autofill

Additional authentication methods (AA only)

• Recognising generic objects

• Identifying images, audio, or video provided by the user

2.4.7 Focus Visible (re-categorised from level AA to A)

No change to Focus Visible

Like it says on the box: Visible keyboard focus

Focus Appearance (Level AA)

The default focus appearance scenario

• Solid outline

• Focused vs. unfocused contrast ≥ 3:1

• Adjacent contrast ≥ 3:1

Default focus appearance contrast checks

Focus colour : Outside colour ≥ 3:1 (Adjacent #1)

Focus colour : Inside colour ≥ 3:1 (Adjacent #2)

Focus colour : Unfocussed colour ≥ 3:1

The location of the solid outline can affect the adjacent contrast calculations

White button with a solid yellow focus outline that hugs the button fails the adjacent-inside check.

White button with a solid yellow focus outline that has some space between the focus line and the button edge passes.

Focus styles are often more complex than a solid outline though

Requirements for focus styles that aren't a solid outline

• Minimum size (2 options)

• Focused vs. unfocused contrast ≥ 3:1

• Adjacent contrast ≥ 3:1 OR focus width ≥ 2px

Calculating the minimum focus area

Focus area must be ≥ 1px solid border

Example for a 200 x 50px button: 200 + 200 + 50 + 50 - 4 = 496px minimum focus area

Supporting documentation is vague on calculating minimum focus area for irregular shapes

Examples: Heart, star, thumbs up

Another way to calculate a focus area

Focus ≥ 4px width along shortest side

All the new things

Accessible Authentication (AA, AAA)

Consistent Help (A)

Dragging Movements (AA)

Focus Appearance (AA)

Focus Not Obscured (AA, AAA)

Focus Visible (AA → A)

Redundant Entry (A)

Target Size (Minimum) (AA)