1 of 103

Don't sleep on WCAG 2.2:

it helps real people

David Cox (he / him)

dav-idc.com

2 of 103

Slides and resources

3 of 103

Hi, I’m David 👋

4 of 103

I was working in London

5 of 103

Now I’m back

in Toronto

6 of 103

I work on

design systems,

7 of 103

I work on

design systems,

web accessibility

8 of 103

I work on

design systems,

web accessibility

and product design.

9 of 103

My goal is to

massively improve things that matter.

10 of 103

Massively improve:

  • scale
  • quality
  • processes

11 of 103

For things that matter:

  • accessibility
  • experiences
  • community

12 of 103

Past design systems:

  • Ontario
  • GOV.UK

13 of 103

Current design system:

  • Lyft

14 of 103

Note: opinions expressed are my own.

This talk does not represent the opinions or policies of any organization.

15 of 103

Vibe check

16 of 103

Making websites more accessible can be tricky.

17 of 103

What’s the point of WCAG?

18 of 103

What’s the point of WCAG 2.1?

19 of 103

What’s the point of WCAG 2.2?

20 of 103

WCAG 2.1:

“defines how to make Web content more accessible to people with disabilities.”

21 of 103

WCAG 2.2:

“defines how to make Web content more accessible to people with disabilities.”

22 of 103

They’re the ‘same picture’

(well, their purpose is the same)

23 of 103

But WCAG 2.2 isn’t some ‘special edition’

version.

24 of 103

It’s more like a firmware update.

25 of 103

WCAG 2.2

“I’m you, but stronger.”

WCAG 2.1

“Who are you?”

26 of 103

2.2 adds 9 criteria to address 7 specific accessibility needs.

27 of 103

2.2 removes 1 criterion that is no longer relevant.

28 of 103

2.2 expands the glossary with 6 new terms.

29 of 103

What’s the point?

30 of 103

What’s the point?

A more complete set of guidelines, to better meet the intended goal.

31 of 103

The intended goal:

Make web content more accessible to people with disabilities.

32 of 103

But is aiming for WCAG 2.1

good enough?

33 of 103

… Is relying on an outdated instruction manual good enough?

34 of 103

Hot take: WCAG 2.1 was never

‘good enough’.

35 of 103

So what do we do?

36 of 103

Start from:

real lived experiences.

37 of 103

Refer back to:

real lived experiences.

38 of 103

Make it easier to:

Interact within services.

39 of 103

Easier for people who use:

Input devices

other than a mouse.

For example, a mouth stick

or voice command software.

40 of 103

Easier for people with:

Motor disabilities.

For example, cerebral palsy.

41 of 103

Easier for people experiencing:

Hand or body tremors.

For example, from Parkinson’s disease.

42 of 103

Target size

43 of 103

The intent: target size

To prevent selecting the wrong item on small or crowded screens.

44 of 103

45 of 103

Clue: target size

Elements are:

  • interactive
  • smaller than 24 pixels by 24 pixels
  • in an area crowded with other interactive elements

46 of 103

Examples: target size

Sometimes applies to:

  • crowded social media links
  • dates in a date-picker calendar
  • edit icons on top of interactive elements
  • carousel slide selectors

47 of 103

Dragging

movements

48 of 103

The intent: dragging movements

To make sure interactions which allow for selecting elements and dragging them also work without dragging.

49 of 103

50 of 103

Clue: dragging movements

An element:

  • includes a way to interact by activating and dragging
  • requires either a mouse or touch gesture to interact
  • has no alternative interaction method

51 of 103

Examples: dragging movements

Sometimes applies to:

  • drag-and-drop learning activities
  • interactive puzzles
  • digital canvas tools
  • reordering items in a list

52 of 103

Make it easier to:

Navigate through services.

53 of 103

Easier for people who are:

Navigating with a keyboard.

For example, to help ease

repetitive strain injury (RSI).

54 of 103

Easier for people with:

Blurred or low vision.

For example, from age-related cataracts.

55 of 103

Focus

appearance

56 of 103

The intent: focus appearance

To provide a clearer and more noticeable visual change when indicating which element of a website is currently focused.

57 of 103

58 of 103

Clue: focus appearance

An element’s focus indicator:

  • looks very ‘thin’
  • doesn’t completely surround the element
  • has contrast / luminance that is fairly similar to the pixels it replaced or the background around it

