Microsoft Fluent 2 accessibility toolkit
Making annotating accessibility requirements easy for every designer at Microsoft.
Annotating accessibility requirements poses many different barriers for designers of all levels. I embarked on a company wide journey to revamp the existing methodologies and help teams create more inclusive digital experiences.
My role:
Lead product designer
My team:
Formed a horizontal team spanning multiple organizations at Microsoft consisting of 6 of the best subject matter experts.
TL;DR - Impact
80% faster turn around times for small to medium sized features.
The new annotations toolkit was adopted by the company’s design system, Fluent, and now serves every designer at Microsoft.
Microsoft Fluent 2 accessibility toolkit is public and a Focus Order Figma plug-in was created for it, serving 25k monthly active users.
Designers were facing many challenges
Previous annotation methodologies rely on ARIA markup. ARIA markup is not something most designers are familiar with.
Figma guidelines and real coded component often differ on accessibility implementation and designers don’t know how to reconcile these differences.
Previous methodologies asked designers to repeat redundant information that added little value. Making the process of annotating tedious, long, and uninviting.
Without proper training but free license, designers were adding unnecessary accessibility features that lead to, you guessed it, more accessibility bugs.
Solutions
Mark each component by name and link to design library
Don’t repeat focus order of standard components.
Only provide names or screen reader labels for interactive elements without visible text.
Guidelines for reflow and responsive design.
