无障碍访问

如果你想成为一名网页开发者,学习一些 HTML、CSS 和 JavaScript 知识很有用。除了机械化的使用之外,学习如何负责任地使用这些技术也很重要,以便所有读者都能在网络上使用你创作的内容。为了帮助你实现这一点,本模块将涵盖一些通用的最佳实践(这些实践贯穿于整个 HTMLCSSJavaScript 主题),跨浏览器测试,以及一些从一开始就强制执行可访问性的技巧。我们将详细介绍可访问性。

概述

当有人将一个网站描述为“可访问的”时,他们的意思是任何用户都可以使用其所有功能和内容,无论用户如何访问网络——即使是并且尤其是那些有身体或精神障碍的用户。

  • 网站应该能够被键盘、鼠标和触摸屏用户以及用户访问网络的任何其他方式访问,包括屏幕阅读器和 Alexa 和 Google Home 等语音助手。
  • 应用程序应该能够被任何人在不考虑听觉、视觉、身体或认知能力的情况下理解和使用。
  • 网站也不应该造成伤害:诸如运动之类的网络功能可能会导致偏头痛或癫痫发作。

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

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

先决条件

为了充分利用本模块,最好至少完成 HTMLCSSJavaScript 主题的前两个模块,或者可能更好的是,在完成相关技术主题的同时完成可访问性模块的相关部分。

注意:如果你正在使用一台无法创建自己文件的电脑/平板电脑/其他设备,你可以尝试在像 JSBinGlitch 这样的在线编程程序中运行大部分代码示例。

指南

什么是无障碍访问?

本文从介绍可访问性是什么开始——这包括我们需要考虑哪些群体以及原因,不同的人使用哪些工具与网络交互,以及我们如何将可访问性纳入我们的网页开发工作流程。

HTML:无障碍访问的良好基础

通过确保始终将正确的 HTML 元素用于正确的目的,就可以使大量的网络内容变得可访问。本文详细介绍了如何使用 HTML 来确保最大的可访问性。

CSS 和 JavaScript 无障碍访问最佳实践

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

WAI-ARIA 基础

承接上一篇文章,有时创建涉及无意义 HTML 和动态 JavaScript 更新内容的复杂 UI 控件可能会很困难。WAI-ARIA 是一种可以帮助解决此类问题的技术,它通过添加浏览器和辅助技术可以识别并用于让用户了解正在发生的事情的更多语义。在这里,我们将展示如何在基本级别使用它来提高可访问性。

无障碍多媒体

另一类可能造成可访问性问题的內容是多媒体——视频、音频和图像内容需要提供适当的文本替代方案,以便辅助技术及其用户能够理解。本文展示了如何做到这一点。

移动设备无障碍访问

随着移动设备上的网络访问变得如此流行,以及 iOS 和 Android 等流行平台拥有功能齐全的可访问性工具,考虑网络内容在这些平台上的可访问性非常重要。本文探讨了移动设备特定的可访问性注意事项。

评估

可访问性故障排除

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

另请参阅

学习无障碍网页设计 MDN 课程合作伙伴

Scrimba 的 学习无障碍网页设计课程通过解决交互式编码挑战和修复真实世界的网站来教你如何编写无障碍 HTML。

立即开始构建可访问的 Web 应用程序

Marcy Sutton 制作的一系列优秀的视频教程。

Deque 大学资源

包括代码示例、屏幕阅读器参考和其他有用资源。

WebAIM 资源

包括指南、清单、工具等。

网页可访问性评估工具列表

包括网页可访问性评估工具列表。