Embedding Accessibility into UX Workflows

Optimized a 2-checkpoint design review process by 30% and scaled to 6 product teams for shifting accessibility left in the software development lifecycle

3 flowcharts and an accessibility guidelines document

  • TEAM

    UX Design—
    Accessibility

  • ROLE

    Accessibility Analyst

  • COLLABORATORS

    3 UX Designers
    3 Front-end Developers
    1 Accessibility SME
    1 Accessibility Product Owner

  • DURATION

    12 Weeks

Embedding Accessibility into UX Workflows

Optimized a 2-checkpoint design review process by 30% and scaled to 6 product teams for shifting accessibility left in the software development lifecycle

3 flowcharts and an accessibility guidelines document

  • TEAM

    UX Design—
    Accessibility

  • ROLE

    Accessibility Analyst

  • COLLABORATORS

    UX Designers
    Front-end Developers
    Accessibility SME
    Accessibility PO

  • DURATION

    12 Weeks

Project overview

A design review involves the analysis of a design against WCAG accessibility, providing designers with actionable feedback to make their designs accessible

A design review involves the analysis of a design against WCAG accessibility, providing designers with actionable feedback to make their designs accessible

design review of a mobile screen with accessibility annotations in Figma for feedback

My role and contribution

As the Accessibility Analyst and project owner, I led discovery of the problem space and created a 2-part review process spanning design and development


  • Conducted 4 designer interviews

  • Aligned UX & Accessibility teams by creating 3 process flowcharts

  • Collaborated with 1 PO, 1 accessibility SME, 3 devs, and 3 designers

As the Accessibility Analyst and project owner, I led discovery of the problem space and created a 2-part review process spanning design and development


  • Conducted 4 designer interviews

  • Aligned UX & Accessibility teams by creating 3 process flowcharts

  • Collaborated with 1 PO, 1 accessibility SME, 3 devs, and 3 designers

Outcomes

  • Adopted by 6 product teams standardizing accessibility compliance

  • Achieved 20% growth in compliance

  • Optimized UX and Accessibility touch points by 30%

Problem

Fixing accessibility issues in production is 15x more expensive than addressing it during design

This cost compounds as a product reaches development, QA, and post-production. Yet, the UX Design team relied on these downstream teams for remediation. I led research to find out why this happens

This cost compounds as a product reaches development, QA, and post-production. Yet, the UX Design team relied on these downstream teams for remediation. I led research to find out why this happens

Research

I conducted 4 designer interviews

My primary goal was to understand any current or perceived challenges with accessibility in their design process

My primary goal was to understand any current or perceived challenges with accessibility in their design process

"I don't know when to rope the Accessibility team in"

"The culture is very fast which leaves little buffer time"

"Guidelines would help us know we are heading the right direction"

"Sometimes the turnaround for reviews is long"

"Guidelines would help us know we are heading the right direction"

"Sometimes the turnaround for reviews is long"

Takeaways:

  1. Designers were unsure when to engage A11y throughout their workflow

  2. Lack of shared guidelines created uncertainty about the accessibility of their design choices

  3. Adding another step to their process created a perceived risk of missing tight deadlines

  1. Designers were unsure when to engage A11y throughout their workflow

  2. Lack of shared guidelines created uncertainty about the accessibility of their design choices

  3. Adding another step to their process created a perceived risk of missing tight deadlines

Strategy

Embed accessibility as a parallel partner in the UX lifecycle

The review process must support:

The review process must support:

Speed

Prevent bottlenecks in the designers' timelines

Clarity

Provide clear touch points between UX and Accessibility

Scalability

Be repeatable for small and large-scope design work

Speed

Prevent bottlenecks in the designers' timelines

Clarity

Provide clear touch points between UX and Accessibility

Scalability

Be repeatable for small and large-scope design work

Solution

2 check-point design review process at the midpoint and handoff phase of design

Checkpoint 1

Midpoint Design Review

When

IA Approved (design 60% complete)

Focus area

  • Content heirarchy

  • Color contrast

  • Interaction patterns

Checkpoint 2

Engineering Review

When

Final PO and stakeholder approval (design 90% complete)

Focus area

  • Landmarks

  • Focus order

  • ARIA labels

Checkpoint 1

Midpoint Design Review

When

