Auditing Design Systems for Accessibility - Anna E. Cook

1. Auditing Design
Systems for
Accessibility

2. Hi, I’m Anna!
Pronouns are She/They
• Senior Designer at Microsoft working
on accessibility and inclusive design
for Azure and beyond
• Earned an MS in Creative
Technology + Design, University of
Colorado Boulder College of
Engineering and Applied Science
3

3. Have you faced challenges
when advocating for accessibility
in your design systems?
🙋
4

4. What we will discuss
Today’s Goal: to give you tools to advocate for
better design system accessibility
1. Basics - Design systems and accessibility
2. Understanding – Accessibility audits
3. Process - Auditing design systems
5

5. 01
Design Systems
+ Accessibility
6

6. Design systems are
essential because they
create more accessible
products at scale.
7

7. Atoms Molecules Organisms Templates & Pages
8

8. What happens when our
design system fails to
consider accessibility?
9

9. WCAG 2.5.3 Label in Name - Level A
No icon button label provided
(visually or programmatically)
10

10. WCAG 3.3.2 Labels or Instructions - Level A
No form instructions have
been provided. None of the
form fields have required
indicators.
11

11. WCAG 1.4.11 Non-text Contrast - Level AA
The form fields have low contrast
borders, users may struggle to
select the field (current contrast
ratio is 1.48 to 1).
12

12. WCAG 1.4.3 Contrast
(Minimum) Level AA
The color contrast on the
button is too low, people will
struggle to read it (current
contrast ratio is 2.38 to 1).
13

13. This issue affects other components
14

14. Accessibility issues
in a design system
proliferate
15

15. Accessibility fixes
in a design system
also proliferate
16

16. Accessible design
systems empower
teams to build more
inclusive products
17

17. 02
Accessibility
audits
18

18. Accessibility audits are one way to find
and log accessibility issues in so we
can document them and fix them
🕵
19

19. Use WCAG to as
assessment criteria for
design system audit
20

20. The WCAG Quick Reference
guide will help you know what
to look for and why
21

21. Review for A and AA
accessibility levels
A-levels are the method WCAG
applies to levels of compliance, with
A and AA being required.
22

22. Two audit evaluation methods
🤖
Automated
testing
⌨
Manual
testing
23

23. 03
Auditing design
systems
24

24. Plan the audit
• Accessibility Level: A, AA, AAA?
• Goals: Objectives of audit?
• Timeline: How long will you need?
• Team: Who should be involved?
• Process: Automated testing,
manual testing, or both?
• Scope: What components and
patterns will be reviewed?
25

25. What can be reviewed in your audit
Designs Code Docs
26

26. Reviewing designs
Use WCAG Quick Reference
and Plugins to manually
review design files.
27

27. Reviewing code
Code review should be done
using both automated and
manual evaluation methods.
28

28. Reviewing system
documentation
Even a perfectly accessible
design system can be broken
if used incorrectly.
29

29. Creating audit documentation
30

30. Capturing issues
• Component with issue
• Description of issue
• Testing Method (auto, manual)
• WCAG Criteria related to issue
• Conformance Level (A, AA, AAA)
• Date issue was captured
• Links (where issue was found)
• Recommendations to fix issue
• Impact of issue (low, med, high)
• Common themes (ex: contrast)
31

31. Group issues into common themes
32

32. Prioritize issues by impact
• Impact on users – how significant of a
barrier is created with this issue?
• Impact on organization – does the
component get used in essential
interactions (example: login)?
• Impact by usage – how often is this
component used across products?
33

33. Share the results
After the audit is complete, share
results with key team members and
leadership.
8%
Minor
34%
Critical
58%
High
34

34. Accessibility auditing
cannot replace
feedback from users
with disabilities.
35

35. Prioritize inclusive research and design
Gather direct feedback from disabled
users about your product.
• Work with organizations such as
Fable to bring in disabled testers
• Leverage ERGs while ensuring they
are properly compensated and
recognized for their work
36

36. Want to learn more?
👩🏫
Join my workshop
later today
💻
Watch the course
LinkedIn Learning
37

37. Thank you!
Let’s Connect.
Follow me at @AnnaECook on
LinkedIn, Mastodon, or Bluesky
38

38. Sources
• All slides reference works written by Anna E. Cook in prior publications
including…
• LinkedIn Learning linkedin.com/learning/auditing-design-systems-for-
accessibility
• Deque deque.com/blog/auditing-design-systems-for-accessibility
• Slide 8: Atomic Design by Brad Frost atomicdesign.bradfrost.com
• Slide 21: WCAG Quick Reference Guide w3.org/WAI/WCAG22/quickref/
• Slide 28: Deque axe deque.com/axe
• Slide 29: Carbon Design System carbondesignsystem.com
39