1. Design systems that
supports inclusive experiences
Andrew Arch Twitter: amja
Sarah Pulis Twitter: sarahtp
creating an inclusive digital world
intopia.digital @intopia

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. What is a
design system?
Image credit:
Audrey Hacq
bit.ly/2GP0kLf

4. Tip 1
Develop a common understanding of what
“accessible” means and communicate it broadly

5. cultural background
language
literacy
economic status
Inclusion is about
disability
gender
age
situation

8. Tip 2
Wear your undies on the outside - give people
detailed documentation and justification for
decisions

11. Tip 3
Consider including reusable acceptance criteria
and test cases to making testing the end
product easier

14. 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

15. Tip 4
Provide clear content guidance for your UI
components

17. Tip 5
Send your design system down the deepest
darkest alley – and test the hell out of it

18. 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

19. What version?
When was it
tested?

20. 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

21. Tip 6
Just because your individual components or
patterns are accessible, doesn’t mean you
magically create an accessible interface

24. 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

26. Tip 8
Don’t assume other design systems have got
everything right (even if they look like they’ve
got their act together)

27. What if your have keyboard
focusable UI components in
the content area?

28. 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

29. • GOV.UK Design System
• GOV.AU Design System
• Salesforce Lightning Design System
• U.S. Web Design System
• Shopify Polaris Design System
Design System references

30. • 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

31. Let’s continue the conversation
Andrew Arch
@amja andrew@intopia.digital
Sarah Pulis
@sarahtp sarah@intopia.digital
creating an inclusive digital world
intopia.digital @intopiadigital