You'll learn: The benefits of accessibility in a design system How to create and incorporate accessibility standards How to improve accessibility across your product suite

1. Accessibility in
Design Systems

2. Allison Shaw
Senior product designer

3. Design systems as foundation
How to be accessible on the web
Top three tips
Common vocabulary
Hi, hello.

5. Yelp Styleguide

6. Styleguide

7. Design System
• Internal collaboration tool used by both designers
and engineers
• Includes a system’s rules and principles, the visual
design of elements, and the code that renders UI
• End-users are the people actually using your product

8. y11A tilibissecc

9. A11y

10. © Time Magazine

13. Inclusivity
Your product is inclusive when it is the most usable by
the widest range of people, including—but not limited
to—people with disabilities.

17. Disability

20. Design systems as
foundation
Or, how your design system is your product’s government.

24. H1.This is a title.
H2. This is a subtitle.
H3.This is a header.
P. This is body copy. Use it for pretty much
everything. It’s a workhorse.

32. Reasonable accommodation
• Basically, let people with accessibility
needs live their lives like everyone else.
• Applies to public places and spaces,
and some private spaces (like offices).
• To accommodate accessibility needs,
spaces need to either change or
provide assistance.
• Standing desks are an accommodation.

37. !

38. "

39. People
1. People with accessibility needs exist.
2. We are all temporarily abled.
3. Everyone benefits from inclusive design.

40. Business
1. Being inclusive is simply the right thing
to do.
2. People with accessibility needs are
already using your products.
3. There are legal protections for people
with accessibility needs, and your
company could be held liable if you
do not meet those needs.

41. Your design system is the right place to
start your inclusivity efforts because it
is the foundation of your product.

42. How to be accessible

43. World Wide Web Consortium

44. World Wide Web Consortium

45. World Wide Web Consortium

46. Web Content Accessibility
Guidelines 2.0

47. Following the spec is great, but
remember, you’re making things
for people, not machines.

48. Accessibility categories
1. Visual
2. Auditory
3. Motor function
4. Cognitive function

49. POUR
1. Perceivable
2. Operable
3. Understandable
4. Robust

50. POUR
1. Perceivable
2. Operable
3. Understandable
4. Robust

51. AAA

52. AAA

53. A AA

54. “It’s either accessible or it’s not.”
Jennison Asuncion, LinkedIn

55. How to a11y?

56. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

57. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

58. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

59. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

60. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

61. “Zendesk Garden will correct 100% of
its color contrast issues to pass WCAG
Level AA by the end of Q2 in 2018.”

62. “By the end of Q1, our design systems
team will research and define an
inclusivity plan, to include what level
we aim for and a prioritized list of
improvements or changes.”

63. Easy Hard
Low Impact
High Impact

64. Top three tips

65. Top three tips
1. Be predictable and clear.

68. 1. Be predictable and clear.
Top three tips
• Follow the conventions of your
medium whenever possible.
• No minimalism for minimalism’s sake.
• Use the principles of gestalt,
affordance, and Fitts Law to your
user’s benefit.

69. Top three tips
1. Be predictable and clear.
2. Be semantic.

74. Leia
First Name
Organa
Last Name
Register
<form>
<label for="FirstName">First name</label>
<input type="text" id="FirstName">
<label for="LastName">Last name</label>
<input type="text" id="LastName">
<button type="submit">Register</button>
</form>

78. ARIA
Accessible Rich Internet Applications

79. <button aria-label="close" class=“c-dialog__close" type="button">…</button>

80. <div role="header">
The first rule of ARIA is don't use
ARIA.
</div>
<div role="paragraph">
If you can use a native HTML element
or attribute with the semantics and
behavior you require already built in,
instead of re-purposing an element and
adding an ARIA role, state or property
to make it accessible, then do so.
</div>
The first rule of ARIA
is don’t use ARIA.
If you can use a native HTML element or
attribute with the semantics and behavior you
require already built in, instead of re-purposing
an element and adding an ARIA role, state or
property to make it accessible, then do so.

