Accessibility Conference 2024: Building Knowledge, Breaking Barriers
Design Systems: the key to sustained web accessibility
Presented by David Cox
Slides and resources
Hi, I’m David
I was working in London
Now I’m back
in Toronto
I work on
design systems,
I work on
design systems,
web accessibility
I work on
design systems,
web accessibility
and product design.
Past design systems:
Current design system:
Note: opinions expressed are my own.
This talk does not represent the opinions or policies of any organization.
I like space and physics.
My goal is to
massively improve things that matter.
Massively improve:
For things that matter:
But… how?
Vibe check
Be kind to the teams and organizations represented in today’s examples.
Making websites more accessible can be tricky.
The WebAIM ‘Million’ evaluation works as a gauge of the web’s general accessibility over time.
In the 2023 report, 96.3%
of the homepages evaluated
had at least 1 WCAG failure.
Over 4 years, the pace of improvement has averaged 0.375% per year.
I want to accelerate that pace.
For now, through
design systems.
Making ecosystems more accessible can be even trickier.
What’s in a single procduct
A single product could have:
Web | Mobile
Social media | Print
In-person | Over the phone
Email | Text | Live chat
What we’ll cover
That’s a lot to cover.
Web | Mobile
Social media | Print
In-person | Over the phone
Email | Text | Live chat
For this presentation, I’ve narrowed the scope.
But keep the complexity in mind.
Design systems operate within
that complex
ecosystem level.
Scoped platform type
Scoped platform type:
Web accessibility, not mobile.
Scoped org size
Scoped org size:
Medium and large organizations, not small orgs.
Scoped org structure
Scoped org structure:
Organizations with several product or service teams.
Analogy time
Products and services
Where design systems operate
Design systems are the stellar nurseries where products are born.
That’s a lot of analogies.
Not a lot of practical stuff.
This next bit is
practical stuff.
Design system practical stuff
Design system practical stuff:
What
design systems
are.
1. Styles
1. Styles
2. Components
1. Styles
2. Components
3. Patterns
1. Styles
2. Components
3. Patterns
4. Influence
0. Foundations
1. Styles
2. Components
3. Patterns
4. Influence
0. Foundations Matter
1. Styles Quarks
2. Components Atoms
3. Patterns Molecules
4. Influence Chemistry?
Design systems are a good tool.
Design systems are only a tool.
Design systems are only a tool?
What
design systems
can do.
Hot take:
Design systems don’t
make accessible products.
Well-supported
product teams make accessible products.
An accessible design system
is an excellent support
for product teams.
An accessible
design system can
help teams a lot!
What teams save by using a design system
Help teams save:
What teams can focus on because of the design system
Help teams focus on:
What teams learn from a design system
Help teams learn:
Design systems document
and codify
What
design systems
can become.
Design systems are only a tool?
Design systems are a team.
Design systems are a community.
What activities a design system should focus on
Focus on activities that:
My 6 priority levels for accessibility work
6 priority levels: part 1
6 priority levels (part 1):
6 priority levels: part 2
6 priority levels (part 2):
6 priority levels: part 3
6 priority levels (part 3):
The possibilities
Aligning and collabing
Aligning with and collabing on:
A design system team can be more than the tools they create.
How to get
design systems
to that point.
1.
Strategy
Ooh, shiny.
2.
Hiring
3.
Learning
4.
Time
5.
Safety
6.
Advocacy
7.
Leadership
8.
Luck
Thoughts and questions
So hey, that’s all lovely…
�So hey, that’s all lovely on paper.
�What’s it actually like out there in reality?
�Has any design system made it to this level?
Has any design system actually made their org more accessible?
I guess we need a part 5.
Table of contents
Design Systems:
How current
design systems
are performing.
We’re gonna shift from theoretical to practical.
My theory originally
My theory was:
Accessible design systems lead to accessible websites.
A measurable version of the theory
Or, more measurably:
Orgs with decently accessible design systems will have decently accessible websites.
The situation I was in
The situation:
Blog posts and colleagues praised specific design systems as accessible…
The main problem statement
The problem:
I was pretty sure those same companies had fairly inaccessible websites.
The idea behind this presentation
The idea:
Time for research.
The research
The research.
Caveat:
This research
has many
limitations.
Step 1: gather
Compile a sample set of 24 design systems.
Types and sizes of orgs
I wanted to gather info from a range of organization:
Medium orgs
Medium orgs
(100 to 5000 employees)
Mailchimp | Skyscanner | Mozilla | GitLab
Washington Post | Eventbrite | Pinterest
Large orgs
Large orgs
(5000 to 50,000 employees)
GitHub | Shopify
Atlassian | Adobe | REI
Very large orgs
Very large orgs
(50,000 to 5,000,000 employees)
Google | Apple | Microsoft | IBM
Salesforce | Dell | Sainsbury’s | Audi
Public sector orgs
Public sector orgs
(Governments and agencies)
UK Gov | US Gov | Scottish Gov
Canada Post | Ontario Gov
Step 2: check
Check for signs of accessibility work.
Searching for documentation
Search for design system documentation which explains the team’s approach to web accessibility.
It’s qualitative
This is qualitative info, for sure.
It sets context for commitments a design system team has made.
Step 3: inspect
Test the web accessibility of a flagship website.
Check homepages for issues
Check for accessibility issues on the organization’s homepage.
Use WAVE, axe Devtools, and manual testing methods.
Include manual testing
Note: It’s important to include some manual testing.
Step 4: scan
Get a feel for overall consistency in accessibility.
Crawl a sample of pages
Crawl a sample of the organization’s web pages, to see if the homepage is representative.
Use Purple A11y (axe-core).
Note on automated testing
Note: These automated testing results work as an indicator only.
Automated tools are limited in what they can reliably detect.
Step 5: crunch
Analyze the results, then record insights.
The Google Sheet
Let’s find some insights.
Reminder:
Any examples are
not meant as critique
or blame. Be kind.
Here’s the data.
Insight 1
Insight 1:
Many design system websites include a section on accessibility!
Caveat: many of those accessibility pages are generic accessibility info.
Insight 2
Insight 2:
Design system websites
fare better than their
org’s main website.
Example:
atlassian.com
Versus:
atlassian.design
Exception: one design system did surface more unique accessibility issues than its parent website.
Insight 3
Insight 3:
Government websites might just be the most accessible.
Example A:
usa.gov
Example B:
gov.uk
Insight 4
Insight 4:
So. Much. ARIA.
Example:
dell.com
Insight 5
Insight 5:
Having a famously accessible web design system doesn’t result in fewer website issues.
Example:
ibm.com
Insight 6
Insight 6:
Accessibility reporting tools and checkers don’t agree.
Insight 7
Insight 7:
A decently accessible homepage doesn’t indicate a decently accessible website.
Example:
google.com
Insight 8
Insight 8:
Being influential in design doesn’t translate to making accessible designs.
Example:
apple.com
Insight conclusions
My theory
My theory was:
Accessible design systems lead to accessible websites.
What I found
What I found:
Having an accessible design system does help.
What I found (part 2)
What I found:
Having an accessible design system does help.
But success requires far more.
Accessible design systems don’t automatically make accessible organizations.
But accessible organizations are the ones who make accessible design systems.
So then, what is a design system good for?
Sustained web accessibility
Design systems can help take good accessibility work and keep it going long-term.
Design systems can help take good accessibility work and prevent back-sliding.
Design systems can help take good accessibility work and carry it into the future.
Design systems can help take good accessibility work and prevent single points of knowledge or expertise.
Time for my personal thoughts
Don’t mis-diagnose accessibility as a
tooling problem.
Find out the barriers teams face when making accessible products.
Accessibility work involves changes across a bunch of disciplines and processes.
Build a well-staffed and supported design system team.
Build a well-staffed and supported accessibility team.
Let’s help
teams.
Let’s
help people.
Let’s
Design and develop sustainably.
Questions
and thank you!
WCAG 2.2
helps people.