Profiel: de designer die toegankelijkheid uitbracht op een product met 200 miljoen gebruikers

Afbeeldingsomschrijving: een designer aan een staand bureau, van achteren gezien, twee monitoren tonen een design-system componentenbibliotheek met focusstatussen — het visuele kenmerk voor het profiel van de designer op grote schaal.

Leestijd: 10 minuten

Redactionele noot. De hier geprofileerde designer is een compositiepersoon. “Maya Okafor” is geen echte persoon; de biografie is samengesteld uit interviews met vijf senior toegankelijkheids-designleads die tussen 2019 en 2025 meerkwartaalse toegankelijkheidsprogramma’s leidden bij consumenteninternetbedrijven met gebruikersbestanden in het bereik van circa 80 tot 300 miljoen. Elk getal, elk artefact, elke mislukking in de tijdlijn hieronder is echt en afkomstig van een van de vijf beoefenaars; de synthese — de boog van één carrière door één programma — is de redactionele vrijheid.

Het product is ook gecamoufleerd. Wat men precies noemt is de schaal (circa 200 miljoen maandelijkse actieve gebruikers aan het begin, circa 240 miljoen aan het einde), de stack (een React-en-TypeScript front-end met native iOS- en Android-apps die dezelfde designtaal delen), en het design-system oppervlak dat Maya erfde (circa 410 componenten, waarvan circa 90 “primair”). Dat zijn de variabelen die de moeilijkheidsgraad van de klus bepalen.

De maandag dat ze binnenstapte

Maya Okafor trad op een regenachtige maandag eind januari 2022 in dienst als Staff Product Designer bij het Design Systems-team. Ze was vierendertig. Ze had de voorgaande zes jaar doorgebracht bij de digitale tak van een grote uitgever, waar ze — bijna bij toeval — degene was geworden die wist hoe een focusring eruit moest zien en waarom de door het merk voorgeschreven contrastverhouding van 2,6:1 op tertiaire knoppen in feite niet acceptabel was. Ze had geen formele toegankelijkheidskwalificaties. Ze zei altijd dat ze alles op de harde manier had geleerd: door de designer te zijn op het gesprek wanneer een schermlezer-gebruiker een ondersteuningsticket indiende en niemand anders wist hoe het probleem te reproduceren.

Er was geen toegankelijkheidsmandaat bij het nieuwe bedrijf. Er was geen toegankelijkheidsteam. Er was een Toegankelijkheids-werkgroep, die elke twee woensdagen om 16.00 uur Pacific bijeenkwam en die op Maya’s eerste woensdag zes deelnemers had. Hij had een Confluence-pagina die voor het laatste in 2020 was bijgewerkt, een Slack-kanaal met circa 140 leden en drie berichten per week, en — Maya realiseerde zich dit later — precies één stuk hefboom: een achterstand van eenenveertig openstaande toegankelijkheidsgerelateerde ondersteuningstickets, waarvan zeven van een enkele organisatie voor gehandicaptenrechten die het bedrijf elk kwartaal had gemaild sinds 2019.

”Het eerste dat ik deed was elk van die eenenveertig tickets lezen. Het tweede dat ik deed was ze uitprinten en in een map stoppen. Niet omdat iemand een map nodig had — maar omdat ik een fysiek object nodig had om op de tafel van een VP te leggen drie maanden later wanneer het gesprek moeilijk zou worden.”

Maya Okafor, compositiepersoon, over haar eerste maand

De onderbouwing: klachtvolume, juridisch risico, marktaandeel

De eerste drie maanden waren geen designwerk. Het was forensisch werk. Maya deed drie dingen parallel.

Ze kwantificeerde de klachtenpijplijn. Samen met Support haalde ze elk ticket op uit de vorige vierentwintig maanden dat een van een tiental markeringstermen bevatte — “schermlezer”, “VoiceOver”, “TalkBack”, “JAWS”, “NVDA”, “contrast”, “alleen toetsenbord”, “WCAG”, “ADA”, “EAA”, “ik kan het niet lezen”. Ze vond circa 1.470 afzonderlijke klachten, waarvan circa 280 langer dan negentig dagen onopgelost waren. Ze bracht ze in kaart op productoppervlakken: circa 38 procent op checkout, circa 22 procent op berichten, circa 14 procent op profielaanmaak, circa 9 procent op de videospeler. Die verdeling zou zes maanden later bepalen welke componenten als eerste werden herschreven.

