设计系统的未来是触手可及的

在我们系列的第三部分中，我们与设计系统和无障碍专家讨论如何将包容性系统作为首要任务。之前，我们讨论了复杂性和自动化。

英雄形象由安德烈亚斯·萨缪尔森拍摄。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px; margin-top: 0px;">截至 2022 年，只有3% 的互联网可供残疾人使用——设计系统表面上是推动这一目标的最佳解决方案。如果每个人都使用相同的部件套件并遵循相同的规则，那么编写可访问性指南肯定也应该很容易，对吗？（正确的？）

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/7f0139432ca6fa109059ee1fe9500cc50310fc07-1205x684.png?q=75&fit=max&auto=format&dpr=0.5 603w,https://cdn.sanity.io/images/599r6htc/localized/7f0139432ca6fa109059ee1fe9500cc50310fc07-1205x684.png?q=75&fit=max&auto=format&dpr=0.75 904w,https://cdn.sanity.io/images/599r6htc/localized/7f0139432ca6fa109059ee1fe9500cc50310fc07-1205x684.png?q=75&fit=max&auto=format&dpr=2 1205w" loading="lazy" alt="显示创建内部设计系统的原因的条形图" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; position: relative;" data-catch-result="fail"/>

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">1. 是什么推动了内部设计系统的创建？

在Material Design 的设计现状调查(2020)中提供创建内部设计系统原因的答复百分比。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">我们有理由相信，这个期待已久的未来现在比以往任何时候都更近。越来越多的公司开始投资于内部设计系统——据Material Design 的设计状况调查报告，到 2020 年，这一数字将增长 22% 1，而三年后的这一数字可能会更高。这种增长的主要动机之一是他们有能力大规模推动无障碍工作。在同一项调查中，47% 的受访者2表示他们的设计系统包含了无障碍指南，这再次比去年大幅增加，当时无障碍性被归为“其他” (8.4%)。现在有更多的工具和完善的标准，例如Web 内容可访问性指南 (WCAG)，以及不断令人信服的法律后果，我们最终可能会采取行动。

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/ff0567837b0cb2151d95eb2850f2f409adb09a09-1205x668.png?q=75&fit=max&auto=format&dpr=0.5 603w,https://cdn.sanity.io/images/599r6htc/localized/ff0567837b0cb2151d95eb2850f2f409adb09a09-1205x668.png?q=75&fit=max&auto=format&dpr=0.75 904w,https://cdn.sanity.io/images/599r6htc/localized/ff0567837b0cb2151d95eb2850f2f409adb09a09-1205x668.png?q=75&fit=max&auto=format&dpr=2 1205w" loading="lazy" alt="显示设计系统工件的条形图； 图标库 (84%) UI Kit (83%) 样式指南 (75%) 大多数受访者 (74%) 还表示他们的设计系统有一个组件代码库。" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; position: relative;" data-catch-result="fail"/>

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">2. 设计系统包含哪些内容？

同样来自Material Design 的设计状态调查(2020)的组织设计系统中包含的特定工件的响应百分比。

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">设计系统和可访问性：完美的一对

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">全球有 10 亿残疾人，每年可支配收入达 1.2 万亿美元，企业越来越难以忽视无障碍环境。许多组织开始认识到让所有人都能使用其产品的重要性，Forrester 将其称为“数字可访问性机会”。创造无障碍产品不仅仅是一个需要勾选的框，它还是一个为增长铺平道路、建立信誉并与消费者建立信任的机会。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">“设计系统与可访问性是完美的结合，”eBay 高级设计主管 Anna Zaremba 说。“可访问性可以融入设计系统的每个部分，从仔细测试的前景色和背景色到单个组件。” 通过促进一致性、完整的文档和持续的反馈，设计系统为在整个产品生态系统中实施可访问性最佳实践提供了完美的脚手架。它们还可以通过将系统级别的调整传播到所有实例来更轻松地大规模推出更改。

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">无障碍方面负责任的人工智能

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">随着人工智能 (AI) 的日益普及，许多设计系统团队正在转向该技术来提高用户的可访问性。结果是出现了一批新的人工智能驱动工具

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/f39e52f23352da57a0c6d40893645f0948ac9653-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.5 2120w,https://cdn.sanity.io/images/599r6htc/localized/f39e52f23352da57a0c6d40893645f0948ac9653-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=0.75 3180w,https://cdn.sanity.io/images/599r6htc/localized/f39e52f23352da57a0c6d40893645f0948ac9653-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format 4240w,https://cdn.sanity.io/images/599r6htc/localized/f39e52f23352da57a0c6d40893645f0948ac9653-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=1.5 6360w,https://cdn.sanity.io/images/599r6htc/localized/f39e52f23352da57a0c6d40893645f0948ac9653-4240x2000.png?q=75&fit=crop&crop=focalpoint&auto=format&dpr=2 8480w" loading="lazy" alt="点、切换、类型和图层的抽象排列" style="box-sizing: inherit; border-style: none; cursor: var(--cursorPointer); display: block; object-fit: cover; aspect-ratio: 21 / 9; width: 298.011px;" data-catch-result="fail"/>

