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