IA Approved (design 60% complete)

Focus area

  • Content heirarchy

  • Color contrast

  • Interaction patterns

Checkpoint 2

Engineering Review

When

Final PO and stakeholder approval (design 90% complete)

Focus area

  • Landmarks

  • Focus order

  • ARIA labels

01 Increasing timeline clarity

3 process flowcharts

I mapped design review checkpoints from ideation to handoff, aligning 3 UX team leads with explicit clarity on the right times for a design review. These flowcharts initiated design reviews for 6 products

I mapped design review checkpoints from ideation to handoff, aligning 3 UX team leads with explicit clarity on the right times for a design review. These flowcharts initiated design reviews for 6 products

flowchart of design exploration stage
flowchart of wireframing stage
process flowchart representing the developer handoff stage

02 Clarifying expectations

Centralized guidelines for inclusive design

I designed a source of accessibility requirements that defines what is required vs negotiable for designers to achieve

I designed a source of accessibility requirements that defines what is required vs negotiable for designers to achieve

5 pages of accessibility requirements

03 Improving scalability

Supported reviews for 3 types of design projects

Coverage for these main types of design projects ensures they receive the right level of accessibility focus and support

Coverage for these main types of design projects ensures they receive the right level of accessibility focus and support

Component

A micro-level review of a custom UI element

Interaction pattern

Review on a complex, isolated user behavior

Scoped Flow

Macro-level review of a complete, multi-page user journey

Key decisions

Solution rationales

An engineering review during handoff is necessary

When I began problem-solving, my scope was within UX ideation and prototyping. Feedback from the PO and SME challenged me to broaden to the handoff phase

When I began problem-solving, my scope was within UX ideation and prototyping. Feedback from the PO and SME challenged me to broaden to the handoff phase

If accessibility semantics are not defined, developers must infer them. Engineering reviews ensure accessible design intent is documented for proper implementation

60% → 90%

Design accessibility coverage from midpoint design to final handoff

Narrowing 3 design review checkpoints down to 1

Sequencing 1 design review at the midpoint (60% complete) after product team approval makes accessibility feedback address a validated direction, preventing wasted effort and time

Sequencing 1 design review at the midpoint (60% complete) after product team approval makes accessibility feedback address a validated direction, preventing wasted effort and time

Annotations over templates for review feedback

2 pilot reviews revealed my original design review template to document feedback created more work when the easiest way was Figma's annotations. I pivoted, while the team re-used my template for their screen reader review project

2 pilot reviews revealed my original design review template to document feedback created more work when the easiest way was Figma's annotations. I pivoted, while the team re-used my template for their screen reader review project

Accessibility consultations

Early designs (<50% complete) receive support via consultations to maximize ux decision-making in ideation, while the accessibility team focuses on midpoint and handoff reviews where they have the highest impact

Early designs (<50% complete) receive support via consultations to maximize ux decision-making in ideation, while the accessibility team focuses on midpoint and handoff reviews where they have the highest impact

30%

Workflow optimization between Accessibility and UX team collaboration touch points

Testimontals

What teammates have said about my project

"I'd like to recognize Ally Garcia for digging into the world of UX design reviews. This is an amazing step for our team as we work to achieve our goals. Ally brings her passion, creativity, and ability to ask the right questions every day as she discovers what this process will look like in the future."

Product Owner III, Accessibility Team

"Great job presenting your flowcharts! I am impressed (yet unsurprised) by your level of detail that went into making these."

Front-end Developer, Accessibility Team

Learnings

Following this project, I learned 3 valuable lessons

Think for scalability

Working with a team of 30+ designers required me to think beyond a framework in isolation. Decisions must be justified for scalability and enablement

Be comfortable in ambiguity

Building a team-wide framework from the ground up required me to break down the problem, ask many questions, and gather lots of feedback

Build cross-functional partnerships

Collaborating with designers and developers taught me how to balance technical constraints, business goals, and user needs

Back to top

More case studies

Check out another project

UI design panel displaying buttons, text, images, and chips

Accessible Design System

Increased WCAG 2.2 AA compliance of 12 most used components by 25%

Mortgage Industry Project

Design Systems

compilation of project info including analyzing data, 4 insights, and 5 interviews

Asset Health

Delivered 2 data-driven client recommendations through user research

UX Research