Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems that supports inclusive experiences


Published on

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

Published in: Technology
  • You might get some help from ⇒ ⇐ Success and best regards!
    Are you sure you want to  Yes  No
    Your message goes here
  • Check the source ⇒ ⇐ This site is really helped me out gave me relief from headaches. Good luck!
    Are you sure you want to  Yes  No
    Your message goes here
  • Get the best essay, research papers or dissertations. from ⇒ ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
    Are you sure you want to  Yes  No
    Your message goes here

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
  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
  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 Sarah Pulis @sarahtp creating an inclusive digital world @intopiadigital