在本文中，我们将探讨两种将重要可访问性细节从设计端传递给开发端的高级方法：一种是创建自定义的“预设标注”，另一种是利用 Figma 的 Code Connect 功能。这两种方法旨在确保设计意图，尤其是非视觉的、关键的可访问性属性，不会在设计系统组件的流转过程中丢失。
如何为你的设计系统制作预设标注
并非所有组件都需要预设标注。首先评估哪些组件最需要它们，优先考虑那些从预设标注中受益最大、对团队和用户影响最高的组件。
设定优先级
- 符合组织优先级的组件
- 在可访问性审计问题中频繁出现的组件
- 基于React实现的组件
- 最常被实现的组件
映射组件属性 为每个组件，我们需要交叉参考多个信息源，以确定需要在每个预设标注中添加哪些组件属性和特性。这些信息可能只存在于一两个地方，因此在设计和开发生命周期中容易被遗漏。主要信息来源包括：
- Primer.style上的组件文档：查找未构建到Figma或代码中的任何可访问性要求。
- Storybook中的代码演示：查看HTML输出，寻找组件文档或Figma资源本身未包含的任何代码结构或可访问性属性。
- Figma资源库中的组件属性：关注Figma组件中设计师可以更改的选项。预设标注的有用补充是其他来源中提及但未构建到Figma组件中的可访问性属性、要求和用法指导。
- 其他潜在来源：包括团队成员的经验和最近审计中发现的问题。
整合成果 我们以TextInput组件为例。其预设标注包括了使用指导的链接和Storybook链接，一个关于如何最佳使用该组件的可选教程。它还包含两个必填项（输入类型和错误文本）和一个可选项（用于偶尔出现的隐藏表单标签）。
我们从创建预设标注中学到了什么
- 适用性：预设标注可能不适合每个团队或组织，但特别适合较新的设计系统和采纳度不高的系统。
- 维护成本：成熟的设计系统频繁更新，如果不密切监控，预设标注可能会与设计系统组件本身不同步，导致开发开始后产生混淆和返工。
- 优点：对于新成员或对设计系统不太熟悉的成员，预设标注内置的指导和文档链接非常有用。更有经验的成员则可以微调预设标注的使用方式。
- 挑战：如果没有丰富的设计系统组件使用经验，评估和映射出构建预设标注所需的属性可能需要大量时间。简洁地命名组件属性以避免在Figma属性面板中被截断也是一个挑战。
- 与通用标注的重叠：有时预设标注与通用的标注类型存在重叠，这可能造成混淆。一个解决方案是将设计系统特定的属性添加到默认的标注集合中。
- 实现自动化的潜力：映射预设标注所需组件属性的过程，同样也是实现更准确、自动化标注所必需的。这可能是迈向更简化流程的重要垫脚石。
一个有前景的新方法：Figma的Code Connect
在构建新的预设标注集合时，我们还尝试了通过Figma的Code Connect功能来增强Primer标注。该功能允许我们将关键的可访问性细节直接添加到开发人员可以从Figma导出的代码中，从而绕过了许多预设标注的需求。
以IconButton组件为例：GitHub的Octicon图标在许多Primer组件中使用。它们默认是装饰性的，但根据使用方式，有时需要alt文本或aria-label属性。利用Code Connect，我们可以在IconButton的Figma组件中添加一个隐藏层，该层包含一个用于aria-label的文本属性。设计师可以直接从组件属性面板添加其值，无需额外标注。这个隐藏层不会干扰视觉效果，并且aria-label属性会随组件代码一起导出。
设置Code Connect的技巧：
- 保持一致性：确保创建的属性以及放置隐藏层的方式在组件间保持一致，以设定清晰的期望。
- 在分支上实验：使用设计系统库的分支进行实验，以降低风险。
- 使用视觉回归测试：直接为组件增加复杂性会带来未来出错的风险，尤其是对于拥有许多变体的组件。
开源工具与进一步阅读
我们已经将GitHub标注工具包开源，你可以亲身体验我们是如何实现Primer可访问性预设标注和视觉回归测试的。
标注工具包是很好的资源，前提是负责任地使用它们。它们可以突显和放大你在构建数字产品时存在的深层次结构性问题。
标签：可访问性, 标注工具包, 标注, ARIA, 组件, 设计, 设计系统, Figma, Primer