Seven best practices for inclusive product design
Long Cheng | Pinterest Lead Designer, Core Experience
At Pinterest, our mission is to help you discover and do what you love. We’re building a product for everyone, because the best Pinterest is inclusive and easily usable for people with all levels of abilities. That’s why today we’re sharing our learnings and best practices we developed over the last year as we redesigned Pinterest to be more accessible for people who are blind and visually impaired.
1. Increase color contrasts
The Pinterest product design team challenges the common assumption that colors that are accessible are not as beautiful. We created a color palette for our product that’s accessible with a 3.00:1 contrast ratio and up.
So regardless of whether your accessibility features are turned on, texts are easy to read when set against a colored background.
2. Use strong typographic hierarchy
We think good typography is the key to good design. We ensure that typographic hierarchy makes sense without the use of too many different of shades of grays. We rely on strong type sizing and bolding to create a meaningful hierarchy so that information makes sense at a glance. We also enabled support for dynamic font sizes across our apps. This way you can use the default accessibility feature to change the size of the text to what suits you best.
3. Have clear focus indicators
People with visual and motoric disabilities may navigate Pinterest without a mouse or trackpad. We created focus indicators that are straight forward and obvious for all Pinners so that regardless of your level of ability, you can use our website or apps with clarity.
4. Don’t rely on colors
In all our user flows, we rely on grayscale with only one clear call to action color. This is great for people with colorblindness because we aren’t relying on colors to denote information. Instead, we rely on good use of typographic and spatial hierarchy in our user flows to create meaning and information structure.
5. Use SVGs
Replace PNGs with SVGs so that icons and UI components render clear and sharp when you use the built-in zooming feature that’s available on most operating systems and browsers. This enables people with low vision to zoom in and see small things clean and crisp, regardless of pixel density and zoom percentage.
6. Consider screen reader support
Screen readers allow people who are blind and visually impaired to receive spoken feedback. Before we started this project, people with visual impairments didn’t have a seamless sign up experience for Pinterest, because our sign up and new user experience wasn’t optimized for a screen reader. They also had trouble navigating our app, from home feed to search to their profile. We’ve since made significant updates so that Pinterest is completely usable with screen readers.
7. Make accessibility a mindset for engineers and designers
The best product is inclusive at every stage of the design and engineering process. That’s why we created a brand new UI library that includes accessible components for engineers and designers to use as they build and design Pinterest. Also, automated accessibility checks are in place to ensure we have clearly labeled icons and components for any new feature.
With these best practices, we’re continuing to make Pinterest more inclusive of everyone. We’ve made significant progress updating our iOS and web platforms to meet the majority of the accessibility standards, and we’re working on bringing these changes to Android gradually. When you get it, let us know what you think.
Acknowledgements: Scott Andreae, Julia Cochran, Chris Lloyd, Rahul Malik, Shira Netter, Mallika Potter, Mara Sohn, Christian Vuerings, Alice Yuan, Joey Zingarelli, Linnea Zulch and the rest of the Accessibility Working Group at Pinterest.
