WCAG Accessibility

PROJECT OVERVIEW

Securian Financial had spent a significant amount of time and effort in creating their flagship product called Benefit Scout. The offering of Benefit Scout as a major element of their SaaS network proved to be successful from both a marketing and financial standpoint.

Unfortunately an accessibility or Web Content Accessibility Guideline (WCAG) 2.1 audit, had never been done. A full review had to happen to insure that anyone with visual, hearing or cognitive impairment could use the software successfully.

A graphic highlight issues with accessibility on the existing design.

The Goal

Provide context, meaning, evaluation and recommendations on WCAG 2.1, CVAA, ADA & 508 compliance from a User Experience (UX) concerning 13 out of 26 pages of Securian Financials' Benefit Scout.

The following sources were referred to while completing analysis:

A screenshot of the old interface design.

Approach & Research

A variety of tools were used to go analyze Benefit Scout for WCAG 2.1, CVAA, ADA and 508 compliance. These tools insured that proper color contrast levels, font sizes, image alt text, proper HTML coding and more were constructed so that everyone would be able to use the software.

These tools include: W.A.V.E., aXe, Web AIM, and more. The goal was to strive to get as close to AAA compliance as possible, but to be at AA compliance at a minimum.

Strategy

After a thorough review, the foundation of Benefit Scout was found to be strong in most areas with 10 main concerns that typically fall into three distinct categories:

  • A minor contingent of repeated instances of incorrect code structure

  • Sporadic incorrect or non-functionality of keyboard control

  • Color, sizing and contrast issues directly stemming from Securian Financials’ Design Style Guide

Finally, it should be noted that only half of Benefit Scout was in this analysis and of the 13 pages that made it into this report, 2 were design only so Color Blindness and semantic HTML could not be fully vetted. It should be estimated that the amount of issues would roughly double for the full site.

Findings

A significant amount of styling issues were found that would involve UI work, but the core of the information architecture was solid. The engineering fixes that were required was a light lift.

However, the color palette and branding would involve heavy restructuring as approximately 87% of the color combinations did not meet contrast requirements for WCAG 2.1 compliance.

A matrix of all of the colors being used in the old design.
A matrix showing how few color combinations met WCAG color contrast compliance.

End Result

A large amount of work needed to be done to bring Benefit Scout to WCAG 2.1 compliance. After a legal review was held, it was determined that the company had approximately 12 months to share a roadmap that would schedule out what steps would need to take place and 36 months for these changes to be implemented.

COVID-19 quarantine as well as other global mitigating factors have contributed to further delays, but Securian Financial is committed to being WCAG 2.1 compliant.

Side by side screen grabs of the old product, highlighting how many WCAG issues exist.
Previous
Previous

Keystroke Level Modeling

Next
Next

Customer Journey Maps