模式、组件和设计系统

许多人会在开发工作流程中使用模式样式指南、组件库或完整的设计系统来使用组件驱动型开发。即使您没有正式使用这些工具,也可以使用类似的流程将网站、应用或其他数字产品的大型设计分解成易于管理的部分。

就像搭建物理结构一样,每次构建一段很重要。首先是地基、结构、墙、窗、屋顶,以及介于两者之间的所有物体。组件驱动型开发工具让我们能够为网站、应用和其他数字产品做到这一点。

组件驱动型开发的一些优势包括将内容分解成易于管理的片段,以便缩短这些可重用组件的开发时间。它可让设计人员、前端和后端开发者以及质量检查人员同时工作。客户、设计人员、项目经理等人员也很喜欢,因为网站发布后,他们可以预览构建流程并使用生活风格指南作为参考。

然而,在考虑无障碍设计的情况下,我们在研究模式、组件和设计系统时,会遇到一些问题。您如何知道哪些模式在无障碍功能方面是最佳的?您应该使用既定的模式/库还是创建新的模式/库?您怎么知道这些模式是否真的会对您的用户有所帮助?

选择太多了,很容易对此主题感到困惑。本单元旨在为您提供有关如何评估模式、组件和设计系统的无障碍功能的一般信息,并为您提供一个切入点,帮助您做出更符合无障碍标准的选择。

批判性思考

选择易于访问的模式、组件或设计系统不是火箭科学,但需要时间和批判性思维。事实上,没有“唯一的完美模式”,但可能存在许多可行的选项。学习如何根据自己的具体情况选择最合适的选项。

在后续测试单元中,您将详细了解有关如何评估模式、组件和设计系统的无障碍功能的技术和方法。但在此之前,您需要退一步问自己一些基本问题,例如:

  • 是否已存在成熟的可访问模式、组件或设计系统?
  • 我支持哪些浏览器和辅助技术 (AT)?
  • 是否有任何代码/框架限制或我需要考虑的其他集成/因素/用户需求?

根据您的开发环境和用户需求,您可能还会遇到其他问题或不同问题。请将这些问题作为评估无障碍功能的起点。

现有资源

在构建全新产品之前,请进行尽职调查,并查看可访问的模式、组件和设计系统方面的现有机制。只需稍作研究,你可能会惊讶地发现一个或多个解决方案来满足你的需求。

关于可访问的模式、组件和设计系统的一些重要资源包括:

对于 JavaScript 框架,以下资源可以直接使用,也可以轻松自定义,以实现无障碍功能:

但是,对此不必有特别强调,您绝不能只是复制/粘贴代码,然后假定它适合您的环境并自动满足您的用户需求。对于所有模式、组件和设计系统都是如此,即使被标记为“完全可访问”也是如此。

所有资源都应该被视为起点。请务必测试所有内容!

浏览器和辅助技术 (AT) 支持

在研究了适用于您的开发环境的一些基本模式、组件或完整设计系统后,您可以继续获得辅助技术支持。在评估模式、组件和设计系统时,您需要重点关注的一种主要 AT 类型是屏幕阅读器。

屏幕阅读器在构建时考虑了特定浏览器,在与这些浏览器搭配使用时效果最佳。我们将在关于 AT 测试的单元中详细介绍此主题,但出于模式评估目的,了解存在这些组合会很有帮助,这样您就可以知道在支持方面需要什么。

屏幕阅读器 操作系统 浏览器兼容性 费用
使用语音访问作业 (JAWS) Windows Chrome、Firefox、Edge 需要许可(有 40 分钟的免费版本)
非可视化桌面访问 (NVDA) Windows Chrome 浏览器和 Firefox 免费(需要下载)
Narrator(讲述者) Windows Edge 免费(内置于 Windows 计算机中)
VoiceOver macOS Safari 免费(内置于 macOS 机器)
虎鲸 Linux Firefox 免费(内置于基于 Gnome 的发行版中)
TalkBack Android Chrome 浏览器和 Firefox 免费(内置于特定版本的 Android 操作系统中)
VoiceOver iOS Safari 免费(iOS 设备内置)

浏览器支持通常很复杂,而当您向混合中添加 AT 设备和 ARIA 规范时,情况会变得更加复杂。

但这不是坏消息。幸运的是,我们提供了许多优质资源,例如 HTML5 无障碍功能无障碍功能支持和 WCAG 的自定义控件无障碍开发核对清单,这有助于我们更好地了解当前的浏览器和 AT 设备支持,甚至还能从一开始就使用 ARIA。

这些资源概述了可用的不同 HTML 和 ARIA 模式子元素,包括开源社区测试。 您还可以查看针对桌面设备和移动浏览器/AT 设备的一些模式示例。因此,这些资源可以帮助您就可能需要使用的模式、组件和设计系统做出更容易访问的决策。

其他注意事项

选择一些可访问的基本模式或组件,并考虑浏览器和 AT 设备支持因素后,您可以继续讨论有关模式、组件、设计系统和开发环境的更具体的上下文问题。

例如,如果您使用的是管理系统 (CMS) 或拥有旧版代码,则您可以使用的模式可能存在一些限制。经过审核,一些模式选择可能会快速减少为一两个选项。

许多 JavaScript 框架都允许开发者使用他们选择的几乎任何模式。在此类情况下,您可以采用的限制条件较少,并且可以选择最容易访问的模式选项。

在选择图案、组件或设计系统时,还需要考虑其他注意事项,例如:

  • 性能
  • 安全性
  • 搜索引擎优化
  • 语言翻译支持
  • 第三方集成

这些因素无疑会影响您的模式选择,但您还应该考虑创建内容和代码本身的人员。您选择的模式必须足够可靠,能够处理有关编辑器生成内容或用户生成的内容的任何潜在限制,并且构建方式必须可供所有无障碍功能知识的开发者使用。

检查您的掌握程度

测试您对模式知识的掌握情况

无障碍组件是否始终对用户可用?

不可以,您必须先测试组件。
是的,您无需执行额外的操作即可使用这些组件。