Intuit—Accessibility Analysis Report

Introduction

This report lists each guideline of WCAG Levels A and AA and the pass or fail result of tests conducted on pages randomly selected from the website. Those components that did not pass will need modifications in the code to help bring the www.intuit.com website toward WCAG Level A and Section 508 conformance.

We’ll go over the audit summary and tests of the audit in the next section. Following that, there will be a tables listing each WCAG Principle, the guideline description, the tests performed, test results and code recommendations for each guideline. Lastly, there is a brief section that lists some notes and accessibility resources. In addition to this website summary report, a spreadsheet for each page will detail each component for which recommendations have been made.

Summary of Guidelines and Tests

There are many tests on websites using assistive technologies and accessibility evaluation tools. This report will use (1) JAWS, NVDA and VoiceOver screen readers (2) browser Web Developer Tools (3) color analysis tools and others, along with visual inspection of the UI and code to audit the website. Programming suggestions will help your developer with accessibility specific HTML and ARIA roles that could be incorporated for improvement in accessibility.

The following tables are reports listing each guideline and success criteria organized by WCAG Principle. Then, a summary of the results of the accessibility tests performed for each guideline.

Guideline Tables


Perceivable: Web content is made available to the senses - sight, hearing and or touch
WCAG Level Guideline Test or Assistive Technology Result Notes
A Text Alternatives: 1.1.1 Non-text Content Web Developer Toolbar, Visual Inspection, Keyboard, JAWS, Bookmarklets Fail

Decorative images get empty alt text


Linked images have descriptive alt text
Many alt attributes for images inside links have listed the long file name, which will be tediously read by most screen readers. An example of this is on Quickbooks-Taxes with the code:

alt="2015_3_14-small-AM-Fin-Manage-Timeline-2016-Tax-Cal-for-Small-Business"
A better alt attribute would be:
alt="Timeline and 2016 Tax Calendar"
Seven images on page Which Quickbooks Is Right For Me did not have any alt attributes assigned to the images


[N/A] Complex images have appropriate alt text (linked or longdesc page)


Form buttons have descriptive value


Form inputs have associated text labels


Embedded Multimedia has accessible text


Frames are appropriately titled

A Time-based Media Alternatives: 1.2.1 Pre-recorded Audio-only and Video only JAWS, Visual Inspection Satisfied

[N/A] Transcript provided for audio-only (non-live)


[N/A] Text or audio description for audio-only and video-only (video without audio track)

A Time-based Media Alternatives: 1.2.2 Captions (pre-recorded) Visual Inspection Pass

Synchronized captions provided (You-Tube videos)

A Time-based Media Alternatives: 1.2.3 Audio Description or Media Alternative (Prerecorded) Visual Inspection, Code Inspection Fail

Visually conveyed content is available in an alternative media
Either an audio description or a full text alternative is required for synchronized media presentations. This page on making an audio description offers one approach to making an audio description

AA Time-based Media Alternatives: 1.2.4 Captions (Live) Visual Inspection, Code Inspection Satisfied

[N/A] Synchronized captions provided for all live multi-media that contains audio
The site doesn’t have live video

AA Time-based Media Alternatives: 1.2.5 Audio Description (pre-recorded) Visual Inspection, Code Inspection Fail

Audio descriptions for visually conveyed content provided in synchorized media
At Level AA, an audio description is required. If this has been provided in conforming to 1.2.3, a full text alternative is optional

A Adaptable Content without loss of information: 1.3.1 Info and Relationships WAVE,JAWS, VoiceOver, Code Inspection, Bookmarklets Fail

Semantic markup to designate headings, lists and special text
Many empty headings were found throughout the site. Confusion may arise for the keyboard users navigating by heading elements. Or, when no information about the header is given as the header is read ("Heading Level 2"). Two examples: Quickbooks Pricing an empty header was found above the Compare Product Features table. And, empty headers were also found on Which Quickbooks Is Right For Me below "Which QuickBooks is right for you?" heading


