无障碍

如果你想成为一名 Web 开发者，学习一些 HTML、CSS 和 JavaScript 会很有用。除了机械使用之外，学习如何负责任地使用这些技术也很重要，以便所有读者都可以在网络上使用你的创作。为了帮助你实现这一目标，本模块将涵盖一般最佳实践（在 HTML、CSS 和 JavaScript 主题中进行了演示）、跨浏览器测试 以及一些从一开始就强制实现可访问性的技巧。我们将特别详细地介绍可访问性。

¥Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.

概述

¥Overview

当有人将某个网站描述为 "accessible" 时，他们的意思是任何用户都可以使用其所有功能和内容，无论用户如何访问网络，甚至尤其是有主体或精神障碍的用户。

¥When someone describes a site as "accessible", they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.

  • 键盘、鼠标和触摸屏用户以及用户访问网络的任何其他方式都应该可以访问网站，包括屏幕阅读器和 Alexa 和 Google Home 等语音助手。
  • 应用应该能够被人们理解和使用，无论其听觉、视觉、主体或认知能力如何。
  • 网站也不应该造成伤害：运动等网络功能可能会导致偏头痛或癫痫发作。

默认情况下，如果使用正确，HTML 是可访问的。Web 可访问性涉及确保内容保持可访问性，无论谁以及如何访问 Web。

¥By default, HTML is accessible, if used correctly. Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.

Firefox Accessibility Inspector 是一个非常有用的工具，用于检查网页上的可访问性问题。以下视频对其进行了很好的介绍：

¥The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:

先决条件

¥Prerequisites

为了充分利用本模块，最好至少完成 HTML、CSS 和 JavaScript 主题的前两个模块，或者更好的是完成可访问性模块的相关部分，如下所示 你完成相关的技术主题。

¥To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

注意：如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备，则可以尝试在线编码程序（例如 JSBin 或 Glitch）中的大多数代码示例。

¥Note: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Glitch.

指南

¥Guides

什么是可达性？

本文从该模块开始，详细介绍了可访问性是什么 - 这包括我们需要考虑哪些人群及其原因、不同的人使用哪些工具与网络交互，以及我们如何使可访问性成为我们 Web 开发的一部分 工作流程。

HTML:无障碍的良好基础

只要确保正确的 HTML 元素始终用于正确的目的，就可以访问大量 Web 内容。本文详细介绍了如何使用 HTML 来确保最大程度的可访问性。

CSS 和 JavaScript 辅助功能最佳实践

CSS 和 JavaScript 如果使用得当，也有可能提供可访问的 Web 体验，但如果使用不当，它们可能会严重损害可访问性。本文概述了一些 CSS 和 JavaScript 最佳实践，应考虑这些最佳实践，以确保即使是复杂的内容也尽可能易于访问。

WAI-ARIA 基础知识

继上一篇文章之后，有时制作涉及非语义 HTML 和动态 JavaScript 更新内容的复杂 UI 控件可能会很困难。WAI-ARIA 是一种可以通过添加浏览器和辅助技术可以识别和使用的进一步语义来帮助解决此类问题的技术，以便让用户了解正在发生的情况。在这里，我们将展示如何在基本层面上使用它来提高可访问性。

无障碍多媒体

另一类可能造成可访问性问题的内容是多媒体 - 视频、音频和图片内容需要提供适当的文本替代，以便辅助技术及其用户能够理解它们。本文展示了如何操作。

移动辅助功能

随着移动设备上的 Web 访问变得如此流行，并且 iOS 和 Android 等流行平台拥有成熟的辅助工具，因此考虑 Web 内容在这些平台上的可访问性非常重要。本文着眼于特定于移动设备的辅助功能注意事项。

评估

¥Assessments

辅助功能故障排除

在本模块的评估中，我们向你展示一个简单的网站，其中包含一些需要你诊断和修复的可访问性问题。

也可以看看

¥See also