有关构建可访问网站的资源

  • 项目

Web 充满了使用 HTML、CSS 和 JavaScript 组合构建的动态复杂网站、应用程序和用户界面。 但是，当设计和构建时没有考虑到可访问性，这些复杂的网站很难被依赖 辅助技术 浏览 Web 的人使用。

构建可供残障人士访问的网站需要有关用户界面的语义信息。 可访问的网站允许辅助技术（如屏幕阅读器）传达必要的信息，以帮助具有各种能力的人使用网站。

请访问 HTML5Accessibility ，了解 Microsoft Edge 可访问哪些新的 HTML5 功能。

辅助功能的工作原理

辅助技术增加了计算机通常没有的功能。 例如，视力不佳的用户可能将其键盘与屏幕阅读器等辅助技术结合使用，而不是直接使用带有鼠标和屏幕的浏览器。

对于 Microsoft 平台和 Web 上的应用程序，辅助技术与以下任意组合进行交互：

  • Microsoft UI 自动化。
  • Microsoft Edge 中特定于应用程序的对象模型，例如文档对象模型 (DOM) 。

对于 Web 开发人员，某些 HTML 元素映射到UI 自动化对象，因此在选择这些 HTML 元素时，开发人员可以使用内置于这些元素的辅助功能属性和事件。 开发网站时，通常只需确保 API 正确写入或指定了适当的元素，以便应用程序可访问。

有关详细信息，请参阅 Microsoft Edge 中的 ARIA 和 UI 自动化 。 Windows 开发人员中心中的辅助功能中介绍了辅助通用 Windows 平台 ( UWP) 应用。

良好的编码做法可以解决动态内容的许多常见辅助功能问题。 WCAG 2.0 文档包含许多技术和最佳做法，可帮助你创建更易于访问的动态 Web 应用程序。 但是，即使正确编码，也不一定可以访问动态内容。 可访问的富 Internet 应用程序 (ARIA) 可帮助解决此问题。

有关 Web 辅助功能的详细信息，检查 Web 辅助功能计划 (WAI) 的 Web 辅助功能简介。

ARIA

W3C Web 辅助功能计划 (ARIA) 规范的可访问富 Internet 应用程序定义为使动态 Web 内容和自定义用户界面可供所有人访问的语法。 ARIA 通过使用其他属性来扩展 HTML， (旨在传达自定义语义的角色、属性和状态) 。 浏览器使用这些属性将控件的状态和角色传递给辅助功能 API。

角色、属性和状态

使用 role 属性在元素上设置 ARIA 角色，以提供有关元素的辅助技术和辅助功能 API 信息。 例如，分配以下 <li> 元素 role="menuitem" 以表示它是菜单中的项。

<li role="menuitem">Home</li>

ARIA 状态和属性是 aria 前缀的属性，它们提供有关对象的特定信息，以帮助形成角色性质的定义。 属性是对象性质所必需的属性，如 aria-readonly 和 aria-haspopup。 更改属性会影响 对象的含义。

在下面的示例中，在菜单项上<li>设置 属性aria-haspopup="true"，以表示它具有一个弹出窗口：

<li role="menuitem" aria-haspopup="true">Open</li>

状态不会更改对象的性质，但表示与对象关联的信息，或用户与对象的交互，如 aria-hidden 或 aria-checked。 例如，以下示例中的状态 aria-checked="false" 表示已清除复选框，而不是选中：

<div role="checkbox" aria-checked="false">Accept</div>

若要查看角色、属性和状态的完整列表，请转到 W3C 的角色模型 。

辅助技术兼容性测试

验证你正在构建的网站是否能够使用真正的辅助技术，是确保为残障用户提供良好体验的最佳方式。 由于许多辅助技术都使用键盘，因此测试网站的键盘辅助功能是一个很好的起点。

键盘兼容性测试 验证用户是否有权访问所有交互式控件，而无需鼠标。 Microsoft Accessibility Insights for Web 是 Microsoft Edge 和 Chrome 的浏览器扩展，可指导你并揭示几个常见问题。

