Designing For Accessibility Transamerica Components Case Study
Client: Transamerica
Role: Senior UX/UI Designer
Tools: Sketch, InVision, Zeplin, Abstract
Background
During the process of auditing transamerica.com for my work on the design system, I discovered that a majority of the pages were not accessible. The code structure is not legible by screen readers, the navigation was not usable only via keyboard, and the website failed in many color contrast tests, among other problems.
Accessible Design Processes
Design systems are integral to supporting company-wide accessibility efforts, as one set of designs and code can help entire teams across different products. Ensuring that these designs are accessible and scalable is highly valuable and reduces organizational costs. Transamerica designers are striving for Level AA conformance. The WCAG do not recommended Level AAA conformance as a general policy requirement for entire sites because it is not possible to satisfy all Level AAA success criteria for some content.
I created a list of high impact items based on the Web Accessibility Initiatives “Easy Checks” guidelines. I also generated guidelines for the design of the new components to be created for the Transamerica design system. One of the biggest challenges was to create components that respect the best practices on heading structure, yet provide enough flexibility to be reused in multiple instances on different products.
I decided to tackle the heading structure on a component-by-component basis, with only a few universal rules. This approach allowed enough flexibility inside each component. The only drawback to this approach is that designers and the content team need to have the rules of each component in mind while designing pages for transamerica.com.
After this, I moved on to the contrast ratio. Some people cannot read text if there is not sufficient contrast between the text and background. For example, a light gray text on a light background can be indistinguishable for a colorblind or low vision individual.
This is really important for Transamerica. The various products have so much information, and I need to assure that this information is easily accessible to all users. I decided to create a table of all possible color combinations within Transamerica and whether they pass or fail Level AA and Level AAA contrast ratio success criteria.
I outlined some principles for the design of the components as I won't be the only designer to create components for the design system.
Clear
The components need to be clear and to help users navigate. We achieve this by designing clear layouts with distinct calls to action.
Robust
The components always accommodate a variety of users.
Specific
The componentes always support assistive technologies and the input methods of touch, keyboard, and mouse.
Ordered
The components always have a clear visual hierarchy with the input focus in mind. Information is presented from the most important to the least important item.
To help determine the focus points and movements, always consider:
The order in which elements receive focus
The way in which elements are grouped
Where focus shifts when the original focus element disappears
Finally, make sure that focus points are expressed through visual indicators and accessibility text.
With the initial audit and recommendations in place, I started the process of designing the new components. First, I started with hand-drawn sketches, which after several iterations, I turned into wireframes. This helped me establish a clear visual hierarchy and structure.
After wireframing, I created high fidelity mockups of the components and presented them to the design team and internal stakeholders. After several rounds of this feedback and review process, I had refined the final product and ensured that these new components satisfied all the needs of the different teams that will use them in the future.
As we begin to roll them out on Transamerica.com in 2020, we continue to test, improve and iterate upon these new components.
It’s very easy to get bogged down by accessible output and to forget that, ultimately, accessibility is about people. We all have responsibilities, not only to our profession as UX designers but also to our users and society to design accessible digital solutions. The most important role of a UX designer is to always have people in mind.
