Intuit builds products that help people live independent lives. Our products must reach everyone, regardless of their physical, sensory, or cognitive ability.
Headings help users navigate pages, understand the structure of a page, and jump directly to the sections that interest them the most. We use heading tags (like H1, H2, and so on) to make this structure visible and easy to navigate.
Keep in mind that the heading structure may not always match the visual hierarchy—structure is more important. Use the correct heading and make it larger or smaller if needed.
Standard heading usages
H1: Typically one of the first lines on a page, drawer, trowser, modal, or panel. This tells a screen reader they've reached the top of the page. It should also reference the purpose of the site.
H2: The purpose of the page. For instance, "Banking" on the QuickBooks Online Banking screen.
H3: The most common heading. Use this for modules and subsections of a screen.
H4: Subheadings within modules.
Links are the foundation of the internet. They lead the viewer to other information on the same page, the same site, or a destination far away. We need to make sure people understand the purpose of a link before they click it and this requires clear, unique text.
There are 3 areas to consider when creating a link:
- Don’t use generic text like “click here”, “learn more”, or “buy now”. Make each link unique and don’t depend on visual context. Please note, there are methods for developers to include hidden text for screen readers. This is helpful for content within grids, like a product comparison page.
- Don’t use raw URLs, as these are difficult to read and give no context to the purpose. For example, https://www.intuit.com/accessibility/ should be Intuit’s Accessibility Statement and Resources.
- Let users know when a link will take them to media or files. The common pattern is to put the file type in the link. For example, Introduction to Web Accessibility (.mp4).
Some websites have bloated, nested navigation links at the top of the page (such as amazon.com). Tabbing through those navigation links to get to the page content is tedious and frustrating. A skip (navigation) link provides a way for users of assistive technology to skip those navigation links and jump directly to the main content area of the page.
Screen readers use page and iframe titles to tell users where they are within a website or web page. We provide clear, descriptive, hierarchical titles that make it easier to navigate our products and pages.
Often found in the HEAD section of a web page, should be descriptive, hierarchical and must describe the content on the page:
Inserted as an attribute in the element, should be descriptive of their content such as “Advertisement,” or “YouTube video”
Intuit’s accessibility guidelines are based on the WCAG 2.1 AA requirements, which have been recognized as the international standard for accessibility. These standards support all customers by asking 4 questions:
- Is it perceivable?
- Is it operable?
- Is it understandable?
- Is it robust?
These terms have specific accessibility meanings that guide our work.
Interacting with pages
Buttons, links, and interactive elements must work for people who don't use a mouse and navigate and interact with a page using their keyboard. All interactive elements must have proper labels to communicate what the user is focused on and the elements must be activated with the Enter/Return key.
For example, a customer wants to add a bank to their Mint account. A window appears with a form for the bank information. We need to put focus on the form so they can immediately begin interacting with this content. We don’t want to leave focus on the background screen and force them to hit the Tab key until focus eventually ends up in the window.
Financial software customers must be confident their invoice, estimate, or payment was accurately created. They must know if a form input is for a due date or invoice date. Which inputs are required? Which have been marked as invalid?
As Intuit kicked off a project to fix form labels in QuickBooks Desktop in 2013, My Blind Spot created a video showing how accessibility can be the difference in someone keeping or losing their livelihood. It follows Dixie, a bookkeeper who lost her sight and subsequently her business. She wasn’t able to use the product because the form inputs and controls were not adequately labeled.
All form inputs must be labeled. Our customers also need to know when an input is part of a group (mailing vs billing address), is required, or if the value is incorrect.
Data tables are a powerful part of web design. They’re an easy method to associate information within columns and rows. Sighted users can visually scan a table for these relationships. When used correctly, they are accessible to all of our customers.
A screen reader user will hear a cell’s data and the associated header. For example they would hear “Row 3 of 14” “Quantity 12”, “Product Dog Toy”, “Taxable Yes”.
Older web pages and today’s emails often use tables to create multi-column layouts. This is not recommended, as it causes confusion for screen reader users and unnecessary code that could make the page slower.
Although they're not sufficiently visually impaired to require screen readers, 158 million internet users require enlarged screen fonts.
It’s important to use relative—not absolute—font sizes that enable users to override the designer’s font size settings. Our pages also need to be responsive to larger fonts to avoid clipping and overlapping.
People who are blind can’t perceive images. Therefore, all images that convey meaning must be accompanied by an alternative text description. The alternate text is also displayed when an image cannot load and provides important information for search engines.
Images lacking alt attributes are one of the most common and frustrating accessibility errors on the web. This powerful, 30-second video shows the impact to an Intuit customer during a Follow-Me-Home interview: Customer impact of an image without an alt attribute (.mp4)
Consider what the image represents. Is it providing context to the story? Is it providing text or an icon? Or is the image purely decorative?
Intuit believes in the power of the individual to do more, to make more, and to be more regardless of physical, sensory, or cognitive ability. Captioning fulfills this promise for our customers and colleagues that have difficulty understanding the spoken content within live and recorded events. The Intuit Captioning Protocol provides guidance on captioning resources, contracting, and best practices.
Why do we need captioning?
Providing the appropriate accommodations for employees and for customers with disabilities is mandated under the Americans with Disabilities Act (ADA). When producing a video, presenting a workshop, webinar, or having a meeting, your team has certain responsibilities.
Captioning is an accommodation that is made for a disability. Often, when discussing accessibility, an assumption is made that captioning is only for the benefit of the deaf and hard of hearing. However, captioning is beneficial to a wide range of individuals including:
- A person who has a learning disability
- A person who has a temporary disability, such as a concussion
- A non-native speaker
- A person without a disability who may have missed something that was just said
Adequate color contrast is important for our customers with low vision.
It's also important for people working in glaring light, such as the patio of a Starbucks. It increases readability for those in inconsistent environments, such as riding a metro. It's critical for scannability, for instance, someone reading in the car and they need to get the gist of the information, such as the money in their bank account before heading into a store. The adequate color contrast makes our sites usable for those over 50, who may juggle between glasses, have cataracts, floaters, and other age-related vision loss.
Adequate color contrast allows our customers to read content without additional stress and concentration. Here’s example feedback from a customer:
“I sure wish I could see the font, grey sucks, need to be able to make it black PLEASE. I'd like to see you reconcile a bank account with the current view, font too small and too light....URGH!!!”
Color as context
We also can’t depend on color for setting context. Links need to be differentiated from body text with an underline. Combine color with icons or text to let the user know a bill is late, an expense has been categorized, or a tax form has been completed.
People with photosensitive seizure disorders may be susceptible to seizures that are triggered by flashing content. If flashes are used, they must not exceed a specified number and interval. Typically, persons with these disorders are more sensitive to red flashing than to other colors.
Animations can also make people sick, especially when they fill the page and/or include multi-dimensional movements. It’s important to support a customer’s preference for reduced motion, stop animations after 5 seconds, avoid auto-playing videos, and give people the ability to stop looping and repetitive movements.