一旦你确信你的网站能够很好地使用键盘，请尝试使用其他辅助技术，如屏幕阅读器。 此测试可以发现以下问题：

  • HTML、ARIA 和 CSS。
  • 功能或技术的辅助技术支持级别。

不同的浏览器可能会以与 Microsoft Edge 映射不同的方式将元素映射到平台辅助功能 API。 生成接口时，请务必考虑每个差异。

WebAIM 与 屏幕阅读器 和 弱视 用户一起进行调查，帮助你决定要测试哪些辅助技术和浏览器。

了解如何测试

辅助技术是复杂的工具。 不要认为无需先了解辅助技术的工作原理即可立即开始使用辅助技术进行测试。 学习使用屏幕阅读器进行测试有一个特别陡峭的学习曲线。 屏幕阅读器的新手用户可能认为屏幕阅读器有一个 bug，而问题可能是使用屏幕阅读器时出错。

在 WebAIM 中使用屏幕阅读器进行测试提供了有关学习使用辅助技术进行测试的详细信息。

在本地测试

大多数设备都包含内置于 OS 的辅助技术。 Microsoft Windows 包括 Windows 讲述人 屏幕阅读器和 Windows 放大镜。 第三方辅助技术（如 NVDA、 FreedomscientificSoftwareJaws 和 ZoomText ）可供下载。 Apple macOS 包括 VoiceOver 屏幕阅读器。 iOS、Android 和 Linux 都支持各种辅助技术。

在虚拟机和模拟器中进行测试

在 macOS 下，如果要使用仅适用于 Windows 的辅助技术（如 Windows 讲述人或 NVDA）进行测试，请创建 Windows 虚拟机。

Android Studio 包含一个仿真器，用于在 Android 辅助功能套件中测试辅助技术。 按照说明 设置虚拟设备 并 启动模拟器，然后从 GooglePlay 商店安装 Android 辅助功能套件 。

注意

iOS 模拟器当前不包括 VoiceOver。

基于云的测试工具

如果操作系统上不提供辅助技术，或者无法在虚拟机或仿真器上安装辅助技术，则基于云的辅助技术测试工具是下一个最佳选择。

  • 借助 Assistiv Labs (商业产品) ，你可以通过任何现代 Web 浏览器手动测试辅助技术。 选择辅助技术和浏览器，它将你连接到可以与之交互的虚拟机、仿真器或真实设备。

另请参阅 基于云的模拟器和模拟器。

辅助功能基础知识资源

这些是辅助功能的项目和计划。

A11Y 项目

A11Y 项目 由社区驱动，旨在简化 Web 辅助功能。 查看 A11Y 项目 网站，了解基本的辅助功能原则、辅助功能模式和小组件 库，以及有关辅助功能软件、博客、书籍和工具 的资源 。

WEB 辅助功能计划 (WAI)

W3C Web 辅助功能计划 (WAI) 旨在帮助改进 Web 的可访问性。 他们的网站为入门提供了各种资源，包括 Web 辅助功能、包容性设计、教程和演示文稿等。

辅助功能博客

以下是有关辅助功能的博客。

TPGi， LLC

TPGi， LLC 为世界各地的组织提供咨询和技术解决方案，以确保其客户有效、高效地接触所有受众，同时满足政府和国际标准。 他们的博客涵盖了 Web 辅助功能最佳做法、辅助功能工具和辅助功能趋势等主题。

级别访问

Level Access 是一家数字辅助功能公司，支持其客户开发和部署可访问的产品和服务。 他们的博客涉及 ARIA 最佳做法、辅助功能趋势、网络研讨会等主题。

辅助示例

这些是辅助功能的库和示例。

ally.js - 教程

JavaScript 库，通过简化辅助功能来帮助具有辅助功能问题的现代 Web 应用程序。 有关详细信息，请转到 ally.js - 教程。

OpenAjax 示例