Ze kwantificeerde het juridisch risico. Het bedrijf was in de voorgaande achttien maanden twee keer aangeklaagd in ADA Title III-rechtszaken, beide geschikt. Maya kon de schikkingsbedragen niet zien — Juridisch zou ze niet aan haar geven — maar ze kon de litigatiefrequentiecurve zien in het openbare dossier voor haar sector. Ze bouwde een spreadsheet die het risico-oppervlak van het bedrijf verwerkte en een bereikschatting produceerde van de verwachte jaarlijkse schikkings-plus-herstelkosten bij een doe-niets-traject. Het middelpunt van dat bereik lag op enkele miljoenen dollars per jaar.

Ze kwantificeerde de marktkans. Dit was de regel die de kamer in beweging zette. Maya vulde de gebruikersonderzoeksgegevens van het bedrijf aan met de WebAIM-schermlezergebruikersonderzoek, de CDC-gehandicaptenstatistieken en Eurostat-cijfers over de prevalentie van beperkingen voor de EU-markten die het product bediende. Ze produceerde één slide: van de circa 200 miljoen maandelijkse gebruikers van het bedrijf werd geschat dat er tussen de 14 en 22 miljoen het product gebruikten met enige vorm van hulptechnologie of niet-standaard instellingen. Analytics toonde aan dat dit segment met circa 1,8 maal het gemiddelde churnde ten opzichte van het totale bestand. Als de retentie van dit segment op peil kon worden gebracht, was de netto jaarlijkse omzetimpact een getal dat Financiën erkende.

”Ik heb het getal van Juridisch nooit aan Marketing laten zien, en het getal van Marketing nooit aan Juridisch. Aan elk van hen liet ik het getal zien dat voor hen relevant was. Aan de CFO liet ik beide zien, op één slide, naast elkaar. Dat was de vergadering waarbij het programma werd gefinancierd.”

Maya Okafor, compositiepersoon, over de financieringsonderbouwing

Het programma werd eind Q2 2022 goedgekeurd. Personeelsbezetting: zeven, oplopend tot elf over twaalf maanden — drie designers, vier engineers, twee QA-specialisten, één programmamanager, één onderzoeker met recruteringservaring in de gemeenschap van mensen met een beperking. Budget voor externe testpartnerschappen: een zes-cijferige jaarlijkse lijn. Autoriteit: goedkeuring van elk nieuw design-system component, met vetorecht over componenten die een toegankelijkheidscontrolelijst niet haalden. Die laatste clausule — het veto — was de clausule waarover Maya het hardst had onderhandeld. Het was het verschil tussen een programma en een oefening in toestemming vragen.

De design-system revisie: tokens, focus, beweging

Het technische werk begon in Q3 2022 en liep de volgende veertien maanden. Maya structureerde het in drie tranches, die ze — in slides en in standups — Fundamenten, Componenten, Patronen noemde. De discipline van die volgorde, zei ze vaak, was de belangrijkste architecturale beslissing van het programma.

Tranche 1 — Fundamenten

De eerste zes maanden herbouwden de design-tokens. Het erfgoedsysteem had circa 84 kleurtokens zonder semantische naamgeving — “Blauw/600”, “Grijs/400”, “Merk/Primair” — en geen contrastmetadata. Maya’s team verving ze door een semantisch palet van circa 40 tokens georganiseerd op functie: content-primary, content-secondary, surface-base, border-default, plus een interactieve ladder (action-primary, action-primary-hover, action-primary-pressed) en een statusladder. Elk token bevatte in zijn metadata de contrastverhouding ten opzichte van het oppervlak waarvoor het was goedgekeurd, en een markering voor welk WCAG-conformiteitsniveau het haalde. De tooling handhaafde dit: een designer kon content-tertiary niet op surface-base plaatsen in Figma zonder dat de linter dit markeerde.

Dezelfde tranche standaardiseerde de focusring. De erfgoedcomponenten hadden — Maya telde — circa zeventien verschillende focusring-behandelingen, variërend van een 1-pixel gestippelde omtrek die verdween op lichte achtergronden tot een 2-pixel solide blauwe ring die de lay-out brak op strak opeengepakte lijsten. De nieuwe ring was een enkel token: een 2-pixel omtrek met een 2-pixel transparante tussenruimte van de componentrand, zodat de ring leesbaar was op elk oppervlak. Elke interactieve component nam hem standaard over; er was geen opt-out.

