无障碍注释是设计工作流程中最繁琐的任务之一。需要检查每个文本-背景组合的对比度。为屏幕阅读器注释标题层级。验证触摸目标是否达到44×44px的最小要求。为每张图片建议替代文本。为每个交互组件记录ARIA标签。对于一个典型的50个屏幕的应用,手动注释需要20-40小时。
Figma的AI设计代理,结合2026年5月推出的无障碍Skills,可以自动化这项工作的机械部分。它可以分析你的设计,检查数学合规性(对比度、触摸目标尺寸),并生成注释层——将每个屏幕的注释时间从数小时缩短到几分钟。
关键要点
Figma AI不会取代无障碍专业知识——它自动化繁琐的注释工作。代理生成无障碍规范的初稿,由无障碍专家审查和完善,将规范创建时间从20-40小时(50个屏幕的应用)缩短到2-4小时的审查和完善。数学检查(对比度、尺寸)非常准确;上下文检查(替代文本、焦点顺序)需要人工审查。
Figma AI可以自动检查什么?
| 检查类型 | 代理的功能 | 准确性 | 是否需要人工审查? |
|---|---|---|---|
| 颜色对比度 | 根据WCAG AA/AAA检查文本/背景对 | 非常高(数学计算) | 否(除非边缘情况) |
| 触摸目标尺寸 | 标记低于44×44px的交互元素 | 非常高(尺寸计算) | 否 |
| 标题层级 | 为屏幕阅读器注释H1→H6结构 | 高(结构性) | 快速验证 |
| 替代文本建议 | 为图片生成描述性替代文本 | 中等(需要上下文) | 是——审查用途 |
| 焦点顺序 | 基于布局建议键盘Tab顺序 | 中等(依赖布局) | 是——验证逻辑 |
| ARIA标签 | 为组件建议ARIA角色和标签 | 中等(上下文相关) | 是——验证语义 |
| 字体最小尺寸 | 标记低于可读尺寸阈值的文本 | 非常高 | 否 |
| 仅颜色信息 | 识别仅通过颜色传达的状态 | 高 | 快速验证 |
规律是:数学和尺寸检查非常可靠,可以无监督运行。上下文和语义检查是需要专家审查的起点。这是正确的分工:AI处理繁琐的测量工作(这占用了大部分注释时间),人类处理判断性决策(这需要理解用户需求)。
如何使用代理运行无障碍检查
步骤1:选择你想要检查的框架。
步骤2:告诉代理:"对这个屏幕运行无障碍检查。检查对比度的WCAG AA合规性,验证触摸目标至少为44×44px,注释标题层级,为图片建议替代文本,并标记任何仅通过颜色传达的信息。"
步骤3:代理在你的画布上创建一个注释层,显示结果:通过项目显示绿色勾选,失败项目显示红色标记,需要审查的项目显示橙色警告。
步骤4:审查中等准确性的项目:替代文本建议、焦点顺序、ARIA标签。根据你对功能用途和用户上下文的了解进行调整。
为了获得更一致的结果,创建一个自定义的/accessibility-check Skill,编码你组织的特定无障碍要求(可能超过标准WCAG)。你的技能可能包括:"我们的最小字体尺寸是14px(而不是WCAG的12px)",或者"所有交互元素必须有使用我们品牌蓝色轮廓的可见焦点指示器。"
常见问题
AI生成的无障碍规范是否能取代无障碍测试?
不能——AI生成的规范是起点,而不是最终审计。真正的无障碍测试需要屏幕阅读器测试(VoiceOver、NVDA)、键盘导航测试,理想情况下还需要与残障人士进行用户测试。代理处理注释;人类处理验证。规范是文档层;测试是验证层。
代理检查哪个WCAG级别?
对比度检查支持WCAG AA(正常文本4.5:1比例,大文本3:1比例)和AAA(7:1比例)。在你的提示或Skill中指定目标级别。大多数组织以AA为目标;AAA推荐用于政府和医疗应用。
我可以为我的组织创建自定义无障碍Skill吗?
可以——如果你的组织有超出标准WCAG的要求,你应该这样做。许多公司都有品牌特定的无障碍指南:品牌颜色的更高对比度、特定的最小字体尺寸、必需的焦点指示器样式,以及超过WCAG最小要求的触摸目标尺寸。将这些编码到自定义Skill中,这样代理就能自动检查你的特定标准。
AI的替代文本有多准确?
中等——代理描述它在图像中视觉识别的内容。但好的替代文本需要理解图像在上下文中的用途。装饰性英雄图像需要不同的替代文本(或不需要)而不是信息图表。产品照片需要描述性文本;装饰性背景则不需要。始终根据图像在用户体验中的作用来审查和完善AI生成的替代文本。
这适用于现有设计还是仅适用于新设计?
两者都适用——回溯检查可能是最高价值的用例。将代理指向任何现有框架并请求无障碍审查。它分析已有内容并生成注释。这对于审计在团队采用无障碍标准之前设计的屏幕特别有用,提供快速基线评估,指导修复优先级。
披露:本文中的某些链接是联盟链接。我们只推荐我们亲自测试并经常使用的工具。查看我们的完整披露政策。