Creating accessible design systems - OZeWAI 2018
1 like700 views
The document offers tips for creating accessible and inclusive design systems, emphasizing the importance of a shared understanding of accessibility, detailed documentation, and thorough testing across various platforms and assistive technologies. It also advocates for treating the design system as a living entity that requires ongoing feedback and updates. Additional resources and design system inspirations are provided for further reference.
Creating accessible design systems - OZeWAI 2018
- 1. Creating accessible design systems Sarah Pulis Director Accessibility Services Tweet me at @sarahtp creating an inclusive digital world intopia.digital
- 2. What is a design system? Image credit: Audrey Hacq https://bit.ly/2GP0kLf
- 3. What are your tips for creating a more accessible and inclusive design system. I asked my Intopia colleagues
- 4. Tip 1 Take the time to develop a common understanding of what “accessible” means and communicate it broadly
- 6. Tip 2 Wear your undies on the outside - give people detailed documentation and justification for decisions
- 9. What version? When was it tested?
- 10. Tip 3 Don’t forget about how components interact, and create helper functions to help implementation
- 12. Tip 4 Provide clear content guidance for your UI components
- 14. Tip 5 Send you design system down the deepest darkest alley – and test the hell out of it
- 15. What assistive technologies/web browser combinations will you test with? What operating system versions? When were they tested? What user research and usability testing will you do? Considerations
- 17. Tip 6 Don’t assume other design systems have got everything right (even if they look like they’ve got their act together)
- 18. What if your have keyboard-focusable UI components in the content area?
- 19. Tip 7 Treat your design system as a living organism – have clear feedback paths and processes that preserve predictability and consistency
- 21. • Design hover and focus states • Be predictable – stay true to platforms or established patterns were possible • Use relative font sizes (please, please, please) • Use sensible defaults • Don’t use Lorem Ipsum Other tips
- 22. • GOV.UK Design System • GOV.AU Design System • Salesforce Lightning Design System • Google Material Design • U.S. Web Design System • Shopify Polaris Design System Design System inspiration
- 23. Let’s continue the conversation Sarah Pulis @sarahtp sarah@intopia.digital Ref: Accessibility Champion from Culture Change Cards www.digitalpulse.pwc.com.au/resources