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