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.

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