图片说明:一位设计师从背后看站在站立式书桌前,双屏显示器上呈现着包含焦点状态的设计系统组件库——大规模无障碍设计师档案的视觉标志。

阅读时间:10分钟

编者按。此处描写的设计师是一个复合人物。“Maya Okafor”并非真实存在的单一个人;这份传记是由五位高级无障碍设计负责人的有据可查的访谈拼接而成,她们在2019年至2025年间,分别在用户规模约为8,000万至3亿的消费互联网公司主导了跨越多个季度的无障碍项目。以下时间线中的每个数字、每件人工制品、每次挫折,都是真实的,来自五位从业者中的某一位;这种综合——一段职业生涯贯穿一个项目的弧线——是编辑自由。

产品同样经过了处理。我们精确描述的是其规模(初始约2亿月活跃用户,项目结束时约2.4亿),其技术栈(React和TypeScript前端,加上与Web共享同一设计语言的原生iOS和Android应用),以及Maya所接手的设计系统体量(约410个组件,其中约90个为”主要”组件)。这些是决定工作难度的变量。

她走进公司的那个星期一

Maya Okafor于2022年1月下旬一个雨天的星期一加入公司,担任设计系统团队的高级产品设计师。那年她三十四岁。此前六年她在一家大型出版商的数字部门工作,在那里她几乎是无意间成为了那个知道焦点环应该是什么样子、知道品牌规定的三级按钮2.6:1对比度”实际上并没有问题”究竟是什么意思的人。她没有正式的无障碍资质认证。她总说,她所知道的一切都是用艰难方式学来的:在屏幕阅读器用户提交支持工单、而没有其他人知道如何复现问题时,她就是那个接听电话的设计师。

新公司没有无障碍授权,没有无障碍团队。有一个无障碍工作组,每隔一周在太平洋时间下午4点开会,Maya加入的第一个星期三,出席者只有六人。有一个最后更新于2020年的Confluence页面,一个拥有约140名成员、每周三条消息的Slack频道,以及——Maya后来才意识到——恰好一个杠杆点:41张积压的无障碍相关支持工单,其中七张来自同一家残障权益组织,该组织自2019年起每季度给公司发电子邮件。

“我做的第一件事是逐一阅读那四十一张工单。我做的第二件事是将它们打印出来,放入一个活页夹。不是因为任何人需要活页夹——而是因为三个月后谈话变得艰难时,我需要一个可以放在VP桌上的实物。“

Maya Okafor,综合人物,谈及她的第一个月

建立论据:投诉量、法律风险与市场份额

最初三个月的工作不是设计工作,而是取证工作。Maya并行推进了三件事。

她量化了投诉渠道。她与支持团队合作,提取了过去二十四个月内含有十余个标志性词汇的所有工单——“屏幕阅读器”、“VoiceOver”、“TalkBack”、“JAWS”、“NVDA”、“对比度”、“仅键盘”、“WCAG”、“ADA”、“EAA”、“我看不清”。她发现约1,470件独立投诉,其中约280件未解决且超过九十天。她将这些投诉映射到产品界面:约38%在结账流程,约22%在消息功能,约14%在个人资料创建,约9%在视频播放器。六个月后,这一分布将决定哪些组件优先重写。

她量化了法律风险。该公司在过去十八个月内被列入两起ADA第三章诉讼,均已和解。Maya无法得知和解金额——法务不肯告诉她——但她能看到公开案卷中其所在行业的诉讼频率曲线。她建立了一张电子表格,基于公司的风险敞口面,在”不作为”轨道上估算出预期年度和解加整改成本的区间。该区间的中位数为每年数百万美元。

她量化了市场机遇。这是打动全场的那条线。Maya将公司的用户研究数据与WebAIM屏幕阅读器用户调查、美国CDC残障统计数据,以及该产品所服务的欧盟市场的Eurostat残障患病率数据加以整合。她制作了一张幻灯片:在公司约2亿月活跃用户中,估计有1,400万至2,200万人在使用辅助技术或非默认设置访问该产品。数据分析显示,这一群体的流失率约为整体用户群的1.8倍。如果这一群体的留存率能够与整体拉平,净年度收入影响将是一个财务团队能够识别的数字。