Table cells associated with their headers. Data Table captions and summaries used when appropriate
Currently, no table headers were read by VoiceOver or JAWS and cells were not properly identified with their header. Table headers should be written as

th
but they are written as
td
Also, a checkmark is indicated visually in the table cells, but the VoiceOver and JAWS read "blank" with the code:
span class="checkmark"
A checkmark image can be used in the table cell with a descriptive alt attribute like
alt="checkmark"
and issue would meet successful criteria

A Adaptable Content without loss of information: 1.3.2 Meaningful Sequence JAWS, Keyboard Pass

Reading and navigation order is logical and intuitive

A Adaptable Content without loss of information: 1.3.3 Sensory Characteristics Visual Inspection, Keyboard Pass

Instructions are not strictly visual or auditory

A Distinguishable Content: 1.4.1 Use of Color Visual Inspection, Keyboard Fail

Sole method of conveying content is not color


Color alone is not used to distinguish links from surrounding text
On every page of the site, some links are underlined when focused. But most are only differentiated from their surrounding non-link text by color alone when not in focus or hover state. One option is to underline all focused or hovered links. Another is to differentiate the links from the surrounding text with other styling, such as a border around links or a background color behind links

A Distinguishable Content: 1.4.2 Audio Control Keyboard, Visual Inspection, JAWS Pass

For audio that automatically plays on a page for more than 3 seconds: provide a mechanism to stop, pause, mute or adjust volume

AA Distinguishable Content: 1.4.3 Contrast - minimum ratio Colorzilla, Color Checker, Web Developer Tools, Colour Contrast Analyser Fail

