Enhancing Accessibility for an Insurance Website

Introduction

The website of a property and casualty insurance carrier serves as a key resource for both independent insurance agencies and insured customers. While the company had made initial efforts to improve accessibility—such as adding the AccessiBe accessibility tool—these efforts lacked a comprehensive, systematic approach to integrating accessibility into the design and development processes. I identified the need for a more thorough, ongoing solution and began exploring ways to improve accessibility across the website.

Methods

To develop a more structured approach to accessibility, I leveraged the Department of Homeland Security’s (DHS) Section 508 "Trusted Tester" Conformance Testing process. This process provides a set of guidelines for accessibility testing to ensure compliance with Section 508 standards. The DHS offers free training and testing tools, so I completed their training program and used these tools to conduct a comprehensive accessibility test on the website.

Results

The accessibility test revealed that the website met 27 out of 41 required guidelines. For the instances where the site did not conform to accessibility standards, I created specific design recommendations to address each non-conformance issue. Key examples of these recommendations include:

1. Bypass Repeated Content (Guideline 2.4.1)
• Issue: The site lacked a mechanism for users to bypass repeated content (e.g., navigation menus).
• Solution: Implimented a "skip to content" feature, allowing users to easily bypass navigation elements and jump directly to the main content
2. Search Bar Labeling (Guidelines 3.3.2)
• Issue: The search bar on both mobile and desktop layouts lacked clear visual labels, which violates accessibility guidelines for form field labeling.
• Solution: Add a visible label for the search bar on both mobile and desktop versions to ensure that users understand its function. On desktop, ensure the search button is clearly associated with the magnifying glass icon.
3. Alt Text for Decorative Images (Guideline 1.1.1)
• Issue: Decorative images throughout the site had non-empty alt text, which can confuse screen readers.
• Solution: Update the alt text for decorative images to be empty (alt="") so that screen readers can skip these images without interrupting the user experience.

Discussion

After identifying the accessibility issues, I worked closely with cross-functional teams, including design and development leads, to implement the necessary changes and bring the site into accessibility conformance. Additionally, I helped integrate the accessibility guidelines into the company’s design system, ensuring that future website updates and new systems would be built with accessibility in mind from the outset.

As a result of these efforts, the company now has a reliable process for conducting accessibility conformance testing on both existing systems and new projects. This work not only improved the accessibility of the website but also contributed to maturing the company’s overall UX processes. By embedding accessibility practices into the design and development workflow, I helped ensure that the company could continuously meet accessibility standards and provide a more inclusive user experience for all customers.