使用 ARIA 1.0 和 WebKit 辅助功能节点检查器
在网络25周年之际，WAI-ARIA 1.0——可访问富互联网应用规范——已成为 W3C 推荐标准，这部分归功于 WebKit 的实现。大多数主流网络应用都使用 ARIA 及相关技术来提升可访问性和通用性。许多网页开发者熟悉 ARIA 的简单部分，例如在传统或非语义的 HTML 用法中改造角色，如 <div role="button" tabindex="0">，但 ARIA 还有其他同样重要的用途：
- 改进 SVG 等语言，在这些语言中原生不存在辅助功能语义。
- 增强 EPUB 等基于现有 HTML 语义的技术。
- 允许在原生实现中提供辅助功能，例如
<video>元素的子 DOM 控件。 - 当 HTML 不足时，支持辅助功能和完整的键盘访问，例如数据网格、树形控件或应用对话框。
- 在没有等效语义或功能的情况下，实现可访问的解决方案。例如，HTML 没有类似于“实时”区域的概念。
更多关于这些主题的内容将在下文介绍，包括如何使用 WebKit 网页检查器中新的辅助功能检查特性来诊断和调试问题。
示例 1：SVG 非洲地图中的 ARIA 应用
可伸缩矢量图形 (SVG) 语言不包含指示所表示内容类型的语义，例如图表、插图或交互式应用程序控件。然而，ARIA 角色和属性现在可以用于 SVG 中的光栅和矢量图像，并且 SVG 工作组最近已将 ARIA 正式纳入 SVG 2。以下视频展示了 VoiceOver 在可访问地图上的触摸屏导航。它在每个国家路径上使用了简单的 role="img"，以及一个 aria-labelledby 关系来将该国家路径与文本标签关联起来。观看视频后，请查看测试用例 SVG 非洲地图 的源代码，了解其工作原理。
在 WebKit 在 SVG 中实现 ARIA 之前，盲人体验图表和地图等空间数据的最佳方式是使用膨胀纸或改进的盲文压印机打印昂贵的触觉图形。随着 WebKit 首次原生实现可访问的 MathML，可访问图形在科学、技术、工程和数学（统称为 STEM）研究领域带来了新的可能性。注意：测试用例SVG 非洲地图 基于 Peter Collingridge 的原创作品，并为演示添加了辅助功能。
介绍辅助功能节点检查器
最近的 WebKit 每夜构建版本 在网页检查器的节点属性中包含了新的辅助功能部分。选择任何 DOM 元素即可查看相关辅助功能信息，例如计算出的角色。显示的属性和关系来自 WebCore。辅助功能子节点和父节点无法通过 JavaScript 接口检测到，并且它们与 DOM 不是一对一的映射关系，因此这些关系以前无法供网页开发者使用。许多其他辅助功能属性也同样无法通过渲染的 DOM 或 JavaScript 接口检测到。我们将使用 WebKit 辅助功能节点检查器来诊断和检查下面的示例。
复杂的 ARIA 小部件示例
ARIA 的许多原始功能（如对话框、地标和菜单）已被最近的 HTML 版本作为元素采纳。然而，自 1990 年代以来在网络上常见的交互模式，在 HTML 中仍然没有原生支持或渲染支持不可靠，例如日期选择器、组合框、选项卡集、数据网格、树形控件等。网页开发者必须使用自定义代码或 JavaScript 框架自行渲染所有这些控件。创建 ARIA 小部件可能具有挑战性。下面的示例说明了一些更棘手的实现细节。通过在网页检查器中观察辅助功能属性，可以更轻松地调试这些控件。
示例 2：使用原生焦点事件支持完整键盘的可选择列表框
此演示于 2009 年为苹果全球开发者大会 (WWDC) 创建，并在自定义列表框上使用了“漫游 tabindex”技术。辅助技术不会更改 DOM，因此没有发生任何隐藏的“魔法”。页面中运行的 JavaScript 使用标准事件处理和 DOM 接口，例如 setAttribute() 和 focus()。查看源代码或在 WebKit 调试器中逐步执行以获得更深入的理解。
有关视频中使用的技术和测试用例漫游 tabindex 演示的完整解释，请参阅 WWDC 2009：改进 Web 应用程序的可访问性。
示例 3：带“状态”实时区域的组合框
在网页应用程序的生命周期中，可能会有多个用户感兴趣的点。在列表框示例中，网页应用程序将焦点移动到更新的项目，但移动焦点并非总是合适的。在组合框中，键盘焦点应保留在文本字段上，以便用户可以继续输入。当选择更改时，相关下拉列表中的选定项目会传递给 API，允许屏幕阅读器播报这两个元素的更新。一些组合框有额外的状态显示，以指示结果的总数。在此演示中，我们将使用 ARIA“实时区域”进行状态更新。与之前的示例一样，DOM 中没有发生任何隐藏的“魔法”。页面中运行的 JavaScript 使用标准事件处理和 DOM 接口，例如 setAttribute()。查看源代码或在 WebKit 调试器中逐步执行，以更深入地了解这些技术。
正如这个组合框演示所示，在 ARIA 出现之前，辅助技术同时跟踪和报告多个用户感兴趣点变化的能力在网页应用程序中是无法实现的。
WebKit ARIA 实现的主要贡献者
WebKit 对 ARIA 的实现为 ARIA 1.0 推荐标准的里程碑做出了重要贡献，许多个人参与了这项工作。最初的实现由 Alice Liu Barraclough 和 Beth Dakin 于 2008 年完成。WebCore 中 ARIA 的大部分剩余实现，以及 Mac 和 iOS 平台的映射，由 Chris Fleizach 完成。Sam White 对 WebKit 的辅助功能架构进行了重大改进。Jon Honeycutt、Brent Fulgham、Dominic Mazzoni、Mario Sánchez Prada 等人完成了到 Windows 和 Linux 辅助功能 API 的平台映射。ARIA 测试工具和 WebKit 测试结果的功劳归于 Michael Cooper、Jon Gunderson、Mona Heath、Joseph Scheuhammer、Rich Schwerdtfeger 等人。工作组致谢 的完整列表可在 ARIA 规范中找到。由于这些人的努力，网络成为了一个对所有人更具赋能的资源。谢谢！
ARIA 的未来方向
ARIA 1.0 仍有很大的改进空间，但它是在确保网络平台平等访问、机会和可用性方面迈出的极其重要的一步。ARIA 未来的工作将涵盖 HTML、SVG 和 EPUB 的额外语义，并且一些提议的工作包括对 WebGL 和 Canvas 等自定义视图技术提供非声明性 JavaScript 辅助功能 API 支持。还有一些工作要做，涉及到超越 contenteditable 能力的富文本编辑，例如 Google Docs 和 iCloud 版 iWork 等应用套件中使用的自定义显示和输入代理视图。
行动呼吁
许多 JavaScript 框架中可用的小部件库不包含对辅助功能和键盘行为的支持。如果您是一名前端工程师，您有机会改变这种状况。当您为 JavaScript UI 库做贡献时，请包含对辅助功能的支持。在适当的情况下，使用 focus() 测试您的代码的辅助功能和键盘行为。根据用户焦点事件检测和更新您的网页应用状态。不要仅仅通过 CSS 样式让控件看起来有焦点；请使用真实的键盘焦点。添加和测试辅助功能所需的努力是值得的，它将为您的网页应用带来完美的完成度。您将改善所有用户的体验。
更多视频资源
这些视频每段约一小时，详细介绍了 ARIA 及相关技术。