Raising the Bar of Your Design System

While there have been a number of exciting developments in the digital product space to help people with disabilities, there still exist many products with fundamental accessibility issues making frequent daily tasks cumbersome and even broken at times. For example, a user may not be able to read critical content because the text is too light in color and they have low vision or are outside in the bright sunlight.

Many of these fundamental issues can be addressed if accessibility design guidelines are applied at the design system level. This makes the design system even more effective at it’s task of saving time and resources as well as providing a more consistent experience for the end user.

In this talk, Jen Devins, walked us through three strategies to efficiently bake accessibility into design systems.

Focus on system wide building blocks first

Baking accessibility into the foundation of your design system is a critical place to start for a thoughtful, holistic solution. Apply color contrast guidelines to the overall palette to help users with low vision; ensure the state system considers clear focus and selection indicators to help keyboard users; provide clear and concise labels to common icons to help users who are unable to see the screen; ensure touch targets are large enough for users with low mobility or simply with larger fingers.

Embrace standard interaction model patterns

Another important accessibility guideline is to ensure all users can navigate efficiently regardless of how they interact with the product. For example, relying on only keyboards is common for people who find using a mouse challenging due to arthritis as well as power users who feel keyboards are faster . But what if you don’t rely on keyboard all the time? How are you supposed to know the best interaction model?

Luckily, there exist a number of industry-wide resources such as he WAI-ARIA Authoring Practices from W3C that document expected behaviors. Following these standards will better meet users expectations and reduce time spent reinventing any wheels.

Document action items for people implementing the design system components

While a design system with accessibility baked in can greatly help increase product accessibility, there is still work a product team will need to do once the implement the pattern or component in context. Recommending ways to group elements for more efficient navigation as well as indicating visual elements that will need labels are great examples of action items to make teams aware of.

About the Speaker

Jen Kozenski-Devins | Head of Google Accessibility UX

Jen has been a UX Designer for 20 years and over time found herself immersed in the world of inclusive design and accessibility. Her goal is to learn from users and educate product teams on ways to make products more inclusive. During her career at Google, Jen was a design manager on products such as Search, Google Analytics, and G Suite and is now the Head of Google Accessibility UX. Before Google, she worked on the main shopping experience at eBay.