59 of 103

Examples: focus appearance

Applies to anything with a focus indicator:

  • form inputs
  • header and navigation items
  • links (including linked images)
  • buttons

60 of 103

Focus not obscured

61 of 103

The intent: focus not obscured

To make sure that whichever element is currently focused isn’t covered up by other elements.

62 of 103

63 of 103

Clue: focus not obscured

An element either:

  • covers up focused content
  • is ‘sticky’ (un-moving) when scrolling

64 of 103

Examples: focus not obscured

Applies to anything blocking focusable elements:

  • ‘floating’ webchat and chatbot elements
  • ‘sticky’ headers
  • menus (dropdown, flyout or mega)
  • cookie consent pop-overs

65 of 103

Make it easier to:

Find help within services.

66 of 103

Easier for people experiencing:

Difficulties with memory.

For example, from dementia.

67 of 103

Easier for people who are:

Navigating based on

reading order.

For example, when using a screen reader.

68 of 103

Easier for people who are:

Dealing with high stress

or anxiety.

For example, from a panic disorder.

69 of 103

Consistent help

70 of 103

The intent: consistent help

To place help and support tools that exist across multiple pages in a consistent spot.

71 of 103

72 of 103

Clue: consistent help

A series of pages across a service include:

  • a tool for getting ‘help’
  • a widget for ‘help’
  • a link to ‘help’ info

73 of 103

Examples: consistent help

Sometimes applies to:

  • contact info sections
  • header or footer ‘help’ links
  • webchat or chatbots
  • any help tools that repeat across a service

74 of 103

Make it easier to:

Enter the right information.

75 of 103

Easier for people experiencing:

Difficulties with

memory and recall.

For example, due to dementia.

76 of 103

Easier for people experiencing:

Fatigue from manually

entering information.

For example, due to arthritis.

77 of 103

Redundant entry

78 of 103

The intent: consistent help

To avoid asking for the same information multiple times in a single journey, and enable previously entered information to be re-used.

79 of 103

80 of 103

Clue: redundant entry

A single online journey requires a user to:

  • enter the same info more than once

81 of 103

Examples: redundant entry

Sometimes applies when asking for:

  • mailing and shipping addresses
  • name or birth date confirmation
  • ID and card details
  • any info that doesn’t often change

82 of 103

Make it easier to:

Log in to

services.

83 of 103

Easier for people experiencing:

Difficulties with problem-solving.

For example, due to a cognitive disability that affects visual comprehension.

84 of 103

Easier for people experiencing:

Difficulties with

math or numbers.

For example, due to dyscalculia.

85 of 103

Accessible authentication

86 of 103

The intent: consistent help

To avoid cognitive function tests, puzzles and memorization exercises during login processes.

87 of 103

88 of 103

Clue: accessible authentication

A login process contains any of the following:

  • a ‘test’
  • something that a user needs to ‘remember’
  • no autofill options for inputs

89 of 103

Examples: accessible auth

Applies when:

  • logging in and 2-factor
  • re-authenticating during a session
  • (not when signing up or registering)
  • (not when just submitting files / forms)

90 of 103

That’s a lot of info.

91 of 103

But what’s the main point?

92 of 103

Let’s review.

93 of 103

Looking just at the 9 new criteria…

94 of 103

WCAG 2.2 helps people using:

mobile devices | screen readers | voice command software |

mouth sticks | keyboards |

switches | other pointer inputs

95 of 103

WCAG 2.2 helps people to:

login | navigate | enter information | find help info | interact with services

96 of 103

WCAG 2.2 helps people with:

dementia | dyslexia | arthritis | RSI | Parkinson’s disease | cataracts | cognitive disabilities | dyscalculia | panic disorders | cerebral palsy

97 of 103

WCAG 2.2 helps people who are experiencing:

anxiety | stress | tremors | fatigue

98 of 103

WCAG 2.2 helps people who are having difficulty:

problem-solving | reading |

writing | remembering | calculating

99 of 103

So, WCAG 2.2 can do a lot.

100 of 103

And most importantly…

101 of 103

WCAG 2.2 helps lots of real people.

102 of 103

Let’s

help people.

103 of 103

Questions

and thank you!

WCAG 2.2

helps people.