Bewegingsvoorkeuren waren de derde grondslag. Het erfgoedsysteem respecteerde prefers-reduced-motion op circa één plek — één onboardinganimatie — en de native apps respecteerden het nergens. De nieuwe grondslag maakte beweging een token, met drie waarden (geen, verminderd, volledig) doorgevoerd door elke animatieprimitive. Een designer die de voorkeur probeerde te overschrijven, moest een schriftelijke rechtvaardiging bijvoegen die de programmalead beoordeelde.

Tranche 2 — Componenten

Met de fundamenten stabiel richtte het team zich op de circa 90 primaire componenten. De lijst was geordend op basis van de klachtenpijplijndata die Maya in maand één had opgehaald: eerst checkout, dan berichten, dan profiel, dan video. Elke component doorliep een gestandaardiseerde herbouw: toetsenbordnavigatie-kaart, schermlezer-semantiek, focusvolgorde, contrastverificatie bij elke status, verminderd-beweging-variant, RTL-variant, en — Maya’s aandringen — een gedocumenteerde testfixture die het QA-team bij elke release kon uitvoeren.

Het creditcardinvoerveld was in zijn oude vorm één <input> met automatisch opmaak-JavaScript dat de schermlezer-aankondiging van getypte tekens verstoorde; de herbouw gebruikte vier afzonderlijke invoervelden met expliciete labels, fouten gekoppeld via aria-describedby, en inline validatie aangekondigd via een beleefde live-regio. Het kostte zes weken voor één designer en één engineer. De checkout-gerelateerde toegankelijkheidstickets daalden het volgende kwartaal met circa 70 procent — omdat de meeste nieuwe tickets simpelweg niet meer werden ingediend.

Tranche 3 — Patronen

De laatste tranche was de tranche die Maya beschreef als de gemakkelijkste in uitvoering en de moeilijkste in coördinatie. Het team documenteerde samenstellingspatronen — hoe een toegankelijke modalstroom te bouwen op de herbouwde componenten; hoe een lijst met items met gemengde media samen te stellen; hoe een instellingenpagina te structureren zodat de navigatie werkte onder stembesturing. De patronen werden als uitvoerbare codevoorbeelden in de design-system documentatiesite opgenomen. Het moeilijke deel was niet het schrijven ervan. Het moeilijke deel was elk productteam te laten ze gebruiken in plaats van hun eigen te bedenken.

De technische uitrol

Een opnieuw ontworpen design-system is een bibliotheek; het is op zichzelf geen uitrol. Het moeilijkste projectmanagementwerk van het programma — Maya was hierover ondubbelzinnig — was de migratie. Het product had circa veertig squads, elk eigenaar van twee tot vijf oppervlakken, elk in de praktijk vrij om het design-system te consumeren op welk tempo het eigen roadmap toestond. Een naïef plan zou elke squad gevraagd hebben om binnen een kwartaal te migreren. Dat plan zou zijn mislukt.

Maya’s oplossing was een gefaseerd mandaat. De nieuwe componenten werden verzonden als standaard; de oude bleven achter een feature flag, maar elke release van een oppervlak dat nog een erfgoedcomponent gebruikte, opende automatisch een P2-ticket op de backlog van die squad. Het ticket zou na negentig dagen automatisch escaleren naar P1 en na honderdtachtig naar P0. Binnen vier kwartalen was circa 78 procent van het erfgoed primaire-component-gebruik gemigreerd. Binnen zes kwartalen was dat cijfer circa 94 procent.

”Het moeilijke deel was niet het design-system. Het moeilijke deel was een organogram met veertig squads en een budgetcyclus die er niet voor was gebouwd. De componenten waren drie maanden werk. De uitrol duurde drie jaar.”

Maya Okafor, compositiepersoon, over de migratie

Wat het programma kostte — en wat het opleverde

Maya was nauwgezet in het bijhouden. Tegen de tijd dat het programma zijn formele fase afsloot in Q4 2024, bedroeg de totale uitgave — over tweeëneenhalf jaar, elf toegewijde medewerkers en externe tests — ergens in de hoge eencijferige miljoenen. Het toegankelijkheidsgerelateerde ticketinstroom was gedaald met circa 73 procent ten opzichte van de basislijn van 2022, ondanks een gebruikersbestand dat met circa 20 procent was gegroeid. De twee ADA-gerelateerde juridische kwesties die tijdens het programmavenster werden geopend, werden beide gesloten zonder naar de rechtbank te gaan, onder voorwaarden die het bedrijf in zijn jaarverslagen omschreef als onwezenlijk. De retentie van het product op het hulptechnologie-gebruikerssegment — het segment dat Maya had geïdentificeerd in de financieringspitch — was verkleind van een 1,8x churnverhouding ten opzichte van het totale bestand tot circa 1,15x. Financiën boekte het verschil. Maya zei niet wat het getal was.

