Accessibility Design Strategy

Prometric Review Portal

Overview

Project Brief

The Problem

Prometric contracted with LevelAccess, a company that specializes in accessibility compliance, to conduct an accessibility audit. Prometric was found to be out of compliance in several areas.

The Goal

We needed to not only bring them up to standards but to create a foundation for building accessible products moving forward. 

Responsibilities

Design strategist, UX/UI designer, cross functional collaboration, wire-framing, research

Tools

Figma, Stark, Azure

The Process

When tackling accessibility, I generally recommend an evaluative approach because it provides businesses with a detailed snapshot of how design and software components are being applied across and within their products.

When embarking on an audit, it is best to scope the project based on business goals. The following can be used as a starting point for creating the framework of your audit.

• Accessibility - Is the product WCAG compliant? Is it screen-reader accessible? etc.

• Survey of software components in use

• Internal and/or cross-product inconsistencies 

• Brand consistency (typography, color, logo usage, etc.)

Once the scope of the audit had been defined, I considered any limitations our team may be confronting:

• Resourcing - do we have enough hands to do the job?

• Timeline - how quickly did the  team/business need the results of the audit?

• Scope - What are the defined parameters of the audit? What is the audit specifically intended to accomplish for the business.

We recognize that conducting a design audit can be a heavy lift for smaller teams, especially when auditing multiple products. Therefore we recommended an incremental approach that could be conducted either via

• Individual Evaluation - Whereby each of a company's products is evaluated separately, based on a selection of the above criteria.

• Cross-cutting Evaluation - Whereby all of a company's products are evaluated based on one criteria (e.g. accessibility) to allow for comparison.

Initially we began with the cross-cutting evaluation. First, we created a Miro board and began to look at all of the products in the client’s ecosystem. We did this by conducting a design audit based on the principles of atomic-design. For example, we gathered screens from each product and then began to capture the atoms and their behaviors. We did this in an effort to have a good idea of what each application possessed. 

Then the client’s Lead UX designer decided to use the current product that we were building as the baseline. That product was going to be an internal enterprise app for security reviews of sessions that were escalated by a proctor. The app was essentially a table with a wide range of components including input fields, tables, tags and more. So together we decided that it was a good place to start. 

To begin our efforts, we wanted to start off with a new design system. A design system is components, patterns, styles and guidelines, which can help operationalize and optimize design efforts. The design system would be managed and implemented by people.

This meant getting everyone onboard: designers, product owners and developers. 

Designers: 

So the first step was of course to design the UI. However, in order to create an accessible experience we need to consider it with both the visual design and interactions. Some considerations visually would be: 

• Provide sufficient contrast between foreground and background

• Don’t use color alone to convey information

• Ensure that interactive elements are easy to identify

• Provide clear and consistent navigation options

• Ensure that form elements include clearly associated labels

• Provide easily identifiable feedback

• Use headings and spacing to group related content

• Create designs for different viewport sizes

• Include image and media alternatives in your design

• Provide controls for content that starts automatically

I will break down how I tackled these items using visual affordances, interactions and just designing with usability in mind

Here is a closer look at how regions, tab order and screen reader annotations are highlighted

Accessibility with Usability in Mind

• Ensure that form elements include clearly associated labels

• Use headings and spacing to group related content

• Create designs for different viewport sizes

In order to address these I did things like:

• Ensures that form elements include clearly associated labels

• Made sure that labels are always visible and in close proximity to the associated component

• Used headings and spacing to group related content

• Created designs for different viewport sizes

  • This ensures that no information is lost when the screen size changes

  • Considered responsiveness

• Considered font sizing 

Product Owner

In order to integrate the product team into the process, we worked to come up with a baseline story template which takes into consideration accessibility requirements. 

We also included a checklist under Objectives to detail to developers and QAs what the acceptance criteria are. 

We also worked with the Product owners to come up with a roadmap that made sense for how to approach accessibility. This helped to make it easier to understand when to incorporate stories into the sprint. 

Developers

In terms of developers, integrating accessibility meant adequate annotations and lots of pairing which I encourage on all of the teams I’ve worked on. When a developer picked up a story card, it was up to myself as a Designer to ensure that they were aware of the design direction and accessibility requirements. Other things that worked were having team meetings for knowledge transfer to ensure that developers knew how to interpret the annotations and story cards before kickoffs.

What have you learned from this project?

This particular project was the first where there was a specific focus on accessibility. In my other projects, I would find ways to integrate accessibility into the process incrementally. However, in this case I had the chance to be very strategic about the approach from an holistic perspective.

The challenge for me was determining how to approach this massive array of product that were all so different and needed alignment. Starting small to focus on one product then expanding outward was a great lesson for me because then we aren't overwhelmed by everything that needed to be done.