Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Design Systems that supports inclusive experiences

8 tips for creating an inclusive design system. Presented at the CSUN Assisive Technology Conference 2019.

  • Soyez le premier à commenter

Design Systems that supports inclusive experiences

  1. 1. Design systems that supports inclusive experiences Andrew Arch Twitter: amja Sarah Pulis Twitter: sarahtp creating an inclusive digital world intopia.digital @intopia
  2. 2. We’re creating an inclusive digital world (from down under!) We help organisations be more inclusive and accessible. Together, we create enjoyable, efficient digital experiences for everyone. Let’s go on an accessibility adventure together.
  3. 3. What is a design system? Image credit: Audrey Hacq bit.ly/2GP0kLf
  4. 4. Tip 1 Develop a common understanding of what “accessible” means and communicate it broadly
  5. 5. cultural background language literacy economic status Inclusion is about disability gender age situation
  6. 6. Tip 2 Wear your undies on the outside - give people detailed documentation and justification for decisions
  7. 7. Tip 3 Consider including reusable acceptance criteria and test cases to making testing the end product easier
  8. 8. As a screen reader user when I move focus to the accordion header I should hear: • the role of button • the button label • the appropriate state (expanded or collapsed) so that I understand the what information the accordion will display and how to interact with it Generic screen reader requirement
  9. 9. Tip 4 Provide clear content guidance for your UI components
  10. 10. Tip 5 Send your design system down the deepest darkest alley – and test the hell out of it
  11. 11. Test your design system with as many combinations of assistive technologies, adaptive strategies and web browsers as possible. Make your results available as part of your design system documentation for each component or pattern. Support technologies
  12. 12. What version? When was it tested?
  13. 13. Don’t forget about usability testing. Undertake usability testing on other people’s components to understand where the pain points, or delight points, are. Consider co-designing components with people with disability. Usability testing
  14. 14. Tip 6 Just because your individual components or patterns are accessible, doesn’t mean you magically create an accessible interface
  15. 15. Tip 7 Treat your design system as a living organism – have clear feedback paths and processes that preserve predictability and consistency and support progressive improvement
  16. 16. Tip 8 Don’t assume other design systems have got everything right (even if they look like they’ve got their act together)
  17. 17. What if your have keyboard focusable UI components in the content area?
  18. 18. Our 8 tips 1. Define “inclusion” 2. Detailed documentation 3. Reusable acceptance criteria 4. Content guidance 5. Thorough testing 6. Accessible design systems doesn’t equal accessible experiences 7. Enable feedback 8. Everyone makes mistakes
  19. 19. • GOV.UK Design System • GOV.AU Design System • Salesforce Lightning Design System • U.S. Web Design System • Shopify Polaris Design System Design System references
  20. 20. • Building a Visual Language: Behind the scenes of our new design system • TurboTax Live’s Approach to a Gender-Neutral Design System • “Accessible” Design Systems Don’t Guarantee Accessible Products Article references
  21. 21. Let’s continue the conversation Andrew Arch @amja andrew@intopia.digital Sarah Pulis @sarahtp sarah@intopia.digital creating an inclusive digital world intopia.digital @intopiadigital