Creating accessible design systems Sarah Pulis Director Accessibility

Creating accessible design systems Sarah Pulis Director Accessibility Services Tweet me at @sarahtp creating an inclusive digital world intopia. digital

What is a design system? Image credit: Audrey Hacq https: //bit. ly/2 GP 0 k. Lf

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

� Tip 1 Take the time to develop a common understanding of what “accessible” means and communicate it broadly

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

What version? When was it tested?

� Tip 3 Don’t forget about how components interact, and create helper functions to help implementation

� Tip 4 Provide clear content guidance for your UI components

� Tip 5 Send you design system down the deepest darkest alley – and test the hell out of it

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?

� Tip 6 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?

� Tip 7 Treat your design system as a living organism – have clear feedback paths and processes that preserve predictability and consistency

Other tips • Design hover and focus states • Be predictable – stay true to platforms or established patterns were possible • Use relative font sizes (please, please) • Use sensible defaults • Don’t use Lorem Ipsum

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

Let’s continue the conversation Sarah Pulis @sarahtp sarah@intopia. digital Ref: Accessibility Champion from Culture Change Cards www. digitalpulse. pwc. com. au/resources