figma-19jvqfh" style="box-sizing: inherit; cursor: var(--cursorPointer); margin: 12px 0px 4px; font-size: 16px; font-variation-settings: "wght" 600, "wdth" 98; line-height: 1.7; letter-spacing: 0px;">

声称可以用一行代码检测和修复网络可访问性问题：自动描述图像，标记未标记的按钮，并引入带有标题的语义结构。

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">无障碍覆盖

可访问性覆盖层是 JavaScript，其编写的目的是帮助解决网站或 Web 应用程序上的可访问性问题。浏览器渲染网站或 Web 应用程序后应用覆盖代码，以对其进行转换。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">人工智能可以成为实现某些方面自动化的有用工具，但正如我们在其他用例中看到的那样，当涉及到需要人类理解和判断的任务时，它常常表现不佳。许多“即插即用”辅助功能小部件和覆盖层会对辅助功能产生负面影响，导致400 多家使用它们的公司提起诉讼。在许多这样的情况下，简单地实现清晰的导航结构和语义代码就可以创建比这些解决方案造成的破坏更具包容性的产品。

figma-nxc6qs" style="box-sizing: inherit; cursor: var(--cursorText); margin: 0px; font-size: 14px; line-height: 1.64; font-variation-settings: "wght" 600;">画外音

VoiceOver是内置于 Apple Inc. macOS、iOS、tvOS、watchOS 和 iPod 操作系统中的屏幕阅读器。通过使用 VoiceOver，用户可以根据语音描述以及键盘（如果是 Mac）来访问其 Macintosh 或 iOS 设备。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">纽约盲人图书馆技术教育家钱西·弗利特 (Chancey Fleet) 表示，该技术有一些负责任的实施方式。她引用了苹果的屏幕识别功能，该功能与VoiceOver协同工作来检测用户界面中元素的布局，包括尚未针对该工具进行优化的应用程序。“苹果确实希望开发者能够参与更容易理解的设计和开发实践。屏幕识别是由用户自行决定的。他们可以启用它并看看它是否能解决问题。”Chancey 解释道。“这并不是试图从真正的无障碍工作中吸走市场资金。这是为用户提供额外工具的一种方式。”

figma-1a2w2qo" style="box-sizing: inherit; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0px 0px 40px; overflow: visible; appearance: none; cursor: var(--cursorPointer); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-weight: inherit; text-align: inherit; position: relative; border: 1px solid var(--quaternary-color); border-radius: 6px; padding-top: 6px; padding-bottom: 6px; outline: none;">

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">随着图像识别能力的不断提高，Chancey 对人工智能处理未标记图像以及为盲人或视障人士生成描述的潜力持乐观态度。“我不认为人工智能很快就能处理主观性或情感效价，但我确实认为它将能够通过相当受控的视觉词汇来帮助解释元素，比如信息图表和条形图，”Chancey说。“辅助工具能够让生活变得更轻松并减少摩擦，但也可能会产生新的依赖性和新的限制。我非常希望在不久的将来，人工智能和机器学习将继续处理更多目前需要人工干预的事情，以确保产品具有包容性。”

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">最好的产品诞生于触手可及的地方

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">从第一天起就构建可访问性意味着从默认可访问的设计系统开始。通过确保每个设计组件和代码元素从一开始就符合可访问性标准，公司可以进一步防止访问问题。加州大学伯克利分校无障碍技术布道者、加州大学无障碍倡议的负责人露西·格雷科 (Lucy Greco) 表示，在将包容性作为设计系统的基础时，团队必须考虑无障碍的所有方面。“残疾人可以在没有鼠标的情况下使用您的设计系统吗？组件是拖放的吗？” 她问。“如果他们进行拖放操作，他们可以使用鼠标模拟键盘来完成该操作吗？”

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">这个概念促使 eBay 的 Anna Zaremba 和几位队友创建了Include，这是一个可以从一开始就轻松集成可访问性的插件。该工具的目标是可访问性注释，使设计人员更容易制定规范，并使开发人员更容易理解需求。“我们想弄清楚如何确保包容性设计成为我们设计过程的一部分，”安娜说。“我们发现可访问性可能令人难以接受，尤其是对于刚刚加入 eBay 且可能不熟悉全行业最佳实践的新设计师来说。”