Normal text and images of text have a contrast ratio of at least 4.5:1
On page Products-Lacerte the gold background (#AC8A5D) with white text does not meet AA success criteria. Contrast ratio is 3.2:1. Also the lime green (#53B700) as a background with white text fails at a contrast ratio of 2.6:1. Suggestion is to darken the lime green background to #248518


Large text has a contrast ratio of at least 3:1

AA Distinguishable Content: 1.4.4 Resize text Zoom Pass

The page is readable and functional when the text size is doubled

AA Distinguishable Content: 1.4.5 Images of Text Visual Inspection, Web Developer Tools, Code Inspection, VoiceOver Pass

Image is not used to present text if the same visual presentation can be made using text alone

Operable: Interface forms, controls and navigation are operable
WCAG Level Guideline Test or Assistive Technology Result Notes
A Keyboard Functionally Accessible: 2.1.1 Keyboard Keyboard, VoiceOver, Code Inspection Fail

All page functionality is available using the keyboard (unless something like free-hand drawing)
The keyboard is unable to interact with the checkboxes on Which Quickbooks Is Right For Me. The CSS reveals that it has

visibility:hidden
which has the effect of hiding the checkboxes from sighted users as well as screen-reader users. VoiceOver has ignored the html checkbox element because it is visually hidden


Shortcut keys for a specific page should not conflict with existing browser and screen reader shortcuts

A Keyboard Functionally Accessible: 2.1.2 No Keyboard Trap Keyboard Testing, Visual Inspection Pass

User can navigate to and from all navigable page elements using only a keyboard - never trapped or locked on an element

A Provide Enough Time To Use Content: 2.2.1 Timing Adjustable Visual Inspection, Keyboard Satisfied

[N/A] User is given options to turn off, adjust or extend any time limit for a page or application (real-time events excluded)
The site doesn’t have timed application

A Provide Enough Time To Use Content: 2.2.2 Pause, Stop, Hide Visual Inspection, Keyboard Pass

Any content used to draw attention to or highlight content (automatic moving, blinking or scrolling) can not last longer than 5 seconds


[N/A] Automatic updating content (news ticker) can be paused, stopped, hidden or timing manually controlled by user
The site doesn’t have automatic updating content

A Content does not cause seizures: 2.3.1 Three Flashes or Below Threshold Visual Inspection, Keyboard Pass

No page content flashes more than 3 times per second (unless very small and of low contrast or low red color)

A Help Users Navigate to Content: 2.4.1 Bypass Blocks NVDA, Keyboard, Visual Inspection Fail

Skip link or footer navigation provided
Visible or hidden Skip to Main Content or Skip to Footer links are recommended when multiple pages have the same navigation links to elimnate having to tab through the same banner area on each page

A Help Users Navigate to Content: 2.4.1 Bypass Blocks Visual Inspection, Keyboard, Code Inspection, WAVE, Bookmarklets Fail

Proper heading structure may be considered a sufficient technique
Users must tab through all navigation and banners on every page. Nest headings to convey hierarchy. Another option would be to use ARIA landmarks (banner, navigation) to supplement HTML5 structure elements on the page:

div id="content" role="main" Quarterly and year-end tax relief is here! div


[N/A] Frames are appropriately titled if used as a technique for bypassing individual frames
Frames were not detected in the source code of the audited pages

A Help Users Navigate to Content: 2.4.2 Page Titled Code Inspection, Keyboard Pass

Web page has a descriptive and informative page title

A Help Users Navigate to Content: 2.4.3 Focus Order Visual Inspection, Keyboard Pass

The navigation order of links and form elements is logical and intuitive

A Help Users Navigate to Content: 2.4.4 Link Purpose Visual Inspection, Code Inspection, VoiceOver Fail

The purpose of each line (or form image button) can be determined from the link text alone
On page Customize Your Checks the question mark links infer that information is provided about adjacent form element. Link does not go anywhere or provide information in either VoiceOver or NVDA.
On Quickbooks-Online, there is an empty link under video, which doesn't go anywhere when selected. One option is to delete the empty link to avoid disorienting screen reader users


Links (or form image button) with the same text that go to different locations are readily distinguishable
On the page Quickbooks Pricing the Buy Now buttons are all the same, but go to different destinations. Button text can be more descriptive of the destination, as they are all represent different products and prices. One suggestions is to have the button text say Buy Self Employed or Buy Plus, instead of Buy Now for all of them

AA Help Users Navigate to Content: 2.4.5 Multiple Ways JAWS, Visual inspection, Keyboard Pass

User has multiple ways of finding other web pages on the site
Footer navigation and search function provide two ways to navigate website. But a site map would be helpful

AA Help Users Navigate to Content: 2.4.6 Headings and Labels VoiceOver, Bookmarklets, Visual Inspection, Code Inspection Pass

Page headings and labels for form and controls are informative

AA Help Users Navigate to Content: 2.4.7 Focus Visible Keyboard, Visual Inspection, NVDA, Code Inspection Fail

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible
Most pages have no visible focus indicator provided for links or controls when they have keyboard focus. Anyone using keyboard-only to navigate has no idea what button, control or link has the keyboard focus. Some links are underlined when focused, by default, as in the banner navigation, but most elements have no visual feedback for the focus or hover states. Suggestion to help improve visibility on a focused control or link:

:focus{ border:1px solid red; }
or underline all links. When tabbing to a footer link on the home page Intuit-Home to focus a link, the color difference is so minimal that it can be missed as a focused state. There is no underline or other focus indicator, as with using the mouse on those links. Check CSS for removal of default focus and hover states

Understandable: Content and interface are understandable
WCAG Level Guideline Test or Assistive Technology Result Notes
A Content is Readable and Understandable: 3.1.1 Language of Page Visual Inspection Pass

Use the HTML lang attribute

AA Content is Readable and Understandable: 3.1.2 Language of Parts Visual Inspection, Code Inspection Pass

Identify the language of the page content that may be different from the rest of the page

A Predictable appearance and operation: 3.2.1 On Focus Code Inspection, Visual Inspection, NVDA Pass

When a component receives focus, it should not change substantially or initiate a change of context

A Predictable appearance and operation: 3.2.2 On Input Code Inspection, Visual Inspection, NVDA Pass

Interaction with a control or inputting information does not result in a substantial change to the page context

AA Predictable appearance and operation: 3.2.3 Consistent Navigation Visual Inspection Pass

Keep navigation links that are repeated on web pages in the same order

AA Predictable appearance and operation: 3.2.4 Consistent Identification Visual Inspection, Code Inspection Pass

Page elements that have the same functionality across web pages are consistently identified

A Assist Users with Input: 3.3.1 Error Identification NVDA, Visual Inspection Pass

The elements's label should provide information about format, value, length, etc to prevent an error

A Assist Users with Input: 3.3.1 Error Identification NVDA, Visual Inspection Fail

Form validation errors are presented in an efficient, intuitive and accessible manner
When an incomplete Sign in form has been submitted, the page is refreshed with an error indicating the process didn't work. However, there are no suggestions for re-entering data. The refreshed form does not get read by JAWS or NVDA to indicate what happened and where the user is on the website. Possible using the aria-invalid attribute:

$(errFld).attr("aria-invalid", "true")
could specifically identify the invalid entry and the tabindex attribute assigned to the element requiring focus, once page is refreshed

A Assist Users with Input: 3.3.2 Labels or Instructions Visual Inspection Fail

Sufficient labels and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels and/or fieldsets/ legends
On page Customize Your Checks the question mark links (tips) infer that information is provided about adjacent form element. Link does not go anywhere or provide information in VoiceOver or NVDA. The title attribute would allow VoiceOver and NVDA to identify the purpose and/or destination of the link

AA Assist Users with Input: 3.3.3 Error Suggestion Visual Inspection Pass

If an input error is detected (via client-side or servicer-side validation), provide suggestions for fixing the input in a timely and accessible manner

AA Assist Users with Input: 3.3.4 Error Prevention (Data - Legal, etc) Visual Inspection Pass

If the user can change or delete the legal, financial or test data, the changes or deletions can be reversed, verified or confirmed

Robust: Content can be used reliably by a wide variety of user agents, including assistive technologies
WCAG Level Guideline Test or Assistive Technology Result Notes
A Compatible with future technologies: 4.1.1 Parsing Nu HTML Checker, Code Inspection Fail

Signicant HTML/XHTML validation/ parsing errors are avoided
The following errors were identified on many pages of the site:

"attribute adhocenable not allowed on element a at this point"
"element hr not allowed as child of element ul in this context"
"element style not allowed as child of element section in this context"
"Duplicate IDs"
It is recommended that corrective measures are taken against these HTML validation issues

A Compatible with future technologies: 4.1.2 Name, Role, Value Nu HTML Checker, WAVE, Code Inspection Pass

Markup is used in a way that facilitates accessibility



Notes and Accessibility Resources

The items examined in this document focuses on changes that are necessary for WCAG Level A and AA conformance. The code suggestions may be only one out of several ways to fix any issue. Changes in the stylesheet may also be a consideration for conformance that are not included in this report.


There are additional tools not specified in this report, both automatic and manual that I use regularly. Axe, Screen Readers (NVDA, VoiceOver and JAWS), Web Developer Tools (Chrome Accessibility Dev Tools and Firefox Web Dev Tools), keyboard-only testing and several accessibility bookmarklets.


The field of accessibility goes beyond what I could cover here. If you’d like to learn more about accessibility, you may find some of these resources of use:


Detail Spreadsheets

The spreadsheets below are from some of the pages that were audited. You will find additional details that provide information for the summary table above.

Pricing Page Spreadsheet

Which One Is Right Page Spreadsheet

QuickBooks Online Page Spreadsheet

Sign Up Form Spreadsheet



Last updated 2016-30-11 by Debbie Lonsdorf