Component driven development helps break projects into manageable pieces and concrete examples help speed up development time, improve on-boarding as well as build more reliably. As the projects we build become more complex, we can choose to build systems that scale and help to abstract complexity to improve the workflow of our teams. By thinking about inclusive design and accessibility from the start, we can ensure that the systems we build go beyond just templating, and create a strong foundation for the future of the web.

1. Building
Systemsfor
Accessibility

2. Toronto
PupOwner
Shopify

3. Toronto
PupOwner
Shopify
@walnuttheaussie

4. Toronto
PupOwner
Shopify

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

7. DesignSystem
What is a design system?

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

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

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

11. Shopify’s
Systems

12. Onesize
doesn’tfitall
Shopify’s
Systems

13. CodeStyle
Guides
Pattern
Libraries
Design
Systems

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

17. Accessibility

18. Accessibility
Responsive
ROI

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

20. This includes

21. Prevalenceof
disabilityincreases
aspeoplegetolder

22. UK:Internetuse,55+yearsold
0%
2011 2017
100%
50%
AGES
75+
AGES
65 - 74
AGES
55 - 54
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

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

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

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

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

31. LikeCSS
forassistive
technologies
WAI-ARIA

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

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

35. aria-pressed
Toggling pressed states

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

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

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

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

40. Maintaining
Systems

41. Design &
Development
Design
System
Website /
Application

42. Systemfirst
Applicationssecond

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

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

45. Documentation

48. Focus
management

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

53. Building
Empathy

54. Creatinga
Cultureof
Contribution

55. NotSoSecret
Benefits

58. ProgressLoading

59. WindowsHighContrast

60. 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

61. WindowsHighContrast

64. aria-live
Creating live regions

65. 3available
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>

67. UnderstandYour
Audience

68. Shared
Vocabulary

69. Empathy

70. BuildingaCulture
ofContribution

71. Accessibilityis
thenew
responsive.

72. Accessibilityis
thenew
responsive.

73. Thanks!