After working with different organisations to create accessible designs systems, our Accessible Services Director, Sarah Pulis, shares some practical tips, tricks and pitfalls to help you create an accessible design system.

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