Jemima Abu:从一开始就给编程代理无障碍规则

原标题Jemima Abu: Give coding agents accessibility rules from the start

一位产品工程师介绍如何利用语义化 HTML、可复用组件和明确的代理技能,帮助团队构建更易用的界面。

JAJemima Abu讲者 · CAIS
频道
AI Engineer
发布
2026年11月9日
视频
14:38
阅读
5 分钟
幻灯片
3
原文
英语
在 YouTube 打开
往下滚动阅读时,视频会缩到右下角继续播放。字幕跟随阅读语言。
阅读语言共 2 种语言可读
由 AI 从英语原文翻译。打开“对照原文”可以逐段核对。
摘要

30 秒看懂

Jemima Abu 认为,编程代理可能重复训练材料和现有代码中的无障碍缺陷。她的实际做法是明确无障碍要求、审查现有代码、构建可复用组件,并要求代理遵循规则。在一次非正式的 Figma 实现实验中,使用无障碍技能时耗时从 15 分钟降至 5 分钟,成本降低 58%;但她强调,一次非受控实验无法证明普遍的速度或成本优势。

  1. 1一次使用技能的运行更快,但不能证明普遍规律Abu 在一次非正式 Figma 实验中记录了 15 分钟与 5 分钟、成本降低 58% 的结果;她明确表示实验没有受控。
  2. 2原生元素可以替代部分自定义代码HTML 的 details 元素可以提供类似手风琴组件的展开与收起功能,免去从头实现部分行为。
  3. 3团队发现之前,无障碍障碍可能已让用户流失Abu 讲述一位银行客户因第一个应用无法使用而转向另一家银行。
  4. 4把无障碍要求纳入代理工作流明确要求、审查代码库、使用共享组件,并要求代理遵循规则。
  5. 5语义化 HTML 和键盘操作是有用的起点Abu 分享轻量技能,并提醒仅靠指令无法保证产品完全无障碍。

要点建议

  1. 让代理实现产品之前,先明确无障碍要求。
  2. 审查现有代码库,避免代理简单复制其中的无障碍问题。
  3. 适用时优先使用语义化 HTML 和可复用组件,减少不必要的自定义实现。
  4. 把键盘操作等无障碍要求写进代理持续遵循的指导。
  5. 无障碍技能可以提供帮助,但仍需要借助适当工具和人员进行测试。
全文

按章节阅读整理后的全文

只看原始文稿
01

无障碍练习与一次小实验

Abu 请观众闭眼操作手机。她比较使用和不使用无障碍指导的两次 Figma 实现,并解释实验的局限。

Jemima Abu 请观众闭眼解锁手机,再想象第一次使用手机、完全不知道按键位置的情况。这个练习说明了依赖默认所有人都能看见的界面有多困难。

Abu 将无障碍定义为构建无论是否有残障都能使用的产品。视觉、运动、认知和听力障碍都可能暴露出开发者只用自己熟悉方式测试时遗漏的问题。

她引用一项统计,称排名靠前的网站中 96% 存在无障碍问题,并回顾开发者的常见理由:无障碍支持耗时太长、客户没有要求,或管理者有其他优先事项。

为了测试自己的假设,Abu 让代理两次实现同一份 Figma 设计:一次不给无障碍指导,另一次提供她编写的技能。在她的例子中,使用指导耗时从 15 分钟降至 5 分钟,成本降低 58%。

使用和不使用技能的一次 Figma 实现
幻灯片 1 / 3使用和不使用技能的一次 Figma 实现幻灯片记录耗时分别为 15.6 和 5.2 分钟,成本分别为 14.20 和 5.97 美元;Abu 强调这只是一次非受控实验。

Abu 随即说明比较的局限:这是一次没有控制条件的单次实验,不能证明无障碍代码总是更便宜或更快。她想强调的是,明确指令可以帮助代理遵循期望的做法。

Abu 介绍自己是一位产品工程师和获得认证的无障碍专业人士。她将 AI 代理比作第一次独自出门办事的孩子:地图、购物清单和清楚的边界有助于到达目的地。

02

编程代理如何重复无障碍缺陷

Abu 认为代理需要明确指导。她比较自定义组件与原生 HTML,并解释为什么事后添加无障碍支持更困难。

对编程代理而言,相应做法是明确说明期望的代码与行为。缺少指导时,代理可能生成大量通用元素,而不是开发者需要的语义结构。

Abu 认为,人的偏差可能演变为 AI 的偏差。开发者如果只在自己的设备上测试,可能忽略屏幕阅读器用户或使用键盘导航的人,而生成的代码也可能重复现有代码的模式。

她说代理还可能生成过多不必要的自定义代码。手风琴式的展开内容通常可以使用原生 HTML details 元素,而不必从头编写 JavaScript,借助浏览器已提供的行为。

