构建可访问的网站Building Accessible Websites

Web 填充了动态且复杂的网站、应用程序和用户界面,这些网站、应用程序和用户界面是使用 HTML、CSS 和 JavaScript 的组合构建的。The web is filled with dynamic and complex websites, applications, and user interfaces built using a combination of HTML, CSS, and JavaScript. 但是,当设计和构建时没有考虑辅助功能时,依赖辅助技术来浏览 Web 的人很难使用这些复杂的网站。 However, when designed and built without accessibility in mind, these complex websites are difficult to use by people who rely on assistive technologies to browse the web. 构建可供残障人士访问的网站需要有关用户界面的语义信息。Building websites that are accessible to people with disabilities requires semantic information about the user interface. 这允许辅助技术(如屏幕阅读器)传达必要的信息,以帮助具有各种功能的人使用网站。This allows for assistive technologies, like screen readers, to convey the necessary information to help people with a range of abilities use the website.

访问HTML5Accessibility,了解哪些新 HTML5 功能可供 Microsoft Edge。Visit HTML5Accessibility for information on which new HTML5 features are accessibly supported by Microsoft Edge.

辅助功能的工作原理How Accessibility Works

辅助技术添加计算机通常没有的功能。Assistive technologies add capabilities that computers don't usually have. 例如,视觉受损的用户可能将键盘与辅助技术(如屏幕阅读器)结合使用,而不是直接将浏览器与鼠标和屏幕结合使用。For example, a visually impaired user might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen. 对于 Microsoft 平台和 Web 上的应用程序,辅助技术与 Microsoft UI 自动化、特定于应用程序的对象模型(如 Microsoft Edge 中的文档对象模型 \ (DOM) )或这些对象的组合交互。For applications on Microsoft platforms and on the web, the assistive technology interacts with Microsoft UI Automation, an application-specific object model such as the Document Object Model (DOM) in Microsoft Edge, or a combination of these.

对于 Web 开发人员,某些 HTML 元素会映射到 UI 自动化对象,因此在选择这些 HTML 元素时,开发人员可以使用内置于这些元素的辅助功能属性和事件。For web developers, certain HTML elements are mapped to UI Automation objects, so in selecting those HTML elements, the developer can use the accessibility properties and events built in to those elements. 开发网站时,通常只需关注确保 API 正确写入 \ (或指定适当的元素) ,以便应用程序可访问。While developing your website, you usually only need to be concerned with ensuring that the API is correctly written to (or that the appropriate element is specified), in order for the application to be accessible. 有关详细信息,请参阅 ARIA 和 Microsoft Edge UI 自动化。Check out ARIA and UI Automation in Microsoft Edge for more information. 有关可访问的通用 Windows 平台 \ (UWP) 应用的信息,请导航到 Windows 开发人员中心 中的辅助功能主题。For information on accessible Universal Windows Platform (UWP) apps, navigate to the Accessibility topic in the Windows Dev Center.

通过良好的编码实践,可以解决与动态内容相关的许多常见辅助功能问题,并且 WCAG 2.0 文档包括许多技术和最佳实践,可帮助你创建更易于访问的动态 Web 应用程序。Many common accessibility issues with dynamic content can be addressed by good coding practice, and the WCAG 2.0 documentation includes many techniques and best practices to help you create more accessible dynamic web applications. 但是,即使正确编码,也不必访问动态内容。Even when coded properly, however, dynamic content is not necessarily accessible. 可访问的富 Internet 应用程序 (ARIA) 可帮助解决此问题。Accessible Rich Internet Applications (ARIA) helps overcome this issue.

有关 Web 辅助功能详细信息,请参阅 Web辅助功能计划为 WEB 辅助功能简介 (一) 。 For more information on web accessibility, check out the Introduction to Web Accessibility by the Web Accessibility Initiative (WAI).

ARIAARIA

W3C 的 Web 辅助功能计划 (ARIA) ARIA规范定义为使所有人员均可访问的动态 Web 内容和自定义用户界面的语法。The Accessible Rich Internet Applications (ARIA) specification by the W3C's Web Accessibility Initiative defines as a syntax for making dynamic web content and custom user interfaces accessible to all people. ARIA 通过使用旨在传达自定义语义的其他属性 \ (角色、属性和状态) 扩展 HTML。ARIA extends HTML by using additional attributes (roles, properties, and states) that are designed to convey custom semantics. 浏览器使用这些属性将控件的状态和角色传递到辅助功能 API。These attributes are used by browsers to pass along the controls' state and role to the accessibility API.