OpenAjax Alliance 网站是验证 WAI-ARIA 规则的优秀资源，并提供许多 WAI-ARIA 实现示例。

模式

A11Y 项目 提供了一个库，包含可访问的小组件和模式，如菜单、按钮、工具提示等。 有关详细信息，请转到 模式。

辅助功能技术和工具

这些是用于改进辅助功能的技术和工具。

辅助功能：为 Microsoft Edge 创建辅助扩展图标

获取有关为 Microsoft Edge 创建辅助扩展图标的指导。 有关详细信息，请转到 辅助功能：为 Microsoft Edge 创建辅助扩展图标。

辅助名称和说明：计算和映射 1.1

此 W3C 映射文档介绍了浏览器如何通过 Web 内容语言确定可访问对象的名称和说明，并在辅助功能 API 中公开它们。 有关详细信息，请转到 辅助名称和说明：计算和映射 1.1。

辅助功能评估资源

辅助功能评估资源是 W3C 提供的多页资源，概述了评估网站可访问性的不同方法。 有关详细信息，请转到 辅助功能评估资源。

辅助技术兼容性测试

测试结果显示不同内容类型和标准在辅助技术 (AT) （如屏幕阅读器）中的行为。 有关详细信息，请转到 辅助技术兼容性测试。

构建可访问的网站要容易得多

这篇 .NET Web 开发和工具博客文章介绍了 Visual Studio 扩展 Web 辅助功能检查器。 有关详细信息，请转到 构建易于访问的网站。

核心辅助功能 API 映射 1.1

此 W3C 映射文档介绍了 Web 内容语言的语义如何向辅助功能 API 公开。 有关详细信息，请转到 核心辅助功能 API 映射 1.1。

轻松检查 - Web 辅助功能的第一次评审

WAI 提供的一系列快速检查，可帮助你评估网页的可访问性。 有关详细信息，请转到 简易检查 - Web 辅助功能的第一次评审。

如何满足 WCAG 2.0

Web 内容辅助功能指南的快速参考 (WCAG) 2.0 要求 (成功标准) 和技术。 有关详细信息，请转到 如何满足 WCAG 2.0。

HTML 辅助功能 API 映射 1.0

此 W3C 映射文档介绍了 HTML5.1 元素和属性如何映射到平台辅助功能 API。 有关详细信息，请转到 HTML 辅助功能 API 映射 1.0。

快速提示

A11Y 项目辅助功能的快速 Web 开发提示列表。 有关详细信息，请转到 快速提示。

站点扫描

Microsoft Edge Dev中心的站点扫描工具会检查过期的库、布局问题和辅助功能问题。 有关详细信息，请转到 站点扫描。

WCAG 2.0 技术

W3C 中的技术为 Web 开发人员提供有关满足 Web 内容辅助功能指南 (WCAG) 2.0 成功条件的指导。 有关详细信息，请转到 WCAG 2.0 的技术。

有关开发 Web 辅助功能的提示

W3C 关于开发 Web 内容（残障人士更容易访问）的提示。 有关详细信息，请转到 有关开发 Web 辅助功能的提示。

WAI-ARIA 创作实践 1.1

W3C 的文档，使读者了解了如何使用 WAI-ARIA 1.1，并建议使用 WAI-ARIA 角色、状态和属性访问小组件、导航和行为的方法。 有关详细信息，请转到 WAI-ARIA 创作实践 1.1。

WAI 指南和技术

WAI 开发的一系列 Web 辅助功能指南和标准。 有关详细信息，请转到 WAI 指南和技术。

Web 辅助功能评估工具列表

Web 辅助功能评估工具列表，可帮助确定网站是否符合辅助功能准则。 有关详细信息，请转到 Web 辅助功能评估工具列表。

Web 辅助功能视角：探索每个人的影响和优势

W3C 提供的一系列简短情景视频，介绍辅助功能对每个人的影响和好处。 有关详细信息，请转到 Web 辅助功能视角：探索每个人的影响和优势。