figma.net.cn/core/extend/ueditor/themes/default/images/img-cracked.png" srcset="https://cdn.sanity.io/images/599r6htc/localized/7a51711f962ad7c0fe2862c2012ce49ee8138e45-1920x960.png?rect=0,10,1920,950&q=75&fit=max&auto=format&dpr=0.5 960w,https://cdn.sanity.io/images/599r6htc/localized/7a51711f962ad7c0fe2862c2012ce49ee8138e45-1920x960.png?rect=0,10,1920,950&q=75&fit=max&auto=format&dpr=0.75 1440w,https://cdn.sanity.io/images/599r6htc/localized/7a51711f962ad7c0fe2862c2012ce49ee8138e45-1920x960.png?rect=0,10,1920,950&q=75&fit=max&auto=format&dpr=2 1920w" loading="lazy" alt="4292aefa-ddd8-4463-a432-51cf804518b9-cover.png" style="box-sizing: inherit; border-style: none; display: block; object-position: 16.52% 34.76%; object-fit: cover; width: 280px; border-radius: 12px; min-width: 280px;" data-catch-result="fail"/>

Include是一个工具，旨在使可访问性 (a11y) 的注释变得更容易 - 设计人员更容易指定，开发人员更容易理解所需内容。目的是在任何项目的设计阶段都考虑可访问性，并帮助设计师与开发人员协作。最终创造任何人都可以使用的数字体验！

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">该团队优先考虑效率，选择构建一个可以集成到现有设计和开发人员工作流程中的插件。使用该工具，人们可以在 Figma 中选择一个顶级框架并运行检查器。从那里，该工具返回一个操作项列表，包括每个操作项的推理，例如向标记为信息性的图像添加替代文本的建议。这些建议是根据 eBay 不同学科的常见问题和错误以及可访问性优先级提供的。“每个人都必须从某个地方开始，我希望该插件有助于让事情变得更容易，”安娜说。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">Anna 和她的团队决定开源该插件，通过Figma 社区向任何人免费提供该插件，并在GitHub上发布代码。“eBay 有着浓厚的文化氛围，将分享我们的工具作为回馈社区的一种方式，”Anna 说道。“我们知道，开源这个工具可以产生更广泛的影响，帮助其他人改进他们的产品并创造更好的数字体验。” 开源还有其他好处：团队不仅可以获得有用的反馈，这也为未来的贡献打开了大门。任何人都可以分叉代码，在其基础上进行构建，然后将其发布回社区。“我真的很感谢所有花时间尝试过并花时间给我们写信的人，”安娜说。“参与其中的人越多，它就会越好。”

figma-81kuz0" style="box-sizing: inherit; cursor: var(--cursorText); margin: 80px 0px 40px; font-size: min(3.8889vw, 56px); font-variation-settings: "wght" 750, "wdth" 74; font-feature-settings: "ss01"; letter-spacing: 0.01em; line-height: 1.12;">无障碍是重中之重

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">那么，公司如何才能优先考虑可访问性呢？正如 eBay 的插件教育队友一样，创建一种让每个人都对可访问性有有效理解的文化也很重要。为此，残疾人需要作为工人和测试人员参与到开发和设计流程中。“当你的团队中有残疾人时，你就不太可能拥有无法使用的产品，”露西说。她补充说，除了最终测试之外，这些队友应该参与创作过程的各个方面，并引用了残疾人社区中的一句众所周知的说法：“没有我们，我们就什么都没有。” Chancey 建议，除了强大的有偿用户测试计划之外，内部团队还需要授权实施可访问性实践，并阻止导致可访问性恶化的发布。

figma-1w80yjd" style="box-sizing: inherit; cursor: var(--cursorText); color: var(--secondary-color); margin-block: 24px;">尽管这些举措都是朝着正确的方向发展，但要让科技变得更具包容性，还有很长的路要走。露西说：“我对未来的希望是，更多的设计系统确保其组件库从第一天起就可以访问，并且由人而不仅仅是机器进行测试。”