设计系统标注，第一部分：无障碍性是如何在组件中被忽略的

GitHub的无障碍设计团队创建了一套标注方案，旨在弥补设计系统自身无法解决的问题，并主动处理Primer组件中的无障碍性问题。

在设计系统方面，每个组织在其无障碍性旅程中往往处于不同的阶段。一些组织投入了大量工作使其设计系统变得无障碍，而另一些则在实现这一目标之前还有很长的路要走。为了在这一旅程中提供帮助，许多组织依赖无障碍性标注，以确保设计准备好构建时不存在访问障碍。

然而，一个常见的误解（尤其对于拥有成熟设计系统的组织）是：无障碍组件会自动产生无障碍设计。虽然设计系统在扩展标准和保持一致性方面表现出色，但它们无法预防我们设计或构建方式中的每一个问题。访问障碍仍然可能悄然渗入并进入生产环境。

这正是我们无障碍设计团队着手解决的问题根源。

在这个由两部分组成的系列文章中，我们将向您展示无障碍的设计系统组件如何可能产生无法访问的设计。然后我们将展示我们的解决方案：将标注与我们的Primer组件集成。这使我们能够减少标注时间，提高设计系统的采用率，并触及那些可能没有无障碍支持资源的团队。在下一篇文章中，我们将带您了解如何为您自己的组件实现同样的目标。

让我们开始深入探讨。

什么是标注及其好处？

标注是包含在设计项目中的注释，通过传达视觉上未展现的设计意图，使不可见的内容变得明确。它们通过为开发者提供关于体验应如何运作的整体图景，来提升数字体验的可用性。将标注集成到我们的设计流程中有助于我们的团队更好地协作，通过弥合沟通差距并防止质量问题、无障碍审计问题和昂贵的返工。

标注帮助我们回答的一些问题包括：

辅助技术应如何从页面上的一个元素导航到另一个元素？
信息性图像和没有标签的按钮的替代文本是什么？
内容如何根据视口大小、屏幕方向或缩放级别而变化？
移动设备上表单输入应使用哪种虚拟键盘？
复杂交互应如何管理焦点？

我们对这类问题的回答——或者缺乏回答——可能会成就或破坏许多人的网络体验，尤其是残障用户。一些标注工具专门为此而构建，通过指导设计师包含关于网络标准、平台功能和无障碍性的关键细节。

大多数公开的标注工具包非常适合正在创建新设计系统组件的团队、尚未使用设计系统的团队或没有专业无障碍知识的团队。它们通常帮助标注诸如：

控件，如按钮和链接
结构元素，如标题和地标
装饰性图像和信息性描述
表单及其他需要标签和语义角色的元素
辅助技术和键盘导航的焦点顺序

GitHub的标注工具包

我们的首要任务之一是在同事们所在的地方与他们汇合。我们希望我们所有的设计师都能开箱即用地使用标注，因为我们相信，他们不应该需要成为认证的无障碍专家才能以无障碍的方式构建内容。

为此，去年我们开始创建一个内部的Figma库——GitHub标注工具包——它现在已开源！我们的工具包建立在CVS Health前包容性设计团队的遗产之上。他们的两个开源标注工具包帮助创建易于制作和理解的文档，并且是Figma社区中使用最广泛的标注库之一。

虽然标注增加了清晰度，但它们也可能增加开销。如果团队仅依赖专家为开发者解读设计和技术规范，那么交接过程可能会比实际需要的时间更长。为了创建我们的标注工具包，我们从头开始重建了其前身以避免这种开销，进行了大量改进并添加了内联文档，使其对我们所有的设计师（而不仅仅是无障碍专家）都更加直观和有用。

设计系统也有助于减少这种开销。当您为无障碍性审计您的设计系统时，对每个产品功能都需要专家关注的需求会减少，因为您正在使用标注将技术语义和专业知识添加到每个组件中。这意味着设计师和开发人员只需要一致地遵守使用指南，对吧？

标注与设计系统组件存在的问题

不幸的是，事情并非那么简单。

无障碍性并非二元对立

虽然设计系统有助于推动更大规模的无障碍设计，但它们不断发展，对它们的工作永远不会结束。任何组件的无障碍性都不是二元的。有些可能有一些严重的问题会造成访问障碍，例如无法用键盘操作或缺少替代文本。其他可能有一些琐碎的问题，例如通用的控件标签。

大多数时候，声称您的设计系统“完全无障碍”是一种误称。总会有更多的工作要做——问题只是有多少。Web内容无障碍指南是一个很好的起点，但其“成功标准”并非针对您网站、产品或受众的独特情境而定制的。

虽然WCAG应作为构建的基础，但重要的是要理解它无法捕捉残障用户需求的每一个细微差别，因为您的用户需求并非所有用户的需求。如果您从不超越WCAG去与您的用户交流，很容易相信您的设计系统是“完全无障碍的”。如果Primer拥有无障碍组件，那是因为我们认为来自日常辅助技术用户的直接参与和投入是我们工作中最重要的方面。与真实用户（包括有残障和无残障的用户）一起测试计划，才是真正发现最重要事情的地方。

无障碍组件不能保证无障碍设计