“我从未把法务部的数字给市场部看,也从未把市场部的数字给法务部看。对每一方,我只展示对他们重要的那个数字。对CFO,我把两个数字并排放在一张幻灯片上。就在那次会议上,项目得到了资金。“

Maya Okafor,综合人物,谈及资金申请

项目于2022年第二季度末获批。人员配置:七人,在十二个月内扩充至十一人——三名设计师、四名工程师、两名QA专员、一名项目经理、一名具有残障社区招募经验的研究员。外部测试合作预算:六位数年度经费。权限:对任何新设计系统组件具有审批权,对未通过无障碍检查清单的组件具有一票否决权。最后那条——否决权——是Maya谈判最为艰难的。它是项目与请示型工作之间的区别。

设计系统重构:令牌、焦点、动效

技术工作于2022年第三季度启动,持续了接下来的十四个月。Maya将其分为三个批次,她在幻灯片和站会中称之为——基础、组件、模式。她常说,这种排序的规律是整个项目最重要的架构决策。

批次一——基础

前六个月重建了设计令牌。遗留系统有约84个颜色令牌,没有语义命名——“Blue/600”、“Grey/400”、“Brand/Primary”——也没有对比度元数据。Maya的团队用约40个按功能组织的语义调色板取而代之:content-primarycontent-secondarysurface-baseborder-default,加上交互梯度(action-primaryaction-primary-hoveraction-primary-pressed)和状态梯度。每个令牌在其元数据中携带它被批准放置的表面上的对比度值,以及它通过哪个WCAG合规级别的标志。工具强制执行这一规则:设计师在Figma中无法将content-tertiary放置在surface-base之上而不触发lint提示。

同一批次还标准化了焦点环。Maya数了一下,遗留组件有约十七种不同的焦点环处理方式,从在浅色背景上消失的1像素点状轮廓,到在紧凑列表中破坏布局的2像素实心蓝色环,不一而足。新焦点环是单一令牌:一个2像素轮廓,与组件边缘之间有2像素透明间隙,使焦点环在任何表面上都清晰可见。所有交互组件默认采用它;没有退出选项。

动效偏好是第三个基础项。遗留系统在约一处——单个引导动画——响应prefers-reduced-motion,原生应用则完全不响应。新基础使动效成为令牌,有三个值(无、减少、完整),贯穿每个动画原语。设计师若要覆盖此偏好,必须附上一份由项目负责人审阅的书面理由。

批次二——组件

基础稳定后,团队转向约90个主要组件。清单按Maya在第一个月提取的投诉渠道数据排序:结账优先,然后是消息、个人资料、视频。每个组件经历标准化重建:键盘导航映射、屏幕阅读器语义、焦点顺序、每个状态下的对比度验证、减少动效变体、RTL变体,以及——Maya坚持要求的——一个QA团队可以在每次发布时运行的有文档记录的测试套件。

信用卡输入字段在旧版本中是一个单一的<input>,配有自动格式化JavaScript,该脚本破坏了屏幕阅读器对已输入字符的播报;重建后使用四个独立输入框,配有明确的标签、通过aria-describedby关联的错误提示,以及通过礼貌型实时区域播报的内联验证。这花了一名设计师和一名工程师六周时间。与结账相关的无障碍工单在下一个季度下降了约70%——因为大多数新工单根本就不再被提交了。

批次三——模式

最后一个批次是Maya描述为执行上最轻松、协调上最艰难的批次。团队记录了组合模式——如何在重建的组件之上构建无障碍的模态流;如何组合包含混合媒体的项目列表;如何构建一个在语音控制下导航正常的设置页面。这些模式作为可运行的代码示例放入设计系统文档网站。难的不是写出它们,而是让每个产品团队使用它们,而不是自己另起炉灶。

工程推广

重新设计的设计系统是一个库;它本身并不是一次推广。项目中最艰难的项目管理工作——Maya对此毫无保留地表示——是迁移。产品有约四十个小队,每个小队负责两至五个界面,每个小队实际上可以按照路线图允许的任何节奏使用设计系统。一个简单的计划会要求每个小队在一个季度内完成迁移。那个计划会失败。

