Screenshot from the design audit
Accessibility Design Strategy
Prometric Review Portal
My Role
Senior UX/UI
Team Composition
2 Senior UX/UI Designers, 1 UX Researcher, 1 Product Manager, 7 Developer pairs, 2 QAs
Skills and Tools
Figma, Stark, Azure, Miro, Accessibility, Mobile Design, Prototyping
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

Contrast plugin
Accessibility through visual affordances
Provide sufficient contrast between foreground and background
I decided to use a plugin on Figma called Contrast. This tool analyzes individual components or components within a frame to ensure that it meets WCAG contrast standards.

Stark plugin
Don’t use color alone to convey information
The concern with this is color blindness. When using color, I wanted to make sure that users could in fact differentiate between the different uses of color. I did this by utilizing Stark, a well known product for assessing colorblindness. It provides visual simulations for color-blindness and other visual impairments.

Screenshot of an annotated wireframe
Accessibility through interactions
Ensure that interactive elements are easy to identify
Provide clear and consistent navigation options
Provide easily identifiable feedback
Include image and media alternatives in your design
Provide controls for content that starts automatically
In order to address these, I added accessibility annotations to the designs:
Tab/Focus Order
Outlines the visual flow of the page when a user is using a keyboard
Images
Identifies page images and prompts developers to add alt text for identification
Landmarks
Identifies the areas on a page to help with navigation for users that have screen readers
Focus States
Informs developers about what should happen as users interact with components
Here is a closer look at how regions, tab order and screen reader annotations are highlighted

Screenshot from Figma showing screenreader annotations

Highlighted wireframe to show annotations
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.

Screenshot from a user story that was created around accessibility
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.