角色、属性和状态Roles, Properties, and States

ARIA 角色使用 role 属性在元素上设置,以提供有关元素的辅助技术和辅助功能 API 信息。ARIA roles are set on elements using the role attribute to give assistive technologies and accessibility APIs information about the element. 例如,分配以下 <li> 元素以 role="menuitem" 表示它是菜单中的项。For example, the below <li> element is assigned role="menuitem" to signify it's an item in a menu.

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

ARIA 状态和属性是 aria 前缀的属性,可提供有关对象的特定信息,以帮助形成角色的性质的定义。ARIA states and properties are aria-prefixed attributes that provide specific information about an object to help form the definition of the nature of roles. 属性是对象的性质所必不可少的属性,如 aria-readonlyaria-haspopupProperties are attributes that are essential to the nature of an object, like aria-readonly and aria-haspopup. 更改属性会影响对象的含义。Changing a property affects the meaning of the object. 在下面的示例中,属性 aria-haspopup="true" 在菜单项上设置 <li> ,以表示其具有弹出窗口。In the example below, the property aria-haspopup="true" is set on a <li> menu item to signify it has a popup.

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

状态不会更改对象的性质,但表示与对象或用户与该对象的交互关联的信息,如 aria 隐藏或 aria 检查States do not change the nature of the object, but represent information associated with the object or user interaction with the object, like aria-hidden or aria-checked. 例如,以下示例 aria-checked="false" 中的状态表示复选框未选中。For example, the state aria-checked="false" in the example below represents that the checkbox is not checked.

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

转到 W3C 的角色模型以查看角色、属性和状态的完整列表。Go to The Roles Model by the W3C to see a full list of roles, properties, and states.

有关 ARIA 的信息,请导航到"资源" 部分中的 "ARIA"。For more information on ARIA, navigate to ARIA in the Resources section.

辅助技术兼容性测试Assistive Technology Compatibility Testing

验证正在构建的网站是否使用真实的辅助技术是确保残障用户获得良好体验的最佳方法。Verifying that the website you are building works with real assistive technologies is the best way to ensure a good experience for your users with disabilities. 由于许多辅助技术都使用键盘,因此测试网站的键盘辅助功能是一个很好的起点。Since many assistive technologies make use of the keyboard, testing the keyboard accessibility of your website is a good place to start. 键盘兼容性 测试验证用户是否无需鼠标即可访问所有交互式控件。Keyboard compatibility testing validates that users have access to all interactive controls without requiring a mouse. Microsoft Accessibility Insights for Web是适用于 Microsoft Edge 和 Chrome 的浏览器扩展,可指导你并展示一些常见问题。Microsoft Accessibility Insights for Web is a browser extension for Microsoft Edge and Chrome that guides you and reveals several common issues.

一旦确信你的网站能很好地使用键盘,请通过其他辅助技术(如屏幕阅读器)试用它。Once you are confident that your website works well with a keyboard, try it with other assistive technologies, such as screen readers. 它可发现以下问题。It uncover issues in the following.

  • 您的 HTML、ARIA 和 CSS。Your HTML, ARIA, and CSS.
  • 对功能或技术的辅助技术的支持级别。The level of support of an assistive technology for a feature or technique.

不同的浏览器可能将元素映射到平台辅助功能 API 的方式与Microsoft Edge。Different browsers may map elements to platform accessibility APIs differently than Microsoft Edge. 在构建接口时,考虑每个差异非常重要。While building your interface, it is important to consider each difference.

WebAIM 与屏幕阅读器和低视力用户进行调查,帮助你确定要测试哪些辅助技术和浏览器。WebAIM conducts surveys with screen reader and low vision users that help you decide which assistive technologies and browsers you want to test.

了解如何测试Learning How to Test

辅助技术是复杂的工具。Assistive technologies are sophisticated tools. 不要假定你能够立即开始使用辅助技术进行测试,而无需首先了解它的工作原理。Do not assume that you are able to immediately start testing with an assistive technology without first learning about how it works. 学习使用屏幕阅读器进行测试具有一个特别容易学习的曲线。Learning to test with a screen reader has an especially steep learning curve. 当问题与误用屏幕阅读器有关时,屏幕阅读器用户可能会假设发生了屏幕阅读器 Bug。A novice screen reader user may assume that a screen reader bug has occurred while the issue is related to misuse of the screen reader.