81. <h1>
The first rule of ARIA is don't use
ARIA.
</h1>
<p>
If you can use a native HTML element
or attribute with the semantics and
behavior you require already built in,
instead of re-purposing an element and
adding an ARIA role, state or property
to make it accessible, then do so.
</p>
The first rule of ARIA
is don’t use ARIA.
If you can use a native HTML element or
attribute with the semantics and behavior you
require already built in, instead of re-purposing
an element and adding an ARIA role, state or
property to make it accessible, then do so.

87. Top three tips
1. Be predictable and clear.
2. Be semantic.
• Write standards compliant, semantic
HTML and CSS.
• Fill-in with ARIA where appropriate.
• Design keyboard navigation.

88. Top three tips
1. Be predictable and clear.
2. Be semantic.
3. Be color conscious.

89. Don’t use color alone.Ensure good contrast.

90. Don’t use color alone.

91. Don’t use color alone.Ensure good contrast.

92. Don’t use color alone.

93. Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more

94. Weapon too small for target
TIE Fighter
Light fighters to planet destroyers
Choose weapon
Target acquired
Alderaan
Rebels to star systems
Choose target
Weapon too small for target
TIE Fighter
Light fighters to planet destroyers
Choose weapon
Target acquired
Alderaan
Rebels to star systems
Choose target

97. Weapon too small for target
TIE Fighter
Light fighters to planet destroyers
Choose weapon
Target acquired
Alderaan
Rebels to star systems
Choose target
Weapon too small for target
TIE Fighter
Light fighters to planet destroyers
Choose weapon
Target acquired
Alderaan
Rebels to star systems
Choose target

98. Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more
Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more ›

99. Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more ›
Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more ›

100. Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more ›
Han shot first
While Greedo was bragging about how he
was going to get rich by turning Han over to
Jabba the Hutt, Han was busy unclasping his
blaster and getting ready to shoot.
Learn more

101. Top three tips
1. Be predictable and clear.
2. Be semantic.
3. Be color conscious.
• Don’t use color alone.
• Ensure good color contrast for text
and active UI.

102. “Text must have a minimum contrast
ratio of 4.5:1 against its background.”*
11.58:1

103. Large text
Bold text, 14pts+
3:1

104. ex. Allison ShawName
ex. ashaw@zendesk.comEmail
Submit

105. 

106. Hi.
I’mAllison.
I'm currently a senior product designer at Zendesk, heading
up our design system. I’m an SVAxIXD alum, and I previously
worked at Thumbtack, Twitter, and Yelp.

107. Hi.
I’mAllison.
I'm currently a senior product designer at Zendesk, heading
up our design system. I’m an SVAxIXD alum, and I previously
worked at Thumbtack, Twitter, and Yelp.

110. Top three tips
1. Be predictable and clear.
2. Be semantic.
3. Be color conscious.

113. Go forth and be an a11y.

114. Thanks.
@allisonacs • allison-shaw.com

115. References
Articles
Links on Medium
Random A11y
Visual color contrast checker
A11y Wins
This is hard - Charles Hall
Myths about accessibility
WCAG 2.0
WAI-ARIA
Disability statistics
Screenreader survey
ARIA is spackle not rebar
Microsoft Inclusive Design
Design systems
Zendesk Garden
Yelp Styleguide
material.io & Color Tool
Atlassian.design
Shopify Polaris
Buzzfeed Solid
Ant.design
Awesome Design Systems -
Alex Pate
Books
Color Accessibility Workflows
Accessibility for Everyone
Designing User Interfaces for
an Aging Population
A Web for Everyone
Web Accessibility
Just Ask
Pro HTML5 Accessibility
Inclusive Design Patterns

116. Copyright & Creative Commons
Stevie Wonder - Time
Magazine
Guide dog - Flickr
US Capitol Building - Wikipedia
Interstate - Wikipedia
Little girl at water fountain -
Pexels
New York City - Flickr
Ishihara color blindness test -
Wikipedia
New York City crowd -
Wikipedia
President Bush signs the ADA -
Wikipedia
Target logo - Wikipedia
Target homepage, 2006 -
Internet Archive
“Accessible” ramp - Pinterest
All-seeing eye - Wikipedia
CSS3/HTML5 logo - Wikipedia
React logo - Wikipedia