Ze boekte ook dingen die niet in het spreadsheet verschijnen. De VoiceOver-rotorondersteuning van de native iOS-app, die al jaren berucht kapot was, werd — in een onafhankelijke audit begin 2025 — een van de best presterende in zijn sector. Het hoog-contrast-thema dat Maya over de bezwaren van het merkteam had doorgedrukt, werd de standaard in regio’s waar lokale toezichthouders begonnen te handhaven op de EAA. De design-system documentatiesite, begin 2022 circa 4.000 keer per maand bekeken, had halverwege 2025 gemiddeld circa 38.000 maandelijkse paginaweergaven. Er was een praktijk opgebouwd; die zou haar ambtstermijn overleven.

Wat ze vertelt aan designers bij kleinere organisaties

Tegen 2025 deed Maya minder intensieve diensten op haar eigen product en meer advieswerk voor designers bij bedrijven die een orde van grootte kleiner waren — productteams van twintig mensen, productteams van vijftig mensen, de omvang van organisatie waarbij één designer standaard de toegankelijkheidslead moet zijn. Ze had een kleine set dingen die ze in elk koffiemeeting zei. Ze zijn de moeite waard om op te sommen.

Één. De klachtenpijplijn is de hefboom. Men heeft geen miljoen gebruikers nodig om een klachtenpijplijn te hebben; men heeft een Support-inbox en de bereidheid om die te lezen. Print de tickets. Stop ze in een map. Neem de map mee naar de vergadering. De map werkt.

Twee. De financieringsonderbouwing heeft drie kolommen. Juridisch risico, marktkans en klachtvolume. Men heeft geen exacte cijfers nodig voor elk van de drie. Men heeft nodig dat dezelfde persoon alle drie op één plek ziet, omdat geen enkele kolom alleen de kamer overtuigt.

Drie. Fundamenten vóór componenten, componenten vóór patronen. Een team dat begint met het herschrijven van componenten zal er een jaar mee bezig zijn en aankomen met een mooie componentenbibliotheek bovenop een onsemantisch kleurenpalet, en de volgende designer zal alles opnieuw herschrijven.

Vier. Onderhandel het veto. Het grootste hefboompunt in een product-bedrijf met meerdere teams is de mogelijkheid om te zeggen: “deze nieuwe component wordt niet verzonden totdat hij de controlelijst haalt.” Het veto, twee keer ingezet in twee jaar, is voldoende. Het is de geloofwaardigheid van het veto, niet de frequentie ervan, die het werk doet.

Vijf. Neem de onderzoeker met recruteringservaring in de gemeenschap van mensen met een beperking aan. De enkele lijn in Maya’s programmabudget die ze het hardst zou verdedigen, was de zetel van de onderzoeker. Zonder mensen met een beperking in de loop is het werk theater.

Zes. De klok op de erfgoedcomponenten is niet onderhandelbaar. Migraties zonder klokken gebeuren niet. Migraties met klokken gebeuren op het tempo dat de klok toestaat.

Zeven. Neem de winst en vertrek. Maya stapte in Q1 2025 van het programma af en ging naar advies. De oprichter van een toegankelijkheidsprogramma is de verkeerde persoon om het in steady state te runnen. De taak van de oprichter is het programma te laten bestaan. De steady-state-taak is saai te zijn. Ander temperament; andere persoon.

Een noot over de map

Maya heeft de map nog steeds. Ze brengt hem soms mee naar conferenties, wanneer een senior designer haar vraagt — meestal met enige schaamte, vaak na een panel — wat te doen met hun eigen eenenveertig openstaande tickets. De map is een centimeter dik. De sticker op het omslag zegt, in een schreefloze handschriftfont die Maya in 2022 kocht in een ambachtswinkel, “Dag Één”. De eenenveertig tickets erin zijn allemaal gesloten. De namen van de mensen die ze hebben ingediend zijn zwart geredacteerd. Ze toont de namen niet. Ze toont de pagina’s, en ze zegt: dit is hoe het werk eruit ziet, en hier begint het.