有关学习使用辅助技术进行测试的信息,请导航到使用 WebAIM 上的 屏幕 阅读器进行测试。For more information about learning to test with assistive technologies, navigate to Testing with Screen Readers on WebAIM.

本地测试Testing Locally

大多数设备包括内置于操作系统的辅助技术。Most devices include assistive technology that is built-in to the OS. Microsoft Windows包括屏幕阅读器Windows 讲述人和Windows放大镜Microsoft Windows includes the Windows Narrator screen reader and Windows Magnifier. 可以下载第三方辅助技术,如[NVDA、FreedomscientificSoftwareJaws]和ZoomText。 3rd party assistive technologies like NVDA, FreedomscientificSoftwareJaws, and ZoomText are available to download. Apple macOS 包括 VoiceOver 屏幕阅读器。Apple macOS includes the VoiceOver screen reader. iOS、Android 和 Linux 都支持各种辅助技术。And iOS, Android, and Linux all support a variety of assistive technologies.

虚拟机和仿真器中的测试Testing in Virtual Machines and Emulators

在 macOS 下,如果你希望使用仅适用于 Windows(如 Windows 讲述人 或 NVDA)的辅助技术进行测试,Windows虚拟机。Under macOS, if you want to test with an assistive technology only available for Windows, like Windows Narrator or NVDA, create a Windows virtual machine. 具有 Microsoft Edge \ (EdgeHTML) 和 IE 的虚拟机可用于虚拟机下载页上的 VirtualBox 和VMWare。Virtual machines with Microsoft Edge (EdgeHTML) and IE are available for VirtualBox and VMWare on the Virtual Machines download page.

Android Studio 包含一个仿真器,用于测试 Android 辅助功能套件 中的辅助技术Android Studio includes an emulator that for you to test assistive technologies in the Android Accessibility Suite. 按照说明 设置虚拟设备 并启动 仿真器,然后从 GooglePlay 商店安装 Android 辅助功能套件。Follow the instructions to set up a virtual device and start the emulator, then install Android Accessibility Suite from the GooglePlay store.

备注

iOS 模拟器当前不包括 VoiceOver。The iOS Simulator does not currently include VoiceOver.

基于云的测试工具Cloud-based Testing Tools

如果辅助技术在你的操作系统上不可用,或者你无法将辅助技术安装在虚拟机或仿真器上,则基于云的辅助技术测试工具是下一个最佳工具。If an assistive technology is not available on your OS or you not possible to install one on a virtual machine or emulator, cloud-based assistive technology testing tools are the next best thing.

  • Assistiv Labs (商业) , 使你能够通过任何新式 Web 浏览器手动测试辅助技术。Assistiv Labs (commercial) enables you to manually test with assistive technologies through any modern web browser. 选择辅助技术和浏览器,它将你与可以交互的虚拟机、仿真器或真实设备相连接。Choose an assistive technology and browser and it connects you with a virtual machine, emulator, or real device with which you may interact.

资源Resources

辅助功能基础知识Accessibility Basics

A11Y ProjectThe A11Y Project

A11Y Project社区推动的一项工作,用于简化 Web 辅助功能。The A11Y Project is a community-driven effort to make web accessibility easier. 查看A11Y Project了解基本的辅助功能原则、辅助功能模式和小组件库,以及辅助功能软件、博客、书籍和工具上的资源。Check out The A11Y Project site to learn about basic accessibility principles, their accessible pattern and widget library, and their resources on accessibility software, blogs, books, and tools.

Web 辅助功能计划 (,) Web Accessibility Initiative (WAI)

W3C Web 辅助功能 (一) ,旨在 帮助改善 Web 的辅助功能。The W3C Web Accessibility Initiative (WAI) is an effort to help improve the accessibility of the web. 他们的网站为 Web 辅助功能入门、包含设计、教程和演示文稿提供了各种资源。Their site provides a variety of resources for Getting Started with Web Accessibility, Designing for Inclusion, tutorials and presentations, and more.

辅助功能博客Accessibility Blogs

TPGi、LLCTPGi, LLC

TPGi, LLC 为世界各地的组织提供咨询和技术解决方案,以确保其客户在满足政府标准和国际标准的同时有效且高效地接触所有受众。TPGi, LLC provides consulting and technology solutions to organizations around the world to ensure their clients reach all audiences effectively and efficiently, while meeting governmental and international standards. 他们的博客涵盖了 Web 辅助功能最佳实践、辅助功能工具和辅助功能趋势等主题。Their blog covers topics like web accessibility best practices, accessibility tools, and accessibility trends.

