Our principles for accessibility
It starts with empathy
The work we do as designers and developers starts with gaining a deep understanding of our customers’ problems and the challenges they face. We take the time to talk to people who use assistive technologies, to better understand how different devices solve their problems.
In keeping with our obsessive focus on customers, let’s make it personal. Do you have a daughter in the fourth grade? A father who runs his own business? A friend who’s an accountant? What if they lost their hearing, vision, or mobility? Close your eyes and imagine you just learned that someone close to you will go blind in the next two years. What can you do to help?
Having a hard time imagining what using assistive devices is like? Here are some quick videos that give you an idea of how people use assistive technologies to access information on the web and navigate through interfaces.
Readability (clear enough and enjoyable to read) and legibility (how easy it is to read) are key elements for an inclusive, delightful customer experience. When assistive technologies like screen readers are turned on, the content is spoken aloud to users, making this even more important.
As more of our customers use their phones to conduct their businesses, we should aim to write content with a mobile-first perspective. Writing content for small screens helps focus on precise messaging, and can easily scale up to the large screen of a laptop or desktop.
Content hierarchy is key to being able to scan and grasp information quickly. When writing for digital experiences, present content in a logical, hierarchical structure, and keep it brief.
Use headings, sub-headings, and bullet points to make content easy to parse and scan. Make sure the correct CSS is used (H1, H2, etc.), so that screen readers can easily interact with the page structure. Avoid long paragraphs or repetition.
Font face, size, and weight are all elements to consider when designing for readability and legibility. Our brand fonts have defined sizes, weights, and styles, and are accompanied by recommendations on how and when to use them.
When designing for native mobile, use system fonts (that can also be scaled dynamically) for body content and brand fonts for headlines, sub-headers, pricing displays, and particular calls to action (such as “Buy now”). Refer to our fonts and typography guidelines for additional details on brand and mobile system fonts.
Color and contrast
About 9 percent of the world’s population has some form of color blindness, so using accessible colors and providing enough contrast are key to readability. Our gorgeous designs aren’t useful if people can’t see them.
For people with low vision or other vision impairments, we should watch the contrast and color choice between background and foreground colors. Remember to apply the same awareness to iconography and navigation elements.
Sufficient color contrast can be measured with a ratio difference between two colors, and compliance levels have been standardized by Web Content Accessibility Guidelines 2.0. The recommended contrast ratio is 3:1 for text size of 18 pt and larger (or 14 pt bold and larger), or 4.5:1 when text size is less than 18 pt.
Need some more help? Check out our color and contrast accessibility tools in the resources section.
Blind and low vision users need sound or speech alternatives to hear content they can’t see. Provide alternative text for images and other visual components such as iconography, illustrations, data visualizations, photography, and buttons, and alternative descriptions for complex images or motion graphics. Present labels and descriptions for UI elements in logical hierarchical structure, since screen readers read aloud content as people move through the interface.
Close your eyes and imagine how the content flows and how the user might feel. Remember that someone has to sit through the interface as the screen reader reads the elements, so keep things brief and targeted.
Hearing-impaired folks need visual alternatives to see content they can’t hear. Provide captions, transcripts, or other visual cue alternatives for audio elements or alerts.
People with mobility issues often need voice-activated alternatives for selections and actions (to select a checkbox click Save, for instance). These folks often use their keyboard to move through an interface.
Re-usable patterns and components
When designing a flow or individual screens, pull from our components library and follow defined pattern guidelines as much as possible. Our design systems team has created a set of patterns and components that can be used across our product ecosystem, and each component is responsive and meets accessibility standards.
Interactions with interfaces
When designing, think about how someone will use our interface, and keep in mind that not everyone can see the screen or hear sounds. Many people use assistive technologies on the web, so take the time to understand how different technologies are used and how your interface can take advantage of those capabilities.
- For users that rely heavily on a keyboard to navigate through content, partner with your engineer/design partner to brainstorm about how you want the semantic markup to look and define the keyboarding focus order. Our power users prefer to keyboard as well, so this isn’t just about those with mobility issues.
- If you want the user to swipe on a mobile device, can you think of any limitations?
- If you are including a call to action on a large desktop screen, how big should it be in terms of target size (thinking of users with mobility impairments)? What color should it be (thinking of color blind or vision impaired users)?
- Does our user have to read a ton of text before making a selection?
- What about form fields? What is the intended hierarchy or user flow for when users are filling out a form (thinking of users that use keyboards or voice assistive technology)?
Building a great product is an ongoing journey. We want our products to be usable by everyone, and implementing accessibility principles and best practices is a big step in the right direction.
Let’s not stop here. To ensure an awesome accessible experience, continue to research and test designs with customers who use assistive technologies. Do they experience any limitations or frustrations? Turn on and get familiar with your device’s screen reader. Does the content flow the way you intended it to? Incremental accessibility improvements should be an integral part of our design and development process.
Always put yourself in the user’s shoes. Remember that good design is accessible design, and when the product or service you create is accessible, you create an inclusive experience for all.