.png)
The accessibility audit was done in 7 stages.
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.
I tested the contrast of 3 prominent color combinations throughout the website:
An accessible contrast ratio is that of over 4.5. In each of these cases, the contrast ratio was 3.5 or below.
Three color blindness issues examined were:
In each of these the contrast between the green text and the background dropped below 2.22, failing all categories of WCAG accessibility.
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.
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.
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:
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:
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.
.png)
On My Way is a mobile app design concept which provides access to bus arrival times and bus stop locations.
Wren is a mental health tablet application for kids which teaches emotional regulation skills.
A local artist needed a place to showcase his work and his unique story.
On My Way is a mobile app design concept which provides access to bus arrival times and bus stop locations.
A local artist needed a place to showcase his work and his unique story.
.png)
BetterHelp has changed the healthcare industry by making mental healthcare accessible. This is an audit of the digital accessibility of their website.
.png)
.png){kind=small}
