Recommended
More Related Content
Similar to Accessibility in the Zendesk Garden Design System
Similar to Accessibility in the Zendesk Garden Design System (20)
Recently uploaded
Recently uploaded (20)
Accessibility in the Zendesk Garden Design System
- 1. www.sli.do → Event code dscsf Accessibility in the Garden Design System
- 2. Austin Green Senior Software Engineer Allison Shaw Lead Product Designer
- 8. Composable
- 9. We build the bits and bobs of UI. Then we help you choose when to use a bit and how to use a bob.
- 10. y11A tilibissecc
- 11. A11y
- 12. © Time Magazine
- 15. Disability
- 18. We are all just temporarily abled.
- 19. Inclusivity
- 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.
- 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.
- 28. A11y basics
- 29. World Wide Web Consortium
- 30. W3C → WAI → WCAG
- 32. Accessibility categories 1. Visual 2. Auditory 3. Motor function 4. Cognitive function
- 33. POUR 1. Perceivable 2. Operable 3. Understandable 4. Robust
- 34. AAA
- 35. “It’s either accessible or it’s not.” Jennison Asuncion, LinkedIn
- 36. Following the spec is great, but remember, you’re making things for people, not machines.
- 37. How to a11y?
- 41. “Text must have a minimum contrast ratio of 4.5:1 against its background.”* 11.58:1
- 42. Large text Bold text, 14pts+ 3:1
- 43. ex. Allison ShawName ex. ashaw@zendesk.comEmail Submit
- 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.
- 65. Of these options, which feel most… 1. On-brand 2. Actionable 3. Clear
- 70. SAD colors 🙁
- 85. Austin Green Senior Software Engineer
- 86. SVG Icons
- 90. 1. Styled 2. Keyboard navigable 3. Accessible 4. Localizable Garden engineering goals
- 92. <TextInput onChange={ () => {} } hint='Hinty hint' label='Labely label' placeholder='Write something' value='' />
- 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
- 98. Element High abstraction View Styled, visible UI Container Interaction
- 100. If you can reach it with a keyboard it’s fine.
- 101. Not all content has to be within the tab order.
- 102. All state must be readable.
- 103. No ARIA is better than bad ARIA.
- 104. Consistency is 👑
- 110. Demo time Old Garden New Garden (Accessible Container Pattern)
- 111. Auditing Tools
- 112. Google Chrome Lighthouse Audit
- 114. AXE Chrome Extension
- 117. 🙃
- 118. 🙂
- 119. Go forth and be an a11y.
- 120. TM and © 2016 Zendesk Inc. All rights reserved.