1 of 126

Beyond accessibility basics

Charting a path for the GOV.UK Design System

2 of 126

Slides and resources

3 of 126

Hi, I’m David

4 of 126

I was working in London

5 of 126

Now I’m back

in Toronto

6 of 126

I work on

design systems,

7 of 126

I work on

design systems,

web accessibility

8 of 126

I work on

design systems,

web accessibility

and product design.

9 of 126

Past design systems:

  • Ontario
  • GOV.UK

10 of 126

Current design system:

  • Lyft

11 of 126

Note: opinions expressed are my own.

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

12 of 126

I like space and physics.

13 of 126

My goal is to

massively improve things that matter.

14 of 126

Massively improve:

  • scale
  • quality
  • processes

15 of 126

For things that matter:

  • accessibility
  • experiences
  • community

16 of 126

But… how?

17 of 126

For now,

design systems

18 of 126

Vibe check

19 of 126

Websites as

numerous

as the stars

20 of 126

Websites as

inaccessible

as the stars

21 of 126

The WebAIM ‘Million’ evaluation works as a gauge of the web’s general accessibility over time.

22 of 126

In the 2023 report, 96.3%

of the homepages evaluated

had at least 1 WCAG failure.

23 of 126

Over 4 years, the pace of improvement has averaged 0.375% per year.

24 of 126

I want to accelerate that pace.

25 of 126

Today I’d like to share a story.

26 of 126

A story in 7 acts:

  1. Starting a new accessibility role
  2. The question that blocked progress
  3. Our approach to the problem
  4. The resulting accessibility strategy
  5. Implementing the strategy
  6. What happened in the first year
  7. Final lessons learned

27 of 126

Act 1. To accessibility and beyond

Starting in a new accessibility role

28 of 126

Joining the GOV.UK Design System crew

29 of 126

A dream come true!

But also, a big adjustment.

30 of 126

The GOV.UK Design System is:

Components, patterns and guidance

31 of 126

The GOV.UK Design System is:

Components, patterns and guidance

that help teams design and develop

32 of 126

The GOV.UK Design System is:

Components, patterns and guidance

that help teams design and develop

consistent, usable and accessible services

33 of 126

The GOV.UK Design System is:

Components, patterns and guidance

that help teams design and develop

consistent, usable and accessible services

for the GOV.UK ecosystem.

34 of 126

If websites are stars,

a design system is a stellar nursery.

35 of 126

Setting services up for success

  1. Anticipating service needs

36 of 126

Setting services up for success

  • Anticipating service needs
  • Anticipating end user needs

37 of 126

Setting services up for success

  • Anticipating service needs
  • Anticipating end user needs
  • Responding to the ecosystem

38 of 126

It’s a solidly accessible design system.

39 of 126

It’s a mature

design system.

40 of 126

The role had lots of autonomy.

41 of 126

The role had lots of autonomy.

But little direction.

42 of 126

The team’s so talented!

They had great ideas.

43 of 126

All weighed down

by a question.

44 of 126

Act 2. The ultimate

question

The question that blocked progress

45 of 126

“What’s the priority?”

46 of 126

A solid baseline of web accessibility ruled out easy answers.

47 of 126

Two types of prioritization needed:

  • Accessibility versus accessibility

48 of 126

Two types of prioritization needed:

  • Accessibility versus accessibility
  • Accessibility versus everything else

49 of 126

Ideas for accessibility work (part 1):

  • Improve existing components
  • Accessibility training (for the design system team or for service teams)

50 of 126

Ideas for accessibility work (part 2):

  • Explore updating to meet WCAG 2.2
  • Run a full audit (of the design system)

51 of 126

Ideas for accessibility work (part 3):

  • Improve automated testing
  • Write more accessibility guidance

52 of 126

Ideas for accessibility work (part 4):

  • Contribute to standards (WCAG, CSS)
  • Upstream bugs (report to Chromium, Firefox, JAWS, NVDA, WebKit, etc.)

53 of 126

They’re all excellent ideas.

But what’s the priority?

54 of 126

Well, it’s a trick question.

55 of 126

“It depends”

56 of 126

It depends on the team’s:

  • current projects
  • available skill sets
  • external pressures
  • capacity

57 of 126

We had the permission to approach this question properly.

58 of 126

For a large and mature

design system, making a

quick decision isn’t as helpful

as making the right decision.

59 of 126

And so that was the situation:

  • a talented team
  • a mature design system
  • lots of great options
  • a need for common goals
  • incentive to get it right

60 of 126

I did what I often do: started thinking about strategy.

61 of 126

Info to consider when deciding priorities (part 1):

  • What does the team value?
  • What do our clients value?
  • What does leadership value?
  • What has the biggest impact?

62 of 126

Info to consider when deciding priorities (part 2):

  • What skills do team members have?
  • What’s our capacity?
  • What’s most pressing?
  • What are we passionate about?

63 of 126

Let’s make an accessibility strategy

64 of 126

And let’s do it collaboratively

65 of 126

Act 3. Set a course for answers

Our approach to the problem

66 of 126

First step: let the team know what I was going to do.

67 of 126

Then, draft a rough plan.

