Turning accessibility from a product afterthought into a built-in property of how Facebook's design system ships, across five years, 400+ components, and a global user base of billions.
Role
Staff Product Designer, Accessibility
Timeline
2020 – 2026
Apps
Facebook, Instagram, Messenger, WhatsApp
Scope
Accessibility, Design Systems, Cross-platform
When I joined the Facebook design system team, it was powering experiences for billions of people, but its accessibility was weak. That left product teams to handle most of the accessibility work (WCAG AA) on their own, producing uneven experiences at a global scale, with an outsized impact on people with disabilities. I led the multi-year effort to close that gap by fixing accessibility once, in the components and primitives everyone already used, rather than product by product.
Impact at a glance
Coverage
Took the library from a minority of components meeting accessibility standards to nearly all of them, on every framework.
Process
Made accessibility a launch requirement in the system's definition of done, then used component adoption goals to spread it across the app.
Business
Shipped accessibility fixes to the production app that also lifted core engagement.
Scale
Trained the design system's own designers to own accessibility, so the work no longer ran through me.
The arc
I took this from an idea to an owned practice in four phases: identify the gap, operationalize it, drive the numbers, then make it stick. First I built an accessibility source of truth for the component library. Then I set up the process and secured the leadership mandate to make it routine. From there I drove up compliance and proved the business case. Finally, I made the practice durable enough to run without me.
Before
Built by each product
FeedAccessibility
ProfileAccessibility
AdsAccessibility
ReelsAccessibility
StoriesAccessibility
MarketplaceAccessibility
DatingAccessibility
GroupsAccessibility
The arc
Process to scaling
●
1
Identify the gap
Establish source of truth for the library
●
2
Operationalize
Establish process and launch requirement
●
3
Drive the numbers
Deliver on compliance and business case
●
4
Institutionalize
Hand ownership to design system team
After
Built once at the source
Feed
Profile
Ads
Reels
Stories
Marketplace
Dating
Groups
Facebook Design System
Accessibility
Each product surface handled accessibility on its own. Four phases moved the work into the design system; quality and adoption did the rest.
Five years, on a timeline
Select a year to see what shipped and which phase of the arc it belonged to.
Identify
2020 · Found the gap
Discovered that the core component library had no accessibility spec, and initiated the first source of truth for how components should behave when used with a screen reader.
Operationalize
2021 · Built the model
Established the accessibility partnership model with the design-system teams, and shipped the first accessible components alongside reusable design guides.
Operationalize
2022 · Made it a requirement
Carried the model into the next-generation design system and earned leadership backing to make accessibility a launch requirement, not an afterthought. Expanded accessibility focus to cover all WCAG AA requirements.
Drive
2023 · Moved the numbers
Compliance climbed from a small minority toward the majority of components, and the first app-wide accessibility solutions shipped, several of which also increased engagement.
Drive
2024 · Scaled the ownership
Pushed compliance to the overwhelming majority across frameworks and began transferring day-to-day ownership to the system's own designers.
Institutionalize
2025 · Made it permanent
Reached readiness ahead of the European Accessibility Act, authored the continuous-compliance plan, co-built a company-wide maturity framework, and reframed accessibility as a growth lever.
01Earning leadership buy-in
For years, accessibility lived at the end of the process, a best-effort pass after the real decisions were made, and the first thing cut when timelines tightened. The opportunity was to move it from optional to mandatory. I worked to secure leadership backing to make accessibility a requirement for component launch, writing it into the definition of done so it couldn't be skipped. Later I made the case in leadership's own language of product performance, showing that accessibility improvements also benefited the broader product, which shifted the conversation from "accessibility as compliance" to "accessibility as a growth lever."
ImpactAccessibility became a required, leadership-backed step in shipping any component, and the organization's narrative around it shifted from cost to investment.
02Building a process teams could own
Fixing a set of components is finite work; keeping a living, constantly growing system accessible is not. The opportunity was to make accessibility a routine the teams could run themselves, rather than a gate I personally manned. Instead of bolting on a separate review, I built accessibility into every stage of the component development process the design system and product teams already ran, from the first audit to the final experiment. I documented the standard so a designer facing an accessibility decision had an answer without having to find me.
Component development process
Accessibility integrated at all stages
AuditDocument existing accessibility patterns
SpecSpecify required accessibility criteria
CritGather feedback from the team and accessibility specialist
ReviewReview final design with leads: design, engineering, accessibility
BuildResolve accessibility questions during build
DogfoodTest required accessibility criteria
ExperimentMonitor for accessibility regressions as it ships
Accessibility is built into every stage of the component development process, from the first audit to the final experiment, so teams run it as part of their existing workflow.
Three kinds of component work
Content preview
New to the library
Spec
Process
Adopting system components sometimes meant building brand-new ones for the library. We ran each through the full spec process, in collaboration with the product team.
Impact
These new components were tested against the teams' existing versions, where the accessibility and quality gains often moved core metrics.
Selection Cell
New variant
Base
Variant
Process
Product teams often overrode components to build their own variants. When a variant could serve multiple products or use cases, we added it to the library and ran it through the full spec process.
Impact
These higher-quality system variants replaced the one-off team versions, carrying the accessibility and quality gains into every surface that adopted them.
Icons on media
Quality remediation
Before
After
Process
Existing library components carried their own quality issues. We prioritized remediation, addressing the highest value components first.
Impact
These quality fixes scaled across the system, reaching every call site of the component in the app.
ImpactAccessibility moved from one-off quality fixes to a standing step in how components are designed, reviewed, and shipped, now repeatable across teams and no longer dependent on me. Cross-functional partners on the design system started to become accessibility advocates for the system and across Facebook.
03Accessibility as a growth lever
Accessibility's biggest enemy wasn't disagreement. It was the quiet assumption that it's a cost center: worth doing, but not the highest priority. The opportunity was to disprove that with product data. Several accessibility changes shipped to the production app increased core metrics rather than trading against them, from the video player and reactions to interactive text, the tab bar, and the story ring. A fix built for a permanent disability also clears the way for temporary and situational ones, so designing for the few made the product measurably better for everyone. I packaged these into recurring "impact of accessibility" reports that made the case example by example.
Changes that moved core metrics
Solve for one, extend to many
Wondering how accessibility moves metrics? Experiences designed for permanent disabilities scale to temporary and situational ones, which creates impact for everyone.
Video Player
Before
After
Problem
Base text and icon components were not passing contrast on media.
Solution
Added strokes and shadows at the primitive level to the on-media variants of text and icons.
Metric impact
Boosted core metrics.
Scaled outcome
Supports people with low vision to see the controls, and the general population, situationally, in bright light.
Reactions
Before
After
Problem
The reaction visuals were low contrast in the areas that carry meaning, which made each one hard to tell apart, especially at smaller sizes.
Solution
Raised contrast on the parts of each reaction that carry meaning, so they stay legible and easy to recognize.
Metric impact
No negative impact to core metrics.
Scaled outcome
Supports people with low vision and color blindness to recognize and select reactions, and the general population, situationally, in bright light or at small sizes.
Interactive text
Before
After
Problem
Interactive text relied on color alone to set it apart from regular text, leaving people with color blindness no way to tell the two apart.
Solution
Bolded interactive text so weight, not color alone, signals that it's interactive.
Metric impact
Boosted core metrics.
Scaled outcome
Supports people with low vision and color blindness to identify and interact with links, and the general population, situationally, in bright light.
Tab Bar
Before
After
Problem
The selected-state icon in the tab bar measured too low a contrast against its background, making the active tab hard to see.
Solution
Increased selected-state contrast so the active tab is easy to see.
Metric impact
Boosted core metrics.
Scaled outcome
Supports people with low vision to tell the selected tab from the rest, and the general population, situationally, in bright light.
Story Ring
Before
After
Problem
The seen and unseen states were set apart by color alone, leaving people with color blindness no way to tell them apart. The seen ring was also low contrast and hard to see against card backgrounds.
Solution
Reduced the seen ring's stroke weight so thickness, not color, marks the seen state, and raised its contrast to maintain visibility against any background.
Metric impact
No negative impact to core metrics.
Scaled outcome
Supports people with low vision and color blindness to tell the seen and unseen states apart, and the general population, situationally, in bright light.
ImpactAccessibility was reframed company-wide from a compliance program into a measurable growth lever, with senior leadership amplifying the case.
04Scaling myself out
The opportunity here was also the risk: on a system far too large for one person, I could easily have become the single point of failure for accessibility. The senior move was to make myself unnecessary. I trained the design system's own designers to own accessibility, mentored designers across the company, and deliberately transitioned issue ownership from my team to the product and system teams, moving from owning the work to supporting it. To scale past a single system, I co-built an accessibility maturity framework in partnership with central teams that let cross-company design systems assess and improve on their own.
Dependent system
Every fix depended on my involvement
ImpactThe system's own designers could deliver accessible components confidently without me in the loop, and the practice extended to design systems across the company.
Program impact
01
Most accessible system at Meta
The Facebook design system, a 400+ component library, became the largest and most accessible at the company.
02
Accessibility shifted left Facebook-wide
Quality moved from a final-pass cleanup to a built-in standard, leveling up the entire Facebook design organization.
03
Met regulatory deadline
The system met the European Accessibility Act's requirements by its compliance deadline.
Reflection
Five years on one problem, at this scale, seems like a lot. And it was. It changed how I think about building products.
Three lessons stuck. At this scale, quality is won or lost in the system, not the screen, so the only fixes that hold are the ones you push upstream, into the components and the definition of done. A quality investment only survives when it's framed in the language the business already uses: don't ask the company to value what you value; show how it advances what they already measure. And the most senior thing I did was make myself unnecessary, handing the work to the people and frameworks that could carry it without me.
If I had to compress it to one principle for building at this size: invest in what produces the outcomes, not the outcomes themselves. The component quality and the metrics were the visible results. The real work was leaving behind a design system, and a team to carry it, that treat accessibility as their own. And the part I'm proudest of is what our investment produced: an app used by billions, and the design system beneath it, that is meaningfully more accessible for the people of all abilities.