Accessibility and inclusive design are integral to success in product design and development. In this talk, the Zendesk Garden Design Systems team gives an overview of accessibility (what is it? why is it important? how do you achieve it?), does a deep dive into creating an accessible color system for UI, and delves into the ways in which our design system provides both accessibility and flexibility to the designers and developers that use it.
20. 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.
21.
22.
23.
24.
25. 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.
45. 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.
46. 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.
53. Color redesign goals
1. Colors should all feel “on-brand.”
2. Define a primary UI color.
3. Define success/alert/failure colors.
4. Define an accessible range of tints and shades.
93. 1. Small code = big changes
2. Meets all goals
Pros
<TextInput
onChange={ () => {} }
hint='Hinty hint'
label='Labely label'
placeholder='Write something'
value=''
/>
94. 1. Manually handle props
and customizations
2. How do you make small
changes?
3. All changes must be
maintained
Cons
<TextInput
onChange={ () => {} }
hint='Hinty hint'
label='Labely label'
placeholder='Write something'
value=''
/>
95. 1. Manually handle props
and customizations
2. How do you make small
changes?
3. All changes must be
maintained
Cons
