1. Creating accessible design systems
Sarah Pulis Director Accessibility Services
Tweet me
When UX doesn't consider ALL users, shouldn't it be known as "SOME User Experience" or... SUX?
349 retweets, 342 like
creating an inclusive digital world
intopia.digital

2. What is a design system? Image credit: Audrey Hacq
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
Purpose and shared values
Design principles
Brand identify and language
Components and patterns
Benefits of design patterns:
Design systems save time and money
Design systems provide a consistent user experience
Design systems can be easily updated
Image credit:
Audrey Hacq

3. I asked my Intopia colleagues
What are your tips for creating a more accessible and inclusive design system.

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. Considerations
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?

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. Other tips 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

22. Design System inspiration
GOV.UK Design System
GOV.AU Design System
Salesforce Lightning Design System
Google Material Design
U.S. Web Design System
Shopify Polaris Design System

23. Ref: Accessibility Champion from Culture Change Cards
Let’s continue the conversation
Sarah Pulis
@sarahtp
Ref: Accessibility Champion from Culture Change Cards