她用蓝莓松饼作比喻,说明为什么要从一开始就融入无障碍支持。她说,网站完成后再添加 ARIA 标签,就像把蓝莓硬塞到已经烤好的原味松饼上。

03

用户、商业成本与法律风险

无法使用的界面可能使客户转向其他产品。Abu 也讨论法律风险,具体义务取决于司法辖区和实际情况。

Abu 讲述一个人因为第一家银行的应用存在无障碍障碍而转投另一家银行。客户未必更喜欢第二家银行的功能,而是需要一个自己能够使用的产品。

这给团队带来选择偏差:声称现有用户不使用辅助技术,可能忽略了那些尝试后因遇到障碍而离开的人。Abu 将其比作商店没有门,却疑惑为什么没人进来。

她还提到网站缺乏无障碍支持可能带来法律风险,并提及《美国残疾人法》。具体义务取决于组织、服务和适用法律,演讲中的概括不应视为法律判定。

04

四步代理工作流

明确要求、审查代码库、使用可复用组件,并要求代理遵循无障碍指导。

她的第一项建议是明确产品的无障碍要求。网页应用和移动应用可能有不同需求,因此开发者或产品经理应在向代理下指令前确定相关标准。

第二,审查现有代码库。Abu 将进入杂乱项目的代理比作看到水槽里有脏碗的新室友:现有模式可能成为代理认为应该遵循的范例。

让代理生成无障碍代码的步骤
幻灯片 2 / 3让代理生成无障碍代码的步骤幻灯片列出明确要求、审查现有代码库和建立设计系统。

第三,使用设计系统或可复用组件库。修复共享组件中的无障碍问题后,改进可以惠及多个页面,而不必逐处单独修复。

第四,让这些要求成为代理日常工作流中的强制规则。临近截止日期时人们容易忘记无障碍要求,因此应让代理反复获得指导,为使用方式不同的人构建产品。

05

轻量技能与问答

Abu 推荐语义化 HTML 和键盘操作,同时强调提示词不能保证产品完全无障碍。在问答中,她批评流于表面的无障碍覆盖层。

轻量无障碍技能
幻灯片 3 / 3轻量无障碍技能示例要求使用语义化 HTML、支持键盘操作、正确标注,并在返回代码前检查。

Abu 展示了一份轻量无障碍技能:使用语义化 HTML、在适当时使用 ARIA,并确保交互元素可以用键盘操作。她说自己的例子侧重网页,需要根据产品调整。

她还提到现代 Web 指导,可以帮助代理选择当前浏览器功能,例如用 details 实现展开与收起。这些指令可以改善起点,但她提醒,仅靠提示词无法让产品完全无障碍。

问答中,Abu 提到两件令她沮丧的事:团队忽视键盘操作等基本需求,或者把无障碍覆盖层当成完整解决方案。她说,覆盖层就像松饼烤好后才加上蓝莓。

同频道的其他文章

7 张幻灯片19:41EN → 简体中文
AI Engineer· 2026年11月9日高可靠自动化的第一步:把难处理的案例分流出去Matthew Jewkes · Standard CyberneticsMatthew Jewkes 介绍如何在生物医药文档索引流程中区分关键错误、模糊判断和异常情况。智能体工程Workflow automation评估+1
7 张幻灯片22:01EN → 简体中文
AI Engineer· 2026年11月9日Zach Lloyd:让软件工厂可以衡量和修改Zach Lloyd · WarpWarp CEO 建议记录智能体运行、评估失败原因,并用真实任务测试工作流的改动。软件工厂编程智能体评估+2
12 张幻灯片27:35EN → 简体中文
AI Engineer· 2026年11月9日Uber 为加快 AI 时代的代码合并,放弃主干始终通过测试Preetam Dwivedi, Manjari Akella · Uber合并队列放宽部分冲突限制,合并后再验证组合状态,并保留已验证的可用版本。开发流程与测试编程智能体基础设施与部署+2
3 张幻灯片15:25EN → 简体中文
AI Engineer· 2026年11月9日Hassan 与 Omar El Mghari:AI 财务预测为何会“结果对了,理由错了”Hassan El Mghari, Omar El Mghari · Together AI一个 Costco 会员费模型通过了基础检查,结果也接近实际数据,但审计发现了相互抵消的错误假设。金融 AI评估智能体工程
4 张幻灯片21:12EN → 简体中文
AI Engineer· 2026年11月9日Tom Moor:给编程代理补上代码看不到的产品背景Tom Moor · LinearLinear 的工作流将客户请求、历史决策、审查记录和人工反馈贯穿于接收、实现与审查。编程智能体产品与体验智能体工程
2 张幻灯片15:35EN → 简体中文
AI Engineer· 2026年11月9日Mislav Ivanda:先选执行边界,再选智能体框架Mislav Ivanda · DaytonaDaytona 工程师比较了运行智能体生成代码时的本机审批、嵌入式运行时和沙箱机器。Sandboxes & isolation智能体工程基础设施与部署