Accessibility Overhaul
Updating our core consumer product to be more inclusive and accessible to all users.
My Role
Project Lead & UX/UI Designer
Timeline
7 months (October 2019 - April 2020)
The Project
I led our product and engineering teams in a remediation of our core web and mobile apps to close gaps in our adherence to accessibility standards and apply inclusive design principles. I worked with an external auditor to review our products and highlight existing issues, and then developed an iterative strategy to make design and code changes to our products, create company-wide standards for accessible design, and establish training for teams involved in product development.
First things first
In order to understand the world of possible improvements we could make to our apps, we began with an intensive audit to identify any accessibility issues. I worked closely with a third party company to conduct a review of the user flow someone would go through when they access the apps.
Part of the company’s mission is to increase fairness in the job hiring process, so most employees had an interest in fairness and some knowledge of accessibility best practices, but our knowledge was piecemeal across team members, and had never been centrally enforced as part of our product development process. Over the years, lots of teams developed different pieces of the product so we wanted to take the opportunity to reset any weak points and create a standardized way to bake in inclusive design and development practices from the beginning.
Filling knowledge gaps, then product gaps
Once I had an understanding of the specific accessibility standards we were falling short on, I worked with the Head of Product to build a strategic roadmap to start making improvements. An important starting point was to educate all the members of product building teams on tech accessibility. I wanted to make sure that we all had a shared understanding of what “accessibility” meant, both in the wild and what it would mean for us internally, as well as an appreciation for why we would be making the changes that we would as part of this project. Inclusive design, and inclusivity in general, is something I am passionate about so I made it a formal performance goal for myself to become the company’s subject matter expert on tech accessibility.
Once we had a shared understanding of accessibility principles, best practices, and examples of how we could upgrade our products to meet them, we began the redesign of our apps. Some of the changes required backend support to alter page structures or sequencing of user actions, but many of the updates we needed to make were to the frontend. I partnered with frontend and mobile engineering teams to redesign both UI and code elements. Along the way, we also took the opportunity to give the visual design a facelift and clean up any parts of the codebase that were overly spaghetti-y.
Using a sketch plugin to test color contrast throughout design process
Updating html to contain appropriate labels and naming conventions
Pushing through challenges
As is usually the case, we encountered our share of limitations and resource constraints. One of the biggest challenges during this project was finding creative ways to meet accessibility standards without completely scrapping our legacy codebase. For instance, I learned that modals are an accessibility nightmare. It quickly becomes difficult to navigate through the different elements of an html block in a modal, for instance, and a screen reader might pick up on page elements behind the modal that would otherwise be hidden from someone looking at the screen. Unfortunately for us, the flow we were working on was exclusively modals.
You get the idea…lot’s of modals, in a variety of colors, sizes and styles.
To work around this, I had several brainstorming sessions with the project engineering leads to come up with creative approaches we could take. We wouldn’t be able to remove the modals entirely, but once we understood the underlying problems we needed to address, we could find alternate ways to avoid them. This challenge ended up being a great example of the power of user-centered design. By leading with the user’s ideal experience, we were able to come up with a solution that not only “worked” in the engineering functionality sense, but also worked for all users, regardless of how they might access the content.
Outcome
Ultimately, this project turned out to be a huge success. We shipped our accessibility improvements in early 2020 on time and obtained a near spotless VPAT (Voluntary Product Accessibility Template) which we are proud to share with our clients.
After the app changes went into production, I established an accessibility task force to put together a plan to keep up our momentum. We created an external statement on accessibility that is now on our public facing site, and put together a clear summary of our position on accessibility that is now used broadly by our sales and marketing teams to share our best practices and help start dialogue with our clients about ways to make hiring more inclusive.
Since this remediation, we have put together a roadmap around making continued improvements to our products, and are developing unit testing to make it a requirement that any code that gets shipped will pass accessibility standards.
Closing Thoughts
This was a challenging and rewarding project to lead. I learned a lot about the nuances of building accessible technology products and passed that knowledge on to others at my company. I was also able to step outside my role as a designer to help rally my broader team around creating clear positive impact for our users. One of the most useful experiences gained through this project was finding new ways to achieve stakeholder alignment, which I have been able to apply to my other design projects.