Incorporating accessibility into products and processes

Summary

 

Role

Project lead, UX designer

Problem

DigiCert did not have a consistent history of intentionally considering accessibility in its products. This product approach could result in poor experiences for any user who is included within the 60 million people in the US alone who identify as having a disability (source: eSSENTIAL Accessibility training, 2019). This was misaligned with the company's values and holds growing legal risks.

Impact

All five of the critical priority issues and 50% of the high priority issues have been improved or resolved, all while making progress on other key projects. This helps protect the business against growing threats of legal action, deliver on our brand promise, and provide sales teams with increasing value to present to customers for whom accessibility is a key factor when selecting products.

In addition to adding value to the business, I successfully integrated awareness of accessibility standards into our design and development process.

All opinions are my own and do not reflect the views or position of DigiCert. Note that I’ve intentionally withheld adding other visual assets to this project overfiew at this time to respect the project’s industry importance, but I’d be happy to review them in a conversation.

Getting started

 

Why focus on accessibility?

There are many good reasons to prioritize accessibility. For myself, it’s personal. Part of my path into UX design came from a time of personal disability wherein I relied on screen readers, contrast manipulators, and zooming tools to access websites and apps. By and large, my experience with assistive technology on most digital properties was terrible. While I overcame my disability in time, it left a massive impact on my approach to inclusive and accessible design.

Moving from values to tactics

In a premortem exercise, I identified some barriers to success that informed my first set of short-term tactics:

  • Lack of education and resources to address existing issues

  • Lack of education and buy-in to prevent further issues

  • Absence of cross-functional collaboration and priority alignment

While progress is ongoing for some of these issues, I addressed the educational needs and cross-functional awareness by working with an accessibility contractor to coordinate custom training for our marketing, UX, and engineering teams. I also created and introduced an accessibility checklist to help keep these considerations top of mind when designing or doing peer reviews.

To overcome priority challenges, I was most effective with two tactics.

  1. Stories sized in a sweet spot. Product owners were much more willing to prioritize and accept accessibility stories if they were smaller-sized. To reach this, UXD needed to take on some of what was normally considered QA effort. Before a story came to sprint plannings and backlog grooming meetings, I would include well-documented lists of instances throughout the product for easier testing, links to accessibility resources for more information, and an annotated design proposal for any improvement that included a UI change.

  2. Focus on collaborating with the engineering teams that were onboarding new engineers. These stories were often low-risk, global, and presented excellent training for new teammates familiarizing themselves with the product.

Design

 

Keyboard focus states

I went through every page of the main product app using keyboard navigation to identify where our focus states failed to behave as expected. I documented global patterns (e.g. all of the tooltips struggled) and one-off oddities.

After tabbing quickly through every option in our header bar and left navigation for the fifth time to get into the main content of the page, I realized one of the most helpful accessibility improvements we could easily accomplish would be to implement a skip link option. The skip link option allows you to skip over global elements (such as a header or navigation menus) and land in the main body of a page. While this was a small effort to design and implement, it made an outsized impact on the keyboard user experience by improving every single page in the product.

I looked at the skip link pattern from a variety of other websites, identified a clear universal pattern, and translated that to CertCentral’s styles. This link appears when a keyboard user starts to tab into a page.

Contrast corrections

A few of the critical and high-priority issues in the main app involved color contrast. I worked to create new solutions, collect feedback from other UXD designers, and prepare stories for implementation based on the new designs we needed to update in the product. This challenged me as both a visual and interaction designer to make sure the solution was elegant and accessible by WCAG 2.0 AA standards in each one of its possible states. I redesigned field labels, optional text, help text, placeholder text, input border colors of all states, system banners, and icons to meet AA standards. One of the hardest parts of tackling each of those components was aiming for a simple, single solution that would work on the multiple background colors throughout the product.

Example of redesigned form field components to address default, focus, and error states on white and gray background colors.

Links

Links should be clearly identifiable. If you place an underline beneath the link copy, the compliance requirements are much simpler. However, amongst our design team, there were some who opposed the visual look of this treatment. I explored many alternatives, but ultimately the underline on default was selected due to its simplicity and ability for us to continue using our established interactive colors.

While I was working on this, the main app (CertCentral) began adopting the styles of a new product with a different design system. Unfortunately, the links in that design system were not yet passing accessibility standards either, so I created a proposal and worked to get buy-off from two design teams to land on a solution that would work for both products. The compromise that lead to an alignment between the two products was to eliminate the active state for links in our products. While this is a little unusual, our user bases visit our products infrequently (usage data showed a few times a year for the majority of customers) so the need to display visited states was difficult to justify.

The final link proposal avoids introducing new colors, meets the 3:1 contrast requirements with both of the main non-link text font colors and on the products’ white, gray, and dark backgrounds.

Impact

 

  • All five of the Voluntary Product Assessment Template (VPAT) critical priority issues and 50% of the high priority issues have been improved or resolved

  • Accessibility improvements help protect the business against potential threats of legal action, deliver on our brand promise, and provide sales teams with increasing value to present to customers for whom accessibility is a key factor when selecting products.

  • Accessibility is now part of the product development process. UXD has training and a checklist to incorporate accessibility into the design and peer review process, and PMs and engineers consider accessibility in implementation and QA/testing processes.

  • I deepened my knowledge about accessibility in design and research through ongoing professional development (completed WebAim’s July 2021 training) and participating in A11y communities.

Learnings

 

  • Focus on the principles of accessibility over the prescriptions of WCAG. For example, disabled text doesn’t have a compliance requirement in the WCAG AA 2.1 guidelines (which are the most current guidelines at press-time), but that doesn’t mean a light contrast treatment should be considered accessible because it wouldn’t adhere to the “perceivable” principle that WCAG is based upon.