许多人会在开发工作流程中使用模式样式指南、组件库或完整的设计系统来使用组件驱动型开发。即使您没有正式使用这些工具，也可以使用类似的流程将网站、应用或其他数字产品的大型设计分解成易于管理的部分。
就像搭建物理结构一样，每次构建一段很重要。首先是地基、结构、墙、窗、屋顶，以及介于两者之间的所有物体。组件驱动型开发工具让我们能够为网站、应用和其他数字产品做到这一点。
组件驱动型开发的一些优势包括将内容分解成易于管理的片段，以便缩短这些可重用组件的开发时间。它可让设计人员、前端和后端开发者以及质量检查人员同时工作。客户、设计人员、项目经理等人员也很喜欢，因为网站发布后，他们可以预览构建流程并使用生活风格指南作为参考。
然而，在考虑无障碍设计的情况下，我们在研究模式、组件和设计系统时，会遇到一些问题。您如何知道哪些模式在无障碍功能方面是最佳的？您应该使用既定的模式/库还是创建新的模式/库？您怎么知道这些模式是否真的会对您的用户有所帮助？
选择太多了，很容易对此主题感到困惑。本单元旨在为您提供有关如何评估模式、组件和设计系统的无障碍功能的一般信息，并为您提供一个切入点，帮助您做出更符合无障碍标准的选择。
批判性思考
选择易于访问的模式、组件或设计系统不是火箭科学，但需要时间和批判性思维。事实上，没有“唯一的完美模式”，但可能存在许多可行的选项。学习如何根据自己的具体情况选择最合适的选项。
在后续测试单元中，您将详细了解有关如何评估模式、组件和设计系统的无障碍功能的技术和方法。但在此之前，您需要退一步问自己一些基本问题，例如：
- 是否已存在成熟的可访问模式、组件或设计系统？
- 我支持哪些浏览器和辅助技术 (AT)？
- 是否有任何代码/框架限制或我需要考虑的其他集成/因素/用户需求？
根据您的开发环境和用户需求，您可能还会遇到其他问题或不同问题。请将这些问题作为评估无障碍功能的起点。
现有资源
在构建全新产品之前，请进行尽职调查，并查看可访问的模式、组件和设计系统方面的现有机制。只需稍作研究，你可能会惊讶地发现一个或多个解决方案来满足你的需求。
关于可访问的模式、组件和设计系统的一些重要资源包括：
- 可访问的组件
- 德克大学 ARIA 库
- Gov.UK 设计系统
- 包含性组件
- MagentaA11y
- 为美国联邦政府创建的美国网络设计系统 (USWDS)
- Smashing Magazine 中的无障碍模式列表
对于 JavaScript 框架，以下资源可以直接使用，也可以轻松自定义，以实现无障碍功能：
- 当 CSS 不够用时：针对可访问组件的 JavaScript 要求
- 回应
- Angular：Material 库
- Vue：Vuetenils
但是，对此不必有特别强调，您绝不能只是复制/粘贴代码，然后假定它适合您的环境并自动满足您的用户需求。对于所有模式、组件和设计系统都是如此，即使被标记为“完全可访问”也是如此。
所有资源都应该被视为起点。请务必测试所有内容！
浏览器和辅助技术 (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 框架都允许开发者使用他们选择的几乎任何模式。在此类情况下，您可以采用的限制条件较少，并且可以选择最容易访问的模式选项。
在选择图案、组件或设计系统时，还需要考虑其他注意事项，例如：
- 性能
- 安全性
- 搜索引擎优化
- 语言翻译支持
- 第三方集成
这些因素无疑会影响您的模式选择，但您还应该考虑创建内容和代码本身的人员。您选择的模式必须足够可靠，能够处理有关编辑器生成内容或用户生成的内容的任何潜在限制，并且构建方式必须可供所有无障碍功能知识的开发者使用。
检查您的掌握程度
测试您对模式知识的掌握情况
无障碍组件是否始终对用户可用？