易于访问Simply Accessible

Simply Accessible 是一个辅助功能专家团队,提供辅助功能培训、咨询等,以更改对 Web 上的辅助功能感知。Simply Accessible is a team of accessibility specialists providing accessibility training, consulting and more to change the perception of accessibility on the web. 他们 的文章 部分讨论了 Web 辅助功能、辅助设计等的最佳实践。Their Articles section discusses best practices for web accessibility, accessible design, and more.

级别访问Level Access

Level Access 是一家数字辅助功能公司,支持其客户开发并部署可访问的产品和服务。Level Access is a digital accessibility firm supporting their clients in developing and deploying accessible products and services. 他们的博客介绍 ARIA 最佳实践、辅助功能趋势、网络研讨会等主题。Their blog addresses topics like ARIA best practices, accessibility trends, webinars, and more.

辅助示例Accessible Examples

ally.js - 教程ally.js - Tutorials

JavaScript 库,通过简化辅助功能帮助现代 Web 应用程序解决辅助功能问题。JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler. 有关详细信息,请导航到"ally.js - 教程"。For more information, navigate to ally.js - Tutorials.

OpenAjax 示例OpenAjax Examples

OpenAjax 联盟网站是验证一些适用于一个使用一百万位用户规则且提供一些一系列一些的一些一线实现示例的优秀资源。The OpenAjax Alliance website is an excellent resource for verifying the rules for WAI-ARIA and provides a number of examples of WAI-ARIA implementations.

模式Patterns

A11Y Project提供了一个可访问小组件和模式(如菜单、按钮、工具提示等)的库。The A11Y Project offers a library of accessible widgets and patterns like menus, buttons, tooltips, and more. 有关详细信息,请导航到 模式For more information, navigate to Patterns.

辅助功能技术&工具Accessibility Techniques & Tools

辅助功能:为用户创建辅助扩展Microsoft EdgeAccessibility: Creating accessible extension icons for Microsoft Edge

获取有关为用户创建辅助扩展图标Microsoft Edge。Get guidance on creating accessible extensions icons for Microsoft Edge. 有关详细信息,请导航到"辅助功能:为用户创建辅助扩展Microsoft Edge"。For more information, navigate to Accessibility: Creating accessible extension icons for Microsoft Edge.

辅助名称和说明:计算和映射 1.1Accessible Name and Description: Computation and Mappings 1.1

此 W3C 映射文档介绍了浏览器如何确定 Web 内容语言中可访问对象的名称和说明,以及如何在辅助功能 API 中公开它们。This W3C mapping document explains how browsers determine name and descriptions of accessible objects from web content languages and expose them in accessibility APIs. 有关详细信息,请导航到"辅助名称"和"说明:计算和映射 1.1"。For more information, navigate to Accessible Name and Description: Computation and Mappings 1.1.

辅助功能评估资源Accessibility Evaluation Resources

辅助功能评估资源是 W3C 的一个多页资源,概述了用于评估网站辅助功能的不同方法。Accessibility Evaluation Resources is a multi-page resource by the W3C that outlines different approaches for evaluating websites for accessibility. 有关详细信息,请导航到"辅助功能评估资源"。For more information, navigate to Accessibility Evaluation Resources.

辅助技术兼容性测试Assistive technology compatibility tests

显示不同的内容类型和标准在辅助技术 \ (AT) 如屏幕阅读器中的行为的测试结果。Test results showing how different content types and standards behave in assistive technologies (AT) like screen readers. 有关详细信息,请导航到 辅助技术兼容性测试For more information, navigate to Assistive technology compatibility tests.

构建可访问的网站变得更加简单Building accessible websites just got a lot easier

本 .NET Web 开发和工具博客文章Visual Studio扩展 Web辅助功能检查器This .NET Web Development and Tools blog post describes the Visual Studio extension Web Accessibility Checker. 有关详细信息,请导航到 "构建可访问的网站"变得更加简单For more information, navigate to Building accessible websites just got a lot easier.

核心辅助功能 API 映射 1.1Core Accessibility API Mappings 1.1

此 W3C 映射文档说明如何向辅助功能 API 公开 Web 内容语言的语义。This W3C mapping document explains how the semantics of web content languages are exposed to accessibility APIs. 有关详细信息,请导航到核心 辅助功能 API 映射 1.1For more information, navigate to Core Accessibility API Mappings 1.1.

