This document discusses building accessible and inclusive design systems. It provides examples of implementing accessibility best practices like WCAG and ARIA guidelines. It also emphasizes the importance of maintaining design systems, documenting components, and creating a culture of contribution to support accessibility.

1. Building
Systemsfor
Accessibility

2. Toronto
PupOwner
Shopify

3. Toronto
PupOwner
Shopify
@walnuttheassie

4. Toronto
PupOwner
Shopify
@tiffany_tse

6. ShopifyGitHub
Repositories
3000+
https://github.com/orgs/Shopify@tiffany_tse

7. DesignSystem
What is a design system?
@tiffany_tse

8. Thegenerally-accepteddefinitionof
adesignsystemisthatit’stheouter
circle—itencompassespattern
libraries,styleguides,andanyother
artefacts.Butthere’ssomething
more…
adactio.com/journal/13844
Jeremy Keith on Design Systems
@tiffany_tse

9. Justbecauseyouhaveacollectionof
designpatternsdoesn’tmeanyou
haveadesignsystem.Asystemisa
framework.It’sarulebook.It’swhat
tellsyouhowthosepatternswork
together.
adactio.com/journal/13844
Jeremy Keith on Design Systems
@tiffany_tse

10. Content / Writing Patterns / Components Code
Voice and Tone Design
Brand Identity
@tiffany_tse

11. Shopify’s
Systems
@tiffany_tse

12. @tiffany_tse
Onesize
doesn’tfitall
Shopify’s
Systems

13. @tiffany_tse
CodeStyle
Guides
Shopify
Marketing
Design
System
Polaris

16. Consumedbothinternallyandexternally
Marketing Assets
Projects
62 Polaris React
Weekly Downloads
60k+Polaris
Projects
32
@tiffany_tse

17. Accessibility
@tiffany_tse

18. Accessibility
Responsive
ROI
@tiffany_tse

19. Oneinfour
noninstitutionalizedU.S.
adults(25.7%,estimated
61.4millionpersons)reported
adisability
https://www.cdc.gov/mmwr/volumes/67/wr/mm6732a3.htm
Prevalence of Disabilities and Health Care Access, 2016
@tiffany_tse

20. This includes
@tiffany_tse

21. Prevalenceof
disabilityincreases
aspeoplegetolder
@tiffany_tse

22. UK:Internetuse,55+yearsold
0%
2011 2017
100%
50%
AGES
75+
AGES
65 - 74
AGES
55 - 54
@tiffany_tse ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2017

23. Internetuseamongthose
aged65to74roseto81%
in2016.
statcan.gc.ca/daily-quotidien/171114/dq171114a-eng.htm
Canadians at Work and Home
@tiffany_tse

25. WCAG
Do you say “wuh-cag” or “wic-ag”?
@tiffany_tse

26. WCAGisdevelopedthroughtheW3C
processwithagoalofprovidingasingle
sharedstandardforwebcontent
accessibility.
w3.org/WAI/intro/wcag
WORLD WIDE WEB CONSORTIUM
@tiffany_tse

28. Foranyauto-updatinginformation
that(1)startsautomaticallyand(2)is
presentedinparallelwithother
content,thereisamechanismforthe
usertopause,stoporhideit
w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html
WCAG Pause, Stop, Hide 2.2.2
@tiffany_tse

30. WAI-ARIA
“why-ar-i-ah” or “wa-ar-ea”?
@tiffany_tse

31. @tiffany_tse
LikeCSS
forassistive
technologies
WAI-ARIA

32. ARIA 1
2
3
4
5
6
7
8
9
10
<div role="status" aria-live="polite" >
<img src="success.svg" alt="">
Success!
</div>
@tiffany_tse

33. 1
2
3
4
5
6
7
8
9
10
<div role="status" aria-live="polite" >
<img src="success.svg" alt="">
Success!
</div>
ARIA
@tiffany_tse

35. aria-pressed
Toggling pressed states
@tiffany_tse

36. aria-pressed
migrate transform -C config.yml -O customer customer.csv<div>
<button type="button" aria-pressed="false">
<svg>
</button>
<video>
</div>
1
2
3
4
5
6
7
8
@tiffany_tse

37. aria-pressed
migrate transform -C config.yml -O customer customer.csv<div>
<button type="button" aria-pressed="true">
<svg>
</button>
<video>
</div>
1
2
3
4
5
6
7
8
@tiffany_tse

38. ActualImplementation
migrate transform -C config.yml -O customer customer.csvimport { BackgroundVideo } from 'marketing-assets';
const el = document.querySelector('.js-background-
video');
const backgroundVideo = new BackgroundVideo(el);
1
2
3
4
5
6
7
8
@tiffany_tse

39. ActualImplementation
migrate transform -C config.yml -O customer customer.csv<%= ui_background_video 'styleguide/about-video',
fallback_image: 'styleguide/video-placeholder.jpg',
class: ‘background-video',
autoplay: true,
skin: 'dark',
position: 'bottom-left'
%>
1
2
3
4
5
6
7
8
@tiffany_tse

40. Maintaining
Systems
@tiffany_tse

41. Design &
Development
Design
System
Website /
Application
@tiffany_tse

42. Systemfirst
Applicationssecond
@tiffany_tse

43. Design &
Development
Design
System
Website /
Application
Design &
Development
Design
System
Website /
Application
@tiffany_tse

44. Byhavingwell-definedprocessesand
guidelinesforcontribution,wemakesure
thattheextensiveworkdonebyourproduct
teamsarefedbacktothesystemwhen
possible.
booking.design/lessons-learned-building-a-design-system-at-scale
Arda Karaçizmeli - booking.com
Lessons Learned Building a Design System at Scale
@tiffany_tse

45. Documentation
@tiffany_tse

48. Focus
management
@tiffany_tse

50. @tiffany_tse

51. Colorisnotusedastheonlyvisual
meansofconveyinginformation,
indicatinganaction,promptinga
response,ordistinguishingavisual
element.
w3.org/TR/WCAG20/#visual-audio-contrast-without-color
1.4.1 Use of Color
@tiffany_tse

53. Building
Empathy
@tiffany_tse

54. Creatinga
Cultureof
Contribution
@tiffany_tse

55. NotSoSecret
Benefits
@tiffany_tse

58. @tiffany_tse
ProgressLoading

59. WindowsHighContrast
migrate transform -C config.yml -O customer customer.csv@media screen and (-ms-high-contrast: active) {
background-color:
ms-high-contrast-color('disabled-text');
}
1
2
3
4
5
6
7
8
@tiffany_tse

60. WindowsHighContrast
@tiffany_tse

63. aria-live
Creating live regions
@tiffany_tse

64. aria-live
migrate transform -C config.yml -O customer customer.csv1
2
3
4
5
6
<button
aria-label="Copy code sample"
aria-live="polite"
>
Copy
</button>
@tiffany_tse

65. @tiffany_tse

66. UnderstandYour
Audience
@tiffany_tse

67. Shared
Vocabulary
@tiffany_tse

68. Empathy
@tiffany_tse

69. BuildingaCulture
ofContribution
@tiffany_tse

70. Accessibilityis
thenew
responsive.
@tiffany_tse

71. Accessibilityis
thenew
responsive.
@tiffany_tse

72. Thanks!
@tiffany_tse