在页面上排列一系列无障碍组件并不会自动创建准确且信息丰富的标题层级。如果没有额外的文档，标题结构很可能在视觉上没有意义——作为使用辅助技术导航的媒介也没有意义。

无障碍组件灵活且具有响应性固然很好，但当它们被放置在设计指南未考虑的布局中时呢？它们是否能适应不同的缩放级别、视口大小和屏幕方向？当这些因素发生变化时，它们是否会失去任何功能或上下文？

组件的使用是情境性的。您可以将图像或图标添加到设计中，但设计系统文档无法为您编写描述性文本。您可以在多个地方使用相同的图像，但图像描述可能需要根据上下文而改变。

同样，使用相同输入组件构建的表单可能执行不同的操作，并且需要不同的错误验证消息。难怪采用设计系统组件并不能消除所有审计问题。

Figma中的设计系统组件不包含所有细节

标注工具包不包含针对特定设计系统的组件，因为几乎每个组织都在使用自己的设计系统。当采用标注工具包时，团队通常会添加标注其设计系统组件的方法。

这种标注让开发者知道他们可以使用已经构建好的东西，而不需要从头开始构建。它还有助于识别在Figma中“分离”的任何设计系统组件。并且它减少了需要标注的事项数量。

让我们看一个例子：

如果我们使用来自Primer Web Figma库的这个Primer按钮组件，仅通过查看设计或组件属性，有几件重要的事情我们无法知道：

组件实现时的功能差异。这是一个看起来像按钮的链接吗？如果是这样，开发人员将使用 <LinkButton> React组件而不是 <Button>。
供使用辅助技术人士的无障碍标签。图标可能需要替代文本。在某些情况下，按钮文本可能需要一些视觉上隐藏的文本来将其与类似按钮区分开。我们如何知道该文本是什么？如果没有标注，Figma组件没有地方显示这个信息。
用户数据是否被提交。当设计中没有包含明显带有输入字段的表单时，我们如何传达按钮需要特定属性来提交数据？

让这些问题悬而未决，希望有人注意到并猜出正确答案，这是有风险的。

一种简化标注流程同时最小化风险的解决方案

在创建新组件时，一套详细的标注可能是其健壮性和无障碍性的重要因素。一旦组件构建完成，设计团队就可以开始在其设计中添加该组件的实例。当这些设计准备好进行标注时，这些新组件不应该需要再次标注。在大多数情况下，这将是冗余且不必要的——但并非在所有情况下都是如此。

许多Primer组件中存在一些重要的细节，这些细节可能从一个实例到另一个实例发生变化。如果我们使用CVS Health标注工具包，我们应该能够捕捉到这些变化，但我们将无法避免那些冗余且不必要的标注。在构建我们自己的标注工具包时，我们为每个Primer组件构建了一套标注，以便同时完成这两件事。

这个手风琴组件已经进行了详尽的标注，因此工程师在首次构建时拥有所需的一切。这包括标题级别、<detail> 和 <summary> 元素的语义、地标以及装饰性图标。所有这些都内置在组件中，因此当将手风琴添加到新设计时，我们不需要标注大部分内容。

然而，有两件重要的事情我们需要标注，因为它们可能因实例而异：

顶部的可选标题。
手风琴内每个项目的标题级别。

如果我们不指定这些事情，我们将听天由命，页面的标题结构可能会被破坏，或者体验会让人感到困惑，难以理解和导航页面。对于单个按钮或基本手风琴，风险可能较低，但随着模式复杂性、组件嵌套、交互状态、重复实例等的增加，风险也会增加。

与其标注已经内置在组件中的内容，或者将这些细节留给偶然，我们可以添加两个快速标注。一个“图章”指向组件，一个“详情”标注，我们在其中填写一些空白以使标题级别清晰。

由于特定组件细节的提示是预先设置在标注中的，我们称它们为“预设标注”。

介绍我们的Primer无障碍性预设标注

通过这个概念验证，我们选择了十个常用的Primer组件进行同样的处理，并构建了一套新的预设标注来记录这些容易被忽视的无障碍细节——我们的Primer无障碍性预设。

这些Primer组件在实现时若缺少关键细节，往往会引发更多的无障碍审计问题。这些组件的问题通常涉及缺乏适当的标签、错误验证消息或缺少HTML或ARIA属性等。

我们的每个预设标注都链接到组件文档和Storybook演示。这有望帮助开发者直接获得他们所需的技术信息，而无需设计师手动查找和添加链接。我们还在每个预设中包含了如何填写以及如何以无障碍方式使用组件的指导。这有助于设计师在不离开Figma画布的情况下获得内联支持。

想创建您自己的预设标注吗？请查看《设计系统标注，第二部分》

Google的Material Design、Shopify的Polaris、IBM的Carbon或我们的Primer设计系统中的按钮组件都彼此不同。由于预设标注基于特定组件，因此只有当您也使用它们所为之创建的设计系统时，它们才有效。

在本系列的第二部分中，我们将带您了解如何为您的设计系统构建自己的预设标注集，以及在开发开始前记录重要无障碍细节的一些不同方法。

您可能还会喜欢：如果您更喜欢视觉学习，可以在GitHub的Dev社区活动中观看Alexis Lucio探索预设标注，该活动是为启动Figma的Config 2024而举办的。