Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Design systems that
supports inclusive experiences
Andrew Arch Twitter: amja
Sarah Pulis Twitter: sarahtp
creating an incl...
We’re creating an
inclusive digital world
(from down under!)
We help organisations be more inclusive
and accessible.
Toget...
What is a
design system?
Image credit:
Audrey Hacq
bit.ly/2GP0kLf
Tip 1
Develop a common understanding of what
“accessible” means and communicate it broadly
cultural background
language
literacy
economic status
Inclusion is about
disability
gender
age
situation
Tip 2
Wear your undies on the outside - give people
detailed documentation and justification for
decisions
Tip 3
Consider including reusable acceptance criteria
and test cases to making testing the end
product easier
As a screen reader user
when I move focus to the accordion header I should hear:
• the role of button
• the button label
•...
Tip 4
Provide clear content guidance for your UI
components
Tip 5
Send your design system down the deepest
darkest alley – and test the hell out of it
Test your design system with as many combinations
of assistive technologies, adaptive strategies and
web browsers as possi...
What version?
When was it
tested?
Don’t forget about usability testing.
Undertake usability testing on other people’s
components to understand where the pai...
Tip 6
Just because your individual components or
patterns are accessible, doesn’t mean you
magically create an accessible ...
Tip 7
Treat your design system as a living organism –
have clear feedback paths and processes that
preserve predictability...
Tip 8
Don’t assume other design systems have got
everything right (even if they look like they’ve
got their act together)
What if your have keyboard
focusable UI components in
the content area?
Our 8 tips
1. Define “inclusion”
2. Detailed documentation
3. Reusable acceptance
criteria
4. Content guidance
5. Thorough...
• GOV.UK Design System
• GOV.AU Design System
• Salesforce Lightning Design System
• U.S. Web Design System
• Shopify Pola...
• Building a Visual Language: Behind the scenes of our
new design system
• TurboTax Live’s Approach to a Gender-Neutral De...
Let’s continue the conversation
Andrew Arch
@amja andrew@intopia.digital
Sarah Pulis
@sarahtp sarah@intopia.digital
creati...
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Design Systems that supports inclusive experiences
Prochain SlideShare
Chargement dans…5
×

sur

Design Systems that supports inclusive experiences Slide 1 Design Systems that supports inclusive experiences Slide 2 Design Systems that supports inclusive experiences Slide 3 Design Systems that supports inclusive experiences Slide 4 Design Systems that supports inclusive experiences Slide 5 Design Systems that supports inclusive experiences Slide 6 Design Systems that supports inclusive experiences Slide 7 Design Systems that supports inclusive experiences Slide 8 Design Systems that supports inclusive experiences Slide 9 Design Systems that supports inclusive experiences Slide 10 Design Systems that supports inclusive experiences Slide 11 Design Systems that supports inclusive experiences Slide 12 Design Systems that supports inclusive experiences Slide 13 Design Systems that supports inclusive experiences Slide 14 Design Systems that supports inclusive experiences Slide 15 Design Systems that supports inclusive experiences Slide 16 Design Systems that supports inclusive experiences Slide 17 Design Systems that supports inclusive experiences Slide 18 Design Systems that supports inclusive experiences Slide 19 Design Systems that supports inclusive experiences Slide 20 Design Systems that supports inclusive experiences Slide 21 Design Systems that supports inclusive experiences Slide 22 Design Systems that supports inclusive experiences Slide 23 Design Systems that supports inclusive experiences Slide 24 Design Systems that supports inclusive experiences Slide 25 Design Systems that supports inclusive experiences Slide 26 Design Systems that supports inclusive experiences Slide 27 Design Systems that supports inclusive experiences Slide 28 Design Systems that supports inclusive experiences Slide 29 Design Systems that supports inclusive experiences Slide 30 Design Systems that supports inclusive experiences Slide 31
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

8 j’aime

Partager

Télécharger pour lire hors ligne

Design Systems that supports inclusive experiences

Télécharger pour lire hors ligne

8 tips for creating an inclusive design system. Presented at the CSUN Assisive Technology Conference 2019.

Design Systems that supports inclusive experiences

  1. 1. Design systems that supports inclusive experiences Andrew Arch Twitter: amja Sarah Pulis Twitter: sarahtp creating an inclusive digital world intopia.digital @intopia
  2. 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. 3. What is a design system? Image credit: Audrey Hacq bit.ly/2GP0kLf
  4. 4. Tip 1 Develop a common understanding of what “accessible” means and communicate it broadly
  5. 5. cultural background language literacy economic status Inclusion is about disability gender age situation
  6. 6. Tip 2 Wear your undies on the outside - give people detailed documentation and justification for decisions
  7. 7. Tip 3 Consider including reusable acceptance criteria and test cases to making testing the end product easier
  8. 8. 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
  9. 9. Tip 4 Provide clear content guidance for your UI components
  10. 10. Tip 5 Send your design system down the deepest darkest alley – and test the hell out of it
  11. 11. 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
  12. 12. What version? When was it tested?
  13. 13. 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
  14. 14. Tip 6 Just because your individual components or patterns are accessible, doesn’t mean you magically create an accessible interface
  15. 15. 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
  16. 16. Tip 8 Don’t assume other design systems have got everything right (even if they look like they’ve got their act together)
  17. 17. What if your have keyboard focusable UI components in the content area?
  18. 18. 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
  19. 19. • GOV.UK Design System • GOV.AU Design System • Salesforce Lightning Design System • U.S. Web Design System • Shopify Polaris Design System Design System references
  20. 20. • 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
  21. 21. 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
  • KellyGorman12

    Nov. 23, 2021
  • ValeriaQuerini1

    Feb. 10, 2020
  • AnneBarrat

    Apr. 12, 2019
  • PhyllisBoulton2

    Apr. 5, 2019
  • VinodTiwari22

    Mar. 21, 2019
  • NicoleTollefson

    Mar. 21, 2019
  • webaxe

    Mar. 19, 2019
  • MarisolVillenaSalern

    Mar. 14, 2019

8 tips for creating an inclusive design system. Presented at the CSUN Assisive Technology Conference 2019.

Vues

Nombre de vues

1 270

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

29

Actions

Téléchargements

37

Partages

0

Commentaires

0

Mentions J'aime

8

×