Maya的解决方案是渐进式授权。新组件作为默认组件发布;旧组件保留在功能标志后面,但每次发布仍使用旧版组件的界面,都会自动在该小队的积压工作中生成一个P2工单。该工单在九十天后自动升级为P1,在一百八十天后升级为P0。在四个季度内,约78%的旧版主要组件使用已完成迁移。在六个季度内,这一比例达到约94%。

“难的不是设计系统。难的是一个有四十个小队的组织架构和一个并非为此而设的预算周期。组件是三个月的工作。推广是三年的工作。“

Maya Okafor,综合人物,谈及迁移

项目花了多少,又带来了什么回报

Maya在追踪方面一丝不苟。到项目于2024年第四季度关闭正式阶段时,在两年半时间里,包括十一名专职人员和外部测试,总花费约为高个位数百万美元。与无障碍相关的工单流入量较2022年基准下降了约73%,尽管用户群增长了约20%。项目窗口期内发起的两起ADA相关法律事务均在未提起诉讼的情况下关闭,公司在年度申报文件中将其描述为无实质影响。辅助技术用户群体的产品留存率——Maya在融资说明中识别出的那个群体——已从整体用户群流失率的1.8倍缩小至约1.15倍。财务部门记入了这一差值。Maya没有说出具体数字。

她还记录了一些不出现在电子表格中的成就。原生iOS应用的VoiceOver转子支持曾长期以来众所周知地存在问题,在2025年初的独立审计中,成为其所在行业中表现最优之一。Maya力排品牌团队反对意见推动的高对比度主题,在当地监管机构开始执行EAA的地区成为默认设置。设计系统文档网站,在2022年初每月浏览约4,000次,到2025年中期每月平均浏览量达约38,000次。一种实践已经建立;它将在她任期结束后继续存在。

她对规模较小的组织的设计师说的话

到2025年,Maya在自己产品上的急诊式工作越来越少,为规模小一个数量级的公司的设计师提供的顾问服务越来越多——二十人产品团队、五十人产品团队,那种规模的组织里,一名设计师默认必须成为无障碍负责人。她在每次咖啡会面中都会说同样的几件事。值得一一列出。

一。投诉渠道是杠杆。你不需要数百万用户才能拥有投诉渠道;你需要一个支持收件箱,以及阅读它的意愿。把工单打印出来,放入活页夹,带着活页夹去开会。活页夹有效。

二。融资论据有三列:法律风险、市场机遇和投诉量。你不需要三列中任何一列有精确的数字。你需要让同一个人在同一个地方看到这三列,因为没有哪单独一列能打动全场。

三。基础先于组件,组件先于模式。先从重写组件开始的团队,会花一年时间做完之后,交出一个建立在非语义颜色调色板之上的精美组件库,然后下一位设计师会再次全部重写。

四。谈判否决权。在多团队产品公司中,单一最大的杠杆点是能够说”这个新组件在通过检查清单之前不得发布”。否决权在两年内被动用两次,已经足够。是否决权的公信力,而非其频率,在发挥作用。

五。雇用有残障社区招募经验的研究员。Maya在项目预算中最坚决要保留的那一行是研究员的席位。没有残障用户参与,这项工作就是一场表演。

六。旧版组件的倒计时是不可谈判的。没有倒计时的迁移不会发生。有倒计时的迁移会按倒计时允许的节奏发生。

七。赢得成果后离开。Maya于2025年第一季度从项目中退出,转为顾问。无障碍项目的创始人不是在稳定运营阶段管理它的合适人选。创始人的工作是让项目存在。稳定运营的工作是保持常规。气质不同;适合的人不同。

关于那个活页夹

Maya还保留着那个活页夹。她有时在会议上拿出来,当一位高级设计师向她——通常带着些不好意思,往往是在小组讨论之后——询问自己那四十一张未解决工单该怎么办时。活页夹有半英寸厚。封面上的贴纸用Maya 2022年在一家手工艺品店买到的无衬线手写字体写着”第一天”。其中四十一张工单都已关闭。提交工单的人的姓名用黑色马克笔涂掉了。她不展示姓名。她展示页面,然后说:这就是这项工作的样子,这就是它开始的地方。