Accessibility Audit

Better Accessibility for BetterHelp

BetterHelp has changed the healthcare industry by making mental healthcare accessible. This is an audit of the digital accessibility of their website.

Date

03/21/2019

Website

Live Link

Overview

The accessibility audit was done in 7 stages.

  • Initial observation based on WCAG 2.1 guidelines
  • Contrast analysis with CC Checker Chrome Extension
  • Color blindness analysis with Toptal color blindness tool
  • Screen reader compatibility test with ChromeVox
  • Analysis with WAVE accessibility tool
  • Analysis with AXE DevTools Chrome Extension
  • Analysis of HTML code with W3C Markup Validator

Stage 1: Observation based on WCAG 2.1 guidelines

WCAG 2.1 separates their guidelines into 4 ways in which websites need to be accessible. The requirements are for content to be perceivable, operable, understandable, and robust. Here are my initial observations for each of those requirements.

Satisfactory

  • Website is fully responsive to all viewports 
  • Content can be presented without scrolling in two dimensions 
  • No flashing content (which can sometimes cause seizures)
  • Navigation through header or footer
  • Progress marking available of getting started page

Dissatisfactory

  • Many images are missing alt-text
  • Much text is difficult to read due to low contrast 
  • Focus order misses a majority of content
  • Inadequate clickspace for checkboxes during getting started process

Stage 2: Contrast analysis with CC Checker Chrome Extension

I tested the contrast of 3 prominent color combinations throughout the website:

  • The green text on the white background
  • The gray text on the white background in the menu
  • Get Started button (white text on red background) in the header

An accessible contrast ratio is that of over 4.5. In each of these cases, the contrast ratio was 3.5 or below.

Stage 3: Color blindness analysis with Toptal color blindness tool

Three color blindness issues examined were:

  • Protanopia red-green color blindness, with anomalous red cones.
  • Deuteranopia red-green color blindness, with anomalous green cones.
  • Tritanopia  blue-yellow color blindness, with anomalous blue cones.

In each of these the contrast between the green text and the background dropped below 2.22, failing all categories of WCAG accessibility.

From left to right: Protanopia, Deuteranopia, then Tritanopia.


Stage 4: Screen reader compatibility test with ChromeVox

The site was incredibly incompatible with screen readers. Through navigating the home screen with a screen reader, it became clear that a majority of the website content was skipped over. When it came to the footer, I saw a link titled “web accessibility”. I was shocked by how long it took to notice this, but I clicked the link. It took me to a page titled “Our Commitment to Web Accessibility”. Unfortunately the screen reader skipped over almost all of the text on this page, including instructions on how to access their accessibility menu.

When I saw my first accessibility menu, I thought it was the coolest thing ever, and it was very similar to the BetterHelp accessibility menu. However, the issue with accessibility menus is that it inherently means that the website itself is not accessible. Accessibilities offer accessibility as an accommodation, instead of as a standard. 

I will say that BetterHelp had an accessibility menu that was very extensive compared to other accessibility menus I’ve seen, and it was the one aspect of the site that worked perfectly with a screen reader. I only wish the rest of the site reflected their accessibility efforts as well. The following are screenshots of the home page. I have highlighted all of the content that was skipped over by the screen reader.


No items found.

Stage 5: Analysis with WAVE accessibility tool

Using the WAVE accessibility tool I analyzed the home page, the getting started page, and the web accessibility page. The most significant errors identified were over 218 instances of inaccessible color contrast, missing alt-text, empty links, and broken aria references.

From left to right: Home Page, Getting Started Page, Accessibility Page

Stage 6: Analysis with AXE Dev Tools Chrome Extension

AXE extensively analyzes the coding of websites. Again, I analyzed the home page, getting started page, and web accessibility page.  99 violations were found on the home page, 577 violations on the getting started page, and 55 violations on the accessibility page. The 2 most common critical violations were:

  • Missing alt-text for images
  • Zooming and scaling were disabled

From left to right: Home Page, Getting Started Page, Accessibility Page

Stage 7: Analysis of HTML code with W3C Markup Validator

The W3C Markup Validator found 101 errors on the home page, 531 errors on the getting started page, and 52 errors on the web accessibility page. The most common errors were:

  • Inappropriate use of ARIA attributes
  • Viewport values that restrict user resizing
  • Attributes on elements they are not allowed on

From left to right: Home Page, Getting Started Page, Accessibility Page

My Recommendations

  • Provide alt-text for all images. 
  • Fix the errors which cause screen readers to miss most content.
  • Refresh ARIA code to fix bugs.
  • Enable zooming and scaling.
  • Fix contrast errors which make text difficult to read. 

My contrast recommendations are to replace the red color of the button with #FF6247 and use black text instead of white. This will have a contrast of 7.13 which meets AAA accessibility. I recommend changing the gray text in the header to #494949 which would be much more readable with a contrast of 9 which meets AAA accessibility. Additionally I would replace the green of the text and buttons with #3B7012 which has 5.98 contrast with white and would meet AA accessibility standards whether used in the foreground or background.

View Low Fidelity Prototype
No items found.
View Prototype

My other works

Market Resource Partners

Designing the first enterprise sized Account Based Marketing software, serving internal and external users.

Mobile App

Transforming Transportation - On My Way

On My Way was my FIRST mobile app design concept which provides access to bus arrival times and bus stop locations.

Tablet App

Wren - An Emotional Regulation App for Kids

Wren is a mental health tablet application for kids which teaches emotional regulation skills.

Web Design

Artist Ecommerce - The Blind Painter

A local artist needed a place to showcase his work and his unique story.

View All Works
Mobile App

Transforming Transportation - On My Way

On My Way was my FIRST mobile app design concept which provides access to bus arrival times and bus stop locations.

View All Work
Web Design

Artist Ecommerce - The Blind Painter

A local artist needed a place to showcase his work and his unique story.

View All Work
Accessibility Audit

Better Accessibility for BetterHelp

BetterHelp has changed the healthcare industry by making mental healthcare accessible. This is an audit of the digital accessibility of their website.

View All Work