许多人在开发工作流程中使用组件驱动型开发，并采用样式指南、组件库或完整的设计体系。即使您没有正式使用过这些工具，也可能使用过类似流程将网站、应用或其他数字产品的大型设计分解为可管理的部分。
与建造实体结构一样，一次构建一个部分非常重要。首先是地基、结构、墙壁、窗户、屋顶以及介于两者之间的所有部分。借助组件驱动型开发工具，我们可以为网站、应用和其他数字产品实现这一目标。
组件驱动型开发的一些优势包括将事物分解为可管理的部分，从而减少开发时间，因为这些组件可重复使用。这样一来，设计师、前端和后端开发者以及质量检查人员就可以同时工作。客户、设计师、项目经理等之所以喜欢它，是因为他们可以预览构建流程，并在网站发布后使用实时风格指南作为参考。
不过，当我们从无障碍功能的角度来看待模式、组件和设计系统时，会产生一些疑问。如何知道哪些模式在无障碍方面表现最佳？您应该使用既有的设计模式或库，还是创建新的设计模式或库？您如何知道这些模式是否真的能帮助用户？
面对如此多的选择，您可能会对模式、组件和设计系统感到困惑。本模块旨在为您提供有关如何评估模式、组件和设计系统以实现无障碍功能的常规信息，并为您提供一个起点，帮助您做出更易于访问的选择。
深思熟虑
选择无障碍模式、组件或设计系统并非难事，但确实需要时间和批判性思维。事实上，根本不存在所谓的“完美模式”，但可能有许多可行的选项。关键在于学会根据自己的具体情况选择最佳方案。
在后续的测试模块中，您将详细了解如何评估模式、组件和设计系统的无障碍功能。在实现这一目标之前，您需要问自己一些基本问题，例如：
- 是否已存在既定的无障碍模式、组件或设计系统？
- 我支持哪些浏览器和辅助技术 (AT)？
- 是否存在任何代码或框架限制？我是否还应考虑其他集成、因素或用户需求？
根据您的开发环境和用户需求，您可能会遇到其他或不同的问题。在进行无障碍评估时，请先考虑以下问题。
已建立的资源
在构建全新内容之前，请尽职调查并查看现有的无障碍模式、组件和设计系统。只需稍作研究，您可能会惊喜地发现适合您需求的解决方案（或多个解决方案）。
以下是一些关于无障碍模式、组件和设计系统的优质资源：
- 无障碍组件
- Deque University ARIA 库
- Gov.UK 设计系统
- 包含性组件
- MagentaA11y
- 美国 Web 设计系统 (USWDS)，专为美国联邦政府打造
- Smashing Magazine 提供的无障碍模式列表
对于 JavaScript 框架，以下资源默认情况下相当容易访问，或者可以自定义以实现无障碍功能：
- 仅靠 CSS 无法满足需求：无障碍组件的 JavaScript 要求
- React
- Angular：Material 库
- Vue：Vuetensils
不过，需要特别强调的是，您绝不应只是复制/粘贴代码，然后就假设它会适合您的环境并自动满足用户需求。所有模式、组件和设计系统都是如此，即使它们被标记为完全无障碍。
所有资源都应视为出发地。请务必测试所有内容！
浏览器和辅助技术 (AT) 支持
在研究了可能适用于您的开发环境的一些基本模式、组件或完整的设计系统后，您可以继续研究辅助技术支持。在评估模式、组件和设计系统时，您需要重点关注的一种主要辅助技术是屏幕阅读器。
屏幕阅读器在设计时考虑了特定浏览器，因此与这些浏览器搭配使用时效果最佳。我们将在有关 AT 测试的模块中更详细地介绍此主题，但就模式评估而言，了解这些组合的存在有助于您了解自己需要哪些方面的支持。
| 屏幕阅读器 | 操作系统 | 浏览器兼容性 | 费用 |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome、Firefox、Edge | 需要许可（有免费的 40 分钟版本） |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome 和 Firefox | 免费（需要下载） |
| Narrator（讲述者） | Windows | Edge | 免费（内置于 Windows 机器中） |
| 旁白 | macOS | Safari | 免费（内置于 macOS 设备中） |
| Orca | Linux | Firefox | 免费（内置于基于 GNOME 的发行版中） |
| TalkBack | Android | Chrome 和 Firefox | 免费（内置于某些版本的 Android 操作系统中） |
| 旁白 | iOS | Safari | 免费（内置于 iOS 设备中） |
浏览器支持通常很复杂，当您将辅助技术设备和 ARIA 规范添加到组合中时，情况会变得更加棘手。
不过，这并非都是坏消息。幸运的是，HTML5 无障碍功能、无障碍功能支持和 WCAG 的自定义控件无障碍功能开发核对清单等优质资源有助于我们更好地了解当前浏览器和辅助技术设备的支持情况，甚至了解何时应首先使用 ARIA。
这些资源概述了可用的不同 HTML 和 ARIA 模式子元素，包括开源社区测试。您还可以查看桌面设备、移动浏览器和辅助技术设备的示例模式。因此，这些资源可以帮助您更轻松地决定要使用的样式、组件和设计系统。
其他注意事项
选择了一些无障碍的基本模式或组件，并考虑了浏览器和辅助技术设备支持后，您可以继续提出有关模式、组件、设计系统和开发环境的更具体的上下文相关问题。
例如，如果您在内容管理系统 (CMS) 中工作或有旧版代码，则可使用的模式可能会受到一些限制。经过审核，可能会迅速将多种图案选择减少到一两种。
许多 JavaScript 框架都允许开发者使用他们选择的几乎任何模式。在这些情况下，您可能受到的限制较少，可以选择最易于访问的图案选项。
选择样式、组件或设计系统时，还需要考虑其他因素，例如：
- 性能
- 安全
- 搜索引擎优化
- 语言翻译支持
- 第三方集成
这些因素无疑会影响您的模式选择，但您还应考虑内容和代码本身的创作者。您选择的模式必须足够稳健，能够应对与编辑器生成的内容或用户生成的内容相关的任何潜在限制，并且必须以所有无障碍功能知识水平的开发者都能使用的方式构建。