68 of 126

A practical document

69 of 126

The document needed to cover:

  • what our principles are
  • what we do to meet those principles

70 of 126

A ‘strategy’ did seem like good branding.

71 of 126

Three drafts:

  1. Within the team
  2. Within the department (GDS)
  3. Public, within the design system community

72 of 126

The first draft

73 of 126

The first draft proposed:

  • goals, priorities, principles
  • decisions the team could make
  • activities we could do
  • ways to measure the strategy

74 of 126

The team reviewed the first draft, adding comments, ideas, and suggested edits.

75 of 126

The big win: team decisions

76 of 126

The second draft

77 of 126

The second draft focused on:

  • Alignment with the accessibility monitoring body (also in GDS)
  • Alignment with other products (gov.uk, digital identity)
  • Any concerns from leadership

78 of 126

Colleagues across the Government Digital Service reviewed the second draft.

79 of 126

The big win: setting principles

80 of 126

The third draft

81 of 126

The third draft focused on:

  • Feedback from service teams
  • Feedback from web accessibility advocates across government
  • Finalizing the content

82 of 126

People from across the UK Government reviewed the third draft.

83 of 126

The big win: public collaboration

84 of 126

Time to publish

85 of 126

Act 4. We have liftoff

The resulting accessibility strategy

86 of 126

We published on our site

87 of 126

We also wrote a blog post for the launch

88 of 126

The prioritization results

89 of 126

6 priority levels (part 1):

  1. what we must do legally
  2. what only we are positioned to do
  3. what reduces the risk of inaccessible implementations

90 of 126

6 priority levels (part 2):

  • what improves accessibility for many services
  • what makes it easier for service teams to do their jobs
  • what is good to do without adding risk to the priorities above

91 of 126

Highest priority activities:

  • Update styles, components and patterns to WCAG 2.2 AA
  • Update the website to comply with WCAG 2.2 AA

92 of 126

Priority level 2 activities:

  • Raise bugs with assistive technology and browser vendors
  • Contribute to relevant international specifications and standards

93 of 126

Priority level 3 activities:

  • Enhance automated accessibility testing in our development pipeline
  • Improve accessibility guidance for styles, components and patterns
  • Standardise and improve our manual testing methodology

94 of 126

Priority level 4 activities:

  • Build new components and patterns that help teams meet WCAG 2.2
  • Learn how end-users of GOV.UK use assistive technology

95 of 126

Priority level 5 activities:

  • Conduct user research on the design system
  • Support a consistent interpretation of WCAG across government
  • Connect with vendors on auditing standards
  • Advocate for access to testing devices & software

96 of 126

Priority level 6 activities:

  • Explore how emerging technologies could improve accessibility
  • Offer 'one-to-many' accessibility training and learning opportunities

97 of 126

Let’s summarize

the impact

98 of 126

3 things the strategy achieved:

  1. We made tough decisions
  2. We aligned the team
  3. We solidified WCAG 2.2 timelines

99 of 126

3 side benefits of the process:

  1. Increased transparency
  2. Built-in accountability
  3. A multi-year ‘mandate’

100 of 126

3 calculated risks taken:

  1. Losing sight of the reason why we do accessibility work
  2. Disagreement from senior leadership
  3. Over-promising

101 of 126

Act 5. Boldly going

Implementing the strategy

102 of 126

What came next?

103 of 126

Doing the work.

104 of 126

And we sure did!

105 of 126

It was a highly successful year for web accessibility on the design system team

106 of 126

A lot of the rapid progress was thanks to accessibility work being prioritized by our:

  • product manager
  • delivery managers
  • team leads

107 of 126

Largest piece of accessibility work:

Updating our design system code and guidance to align with WCAG 2.2.

Started in January 2023.

108 of 126

6+ streams of WCAG 2.2 work,

often running in parallel.

It required collaboration between several disciplines.

109 of 126

Act 6. A trip

around the sun

What happened in the first year

110 of 126

Improved web accessibility,

ahead of schedule

111 of 126

Fully completed:

  • Updating to meet WCAG 2.2 AA
  • Enhancing automated accessibility testing

112 of 126

WCAG 2.2 updates launched 3 months early

113 of 126

Made surprising progress on:

  • Standardize manual testing methods
  • Contribute to international standards

114 of 126

Made minor iterations on:

  • Build new components for WCAG 2.2
  • Raise bugs with browser vendors

115 of 126

And wildly unexpected success on:

  • Offer accessibility learning opportunities

116 of 126

Documentation:

a generation starship

117 of 126

Helping future team members

118 of 126

The next accessibility specialist gets:

  • Documentation on how the team approaches accessibility work
  • A proposed work plan until 2025
  • A way to change the team’s direction (it’s a living document)

119 of 126

Act 7. Don’t panic

Final lessons learned

120 of 126

1. Make it practical

121 of 126

2. Don’t shy away

from making decisions

as a team

122 of 126

3. Embrace public and phased drafts

123 of 126

4. Web accessibility is big, so prioritize

124 of 126

5. State what you’re not going to do,

and why

125 of 126

P.S.

Come get a sticker!

126 of 126

Questions

and thank you!