The challenge
Audit, review, and fix accessibility failure points to make our website more accessible by meeting or exceeding ADA WCAG 2.1cag standards.
Scoping the challenge
Our design system lacked accessibility standards, leading to usability challenges not only for individuals using assistive technology, but all users, limiting our reach and inclusivity. Our designers and engineers were also fundamentally unfamiliar with accessibility best practices. To cap all of this off, our website was not usable when navigating by keyboard. Several core options were entirely skipped, so users couldn’t log in nor access several key features.
Auditing our website against WCAG 2.1 AA
Evaluated interactions using screen readers and keyboard navigation.
Verified that focus indicators were clear and navigational flow was logical.
Created a detailed report of accessibility issues, categorized by type and severity.
Auditing our components against WCAG 2.1 AA
Evaluated our tap, click target sizes across the board.
Reviewed our current color structure and use cases for accessibility, and how they’re implemented across our components.
Tested focus states and across interactive components.
Finding opportunities
Solving the accessibility challenges required a comprehensive and collaborative approach. I identified key opportunities by conducting an extensive audit, engaging with our designers and engineers, and researching best practices and minimum legal requirements. By leveraging both automated tools and manual testing, my team uncovered critical failure points across our website. To help find key opportunities for resolving these pain points, cross-functional collaboration played a crucial role. It helped align stakeholders, secure executive support, and educate teams on accessibility best practices.
Created a standardized focus state
I outlined guidelines for a clear and consistent focus state to enhance usability for keyboard navigation. This included designing focus indicators with high contrast and visibility across different UI components. To make sure this aligned with our key stakeholders, I worked with marketing and branded to ensure the color used would align with our ongoing visual revamp.
Implement a proper focus order
To enable seamless navigation, I worked with engineers to established a logical focus order across our pages, ensuring users could access all features and account settings. This involved structuring the DOM to ensure a coherent tabbing sequence and resolving inconsistencies in navigation flow.
Update color contrast
Addressing color contrast issues was crucial to making content perceivable for all users, including those with low vision. I audited all UI components and our ongoing color usage across our designs to scope out the overall impact and assess future potential contrast issues. Phase I included updating all components that didn’t meet contrast issues, with a future phase being an entire overhaul of our color structure with accessibility baked in from the start.
Create a content structure for screen readers
We enhanced the content structure to improve screen reader compatibility by adding meaningful semantic elements and ARIA roles. This update had an additional layer because our content designers are in charge of our localization keys, and that process has a very structured naming approach to keep things organized. As a former CD myself who led localization, I worked with our CDs to establish a naming structure and review scalability.
Planning and executing
After scoping and identifying opportunities, we recognized this effort would span across nearly every squad. To properly allocate resources and align with other ongoing efforts, we decided to phase our updates and work on a page-by-page basis. We worked collaboratively to inform engineers of the updates coming and needed, but updates and reviews were done at a micro-level to lower the overall resource cost of this project.
We also had an ongoing effort to unify our mobile and web design systems. However, this effort would become much larger in scale and involve much more resources from the design system and infrastructure side. After our discussion with legal post-audit, they informed us that the website presented a greater legal risk, so we decided to kick off our effort on the web side first, and then revisit our app once we began unifying our systems.
20+ components fixed
We updated 20+ components to align with accessibility standards, ensuring usability across various assistive technologies. These components included buttons, modals, and dropdowns, accordions, and more.
100+ contrast issues resolved
As part of our component updates and how common some of these components were, the updates to the color contrast compounded across pages. This, in addition to manually updating numerous blocks of texts and other contrast issues, resulted in the most widespread update required to meet the minimum requirements for WCAG 2.1 AA.
Reviewing the work
We’re releasing updates slowly as we continue to refine and align. Our future phase, which involved unifying our web and mobile design systems, includes a color structure update that will see major accessibility improvements to our color combinations, in addition to improved semantic structure and better documentation.
In addition to our improved documentation, we started conducting ongoing education covering accessibility best practices, as well as establishing accessibility ‘champions’ within the company to help ensure we continue to adhere to WCAG standards and update as needed.
Long-term vision
We’re releasing updates slowly as we continue to refine and align. Our future phase, which involved unifying our web and mobile design systems, includes a color structure update that will see major accessibility improvements to our color combinations, in addition to improved semantic structure and better documentation.
In addition to our improved documentation, we started conducting ongoing education covering accessibility best practices, as well as establishing accessibility ‘champions’ within the company to help ensure we continue to adhere to WCAG standards and update as needed.