轻松检查 – Web 辅助功能的首次评审Easy Checks – A First Review of Web Accessibility

一系列由一系列由用户进行快速检查的(该快速检查可帮助你了解网页的辅助功能)。A series of quick checks by the WAI that help you asses the accessibility of a web page. 有关详细信息,请导航到"轻松检查 - Web 辅助功能的首次审阅"。For more information, navigate to Easy Checks – A First Review of Web Accessibility.

如何满足 WCAG 2.0How to Meet WCAG 2.0

快速参考 Web 内容辅助功能指南 \ (WCAG) 2.0 要求 \ (成功条件) 和技术。A quick reference to Web Content Accessibility Guidelines (WCAG) 2.0 requirements (success criteria) and techniques. 有关详细信息,请导航到如何 开会 WCAG 2.0For more information, navigate to How to Meet WCAG 2.0.

HTML 辅助功能 API 映射 1.0HTML Accessibility API Mappings 1.0

此 W3C 映射文档说明了 HTML5.1 元素和属性如何映射到平台辅助功能 API。This W3C mappings document explains how HTML5.1 element and attributes map to platform accessibility APIs. 有关详细信息,请导航到"HTML 辅助功能 API 映射 1.0"。For more information, navigate to HTML Accessibility API Mappings 1.0.

快速使用技巧Quick Tips

A11Y工具中有关辅助功能的快速 Web 开发Project。A list of quick web development tips for accessibility by The A11Y Project. 有关详细信息,请导航到"快速使用技巧"。For more information, navigate to Quick Tips.

网站扫描Site Scan

Microsoft Edge Dev 中心上的"网站扫描"工具检查过期库、布局问题和辅助功能问题。The Site Scan tool on Microsoft Edge Dev Center checks for out-of-date libraries, layout issues, and accessibility issues. 有关详细信息,请导航到"网站扫描"。For more information, navigate to Site Scan.

WCAG 2.0 的技术Techniques for WCAG 2.0

W3C 中的技术,为 Web 开发人员提供有关满足 Web 内容辅助功能指南 (WCAG) 2.0 成功 标准的指导。Techniques from the W3C that provide guidance for web developers on meeting Web Content Accessibility Guidelines (WCAG) 2.0 success criteria. 有关详细信息,请导航到 WCAG 2.0 的技术For more information, navigate to Techniques for WCAG 2.0.

使用技巧 Web 辅助功能开发Tips on Developing for Web Accessibility

使用技巧 W3C 中有关开发残障人士更容易访问的 Web 内容的信息。Tips from the W3C on developing web content that is more accessible to people with disabilities. 有关详细信息,请导航到"使用技巧 Web 辅助功能"上的"开发"。For more information, navigate to Tips on Developing for Web Accessibility.

WAI-ARIA 创作实践 1.1WAI-ARIA Authoring Practices 1.1

W3C 提供的一个文档,使读者能够了解如何使用 WIDGET-ARIA 1.1,并推荐使用 WIDGET-ARIA 角色、状态和属性使小组件、导航和行为可供访问的方法。A document by the W3C that provides readers with an understanding of how to use WAI-ARIA 1.1 and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. 有关详细信息,请导航到"一个或多个功能"-"ARIA 创作实践 1.1"。For more information, navigate to WAI-ARIA Authoring Practices 1.1.

一些指南和技术WAI Guidelines and Techniques

由一系列由一系列 WEB 辅助功能指南和由一些用户制定的标准。A series of web accessibility guidelines and standards developed by the WAI. 有关详细信息,请导航到"操作指南和技术"。For more information, navigate to WAI Guidelines and Techniques.

Web 辅助功能评估工具列表Web Accessibility Evaluation Tools List

可帮助确定网站是否满足辅助功能指南的 Web 辅助功能评估工具列表。A list of web accessibility evaluation tools to help determine if websites meet accessibility guidelines. 有关详细信息,请导航到"Web 辅助功能评估工具列表"。For more information, navigate to Web Accessibility Evaluation Tools List.

Web 辅助功能角度:探索对所有人的影响和好处Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone

W3C 关于辅助功能的影响和每个人的权益的一系列简短情境视频。A series of short situational videos by the W3C about the impact of accessibility and the benefits for everyone. 有关详细信息,请导航到"Web 辅助功能角度:探索对所有人的影响和好处"。For more information, navigate to Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone.