Accessible experiences

‘Accessibility’ refers to the design of products, devices, services, and environments for people who experience different types of disabilities. At Intuit, we work to create truly accessible products that 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).

Our goal is to ensure our ecosystem of products meets criteria in the Web Content Accessibility Guidelines 2.0.

 

Why is this important?

Our mission at Intuit is to power prosperity around the world, which means delivering 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.

About 20% of the population has some sort of disability that makes it tough to hold a job or do work on the web. This percentage will continue to grow as people live longer while managing health conditions.

 

Why do we have accessibility guidelines?

This info is meant to educate and guide designers and engineers. The guidelines also help everyone who works on our products understand the importance of keeping accessibility top of mind from the very beginning and throughout the design and development process. 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. Laws and regulations aside, making our products accessible is just the right thing to do. 

Our accessibility principles

When we create accessible products, we make things better for everyone–with increased access, reduced friction, and smoother experiences for the greatest number of people.

Our guidelines for web content accessibility are driven by four principles: Perceivable, Operable, Understandable, and Robust (POUR). Keep these accessibility points in mind as you plan, design, and build our products.

 

Perceivable

All our users need to be able to process what’s on the screen. Is there anything in our product or on our site that a blind, deaf, low vision, or color blind user can’t perceive?

 

Content

• Don’t refer to color, or where elements are on a screen.

• Make sure all videos have captions.

• Include meaningful alt text for images, icons, and controls. If it’s text meant to be read, don’t put it in an image.

• When a label is used multiple times on the same screen (Edit, Learn, more). You can also provide screen-reader-only text to clarify.

• Create text alternatives for charts and graphs. A cool way to do this is to include a data table near the chart.

 

Color and contrast

• Check your contrast. Is there enough between foreground text and background color?

• Linked text should stand out from body text.

• Don’t use color alone to indicate status. Include icons with text to make things clear.

• Focus indicators should be highly visible on fields and all interactions.

 

Typography

• Font face, size, and weight are all elements to consider when designing for readability and legibility.

• Keep in mind that some low vision people use screen magnifiers, or zoom in to enlarge text and make things easier to read.

 

Operable

 

Interactions and targets

• Make sure interactions are well-separated and easy to hit.

• Keep screens feeling “light” – don’t make them overly dense.

 

Targets on mobile

• Make sure everything is thumb-able.

• Targets should have a minimum height, width of 48px and have enough space between them.

• Touch targets should be visually identifiable. Is it clear what to do next?

 

Forms

• Make sure fields labels persist and are visible when the focus is inside the field.

• Labels, tooltips, and input fields should appear in the right keyboarding tab order.

• Present errors clearly, use an element in addition to color and tie to the right field.

• Watch out for field validation and when it happens.

 

Understandable

 

Readability

• Keep content clear and easy to read–and listen to. Remember that when someone is using a screen reader, the content is spoken aloud.

• Present only the info users needs, and only when they need it.

• Keep sentences simple. Aim for 5th to 8th grade readability.

• Use images to support content. Illustrations and graphs can clarify complex concepts.

 

Info hierarchy and layout

• Make page titles unique and informative.

• Keep heading styles consistent. Use typography and styles to provide meaning and structure.

• Make sure the correct HTML is used (H1, H2, etc.), so that screen readers can easily interact with the page structure.

• Use headings, sub-headings, and bullet points to make content easy to scan.

 

Robust

 

• Make sure things work well enough across platforms, browsers, and devices–different assistive technologies work better in some areas than others.

• Try to be platform agnostic.

• Don’t dictate the technologies a user has to use.

 

 

 

 

 

Experience and empathy resources

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.

Having a hard time imagining what using assistive devices is like? Here are some short videos to give you an idea of how people use assistive technologies to access information on the web and navigate through interfaces.

Design resources

There are many external accessibility tools, plugins, and extensions available to test or validate your code or designs. Simulators are also helpful to understand visual implications when creating new designs. Here is a list to get you started.

Accessibility Office Hours

Come learn more about accessibility, get feedback on design or development, test with users, set up a research session, etc.

Every Monday from 10 am to 12 pm in the Intuit Studio

(Mountain View Building 20, 1st Floor)

Slack: #cmty-accessibility

Jive: in/accessibility

 

Recruit and Test Users

Submit a specific request for accessibility testing through the Intuit Research Studio: Customer Connect

 

Accessibility Cheat Sheet

Check out our cheat sheet and learn to build accessible products for everyone.

Download cheat sheet for XD, PD, QA

 

Web tools:

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.

 

WAVE Chrome & Firefox Extension

The WAVE Chrome and Firefox extensions allows you to evaluate web content for accessibility issues directly in your web browser.

Download the Browser Extension

 

Content tools:

Hemingway App Editor

The sun also rises for clear, accessible content.

Write like Ernest Hemingway.

 

Readability Test Tool

Enter a URL or copy to get the grade-level of your content.

Test Readability. 

 

Sketch plugins:

Color Contrast Analyser

This plugin calculates the color contrast of two layers to see if the design meets our guidelines.

Get Color Contrast Analyser.

 

 Stark

This plugin lets you see how your design appears to color-blind users.

Get Stark.

 

Simulators:

Sim Daltonism

visualize what a colorblind person would see via your camera or on screen.

Get it for Mac or iOS.

 

Color Contrast Analyser

Test color contrast against the WCAG guidelines and has a color blindness simulator overlay.

Get it for PC

 

WUHCAG’S WCAG 2.0 Checklist:

A comprehensive list of WCAG 2.0 accessibility requirements organized by beginner, intermediate, and hard.

View WCAG 2.0 Checklist

 

Additional reading

Start with Empathy

 Seven Web Accessibility Myths

Keyboard Accessibility

W3C Web Content Accessibility Guidelines 2.0

 

 

  • Was this Helpful?
  •