Raising the Bar of Your Design System

Systems Thinking

Raising the Bar of Your Design System

Jen Kozenski-Devins
Head of Accessibility UX, Google

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.

Highly recommend these 3 strategies to efficiently bake accessibility into design systems.

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

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

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

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

Highly recommend these 3 strategies to efficiently bake accessibility into design systems.

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

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

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

GRATITUDE

People who support Leadership Circle

Deepest thanks to the following people who graciously offered feedback
and support while beta testing Leadership Circle.

Leslie Yang

Director, Product Design
OpenTable

Jeff Smith

Senior Design Manager
Coinbase

Julie Zhuo

Co-Founder
Sundial

Aniruddha Kadam

Product Design Manager
LinkedIn

Jen Kozenski-Devins

Head of Google
Accessibility UX

Jian Wei

Design Manager
‍Zendesk

Courtney Kaplan

Leadership Coach

Cammy Lin

Product Design Manager
Everlaw

Sun Dai

Senior Product Designer
Facebook

Liana Dumitru

Design Manager
Plaid

Mike Dick

Co-Founder
Gather