Inclusive experiences

Accessibility is about inclusion and refers to the design of products, devices, services, and environments for people who experience disabilities. Truly accessible products address both “direct access” (unassisted by another device) and “indirect access” (compatibility with a person’s assistive technology, such as a screen reader or keyboard).

Why is this important?

About 15 percent of the world’s population has some form of disability. This percentage will continue to grow as people live longer while managing health conditions. Regulations exist in countries around the world to ensure fair treatment for those living with different kinds of abilities, and web standards containing guidance and compliance are readily available. At Intuit, we work to ensure our ecosystem of products meets criteria in the Web Content Accessibility Guidelines 2.0.

Powering prosperity for everyone

Our mission at Intuit is to power prosperity around the world, which means creating great, meaningful, awesome experiences for ALL our users. As designers and engineers, it is our responsibility to create products and services that everyone can use, no matter the level of their physical or cognitive ability.

Why do we have accessibility guidelines?

Information about accessibility helps us educate and guide designers and engineers. These guidelines also help everyone who works on our products understand the importance of keeping accessibility and inclusivity top of mind at the very beginning and throughout the design and development process. Laws and regulations aside, accessibility is just the right thing to do.

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.

Provide alternatives

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)?

Beyond implementation

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.

Design resources for accessibility

Accessibility at the Intuit Studio
Every Monday from 10 am to 12 pm in the Intuit Studio
(Mountain View Building 20, 1st Floor)
Slack: #cmty-accessibility
Jive: in/accessibility

Intuit Accessibility Guidelines
Here’s how we apply Web Content Accessiblilty Guidelines 2.0 to Intuit products.
Check out the Wiki page.

Intuit Zebralyzer Tool (Open-Source)
Check your typography and colors to make sure they’re right for all users.
Start using Zebralyzer.

WebAIM Color Contrast Checker
Test color contrasts to make sure we’re designing for users with a range of visual abilities.
Visit Web Accessibility in Mind.

Sketch Plugin: Color Contrast Analyser
This plugin calculates the color contrast of two layers to see if the design meets our guidelines.
Get Color Contrast Analyser.

Sketch Plugin: Stark
This plugin lets you see how your design appears to color-blind users.
Get Stark.

Readability Test Tool
Enter a URL or copy to get the grade-level of your content.
Test readability.

Hemingway App Editor
The sun also rises for clear, accessible content.
Write like Ernest Hemingway.

WCAG 2.0 Checklists
Three checklists help us achieve holistic accessibility in all our digital products.
Get the checklists.

Additional Reading

Special thanks to accessibility contributors

  • Ted Drake
  • Louise Mintun
  • Yvonne So
  • Matthew Turner
  • Was this Helpful?