无障碍

在 Web 开发中,无障碍性(通常简称为 A11y — 发音为“a”,后面跟 11 个字符,最后是“y”)意味着尽可能让更多的人能够使用网站,即使这些人的能力在某些方面受到限制。

对许多人来说,技术让生活更轻松。对于残障人士来说,技术让生活成为可能。无障碍性意味着要开发尽可能无障碍的内容,无论个人的身体和认知能力如何,以及他们如何访问 Web。

Web 从根本上就是为了让所有人都能使用而设计的,无论他们的硬件、软件、语言、地点或能力如何。当 Web 达到这一目标时,它就能让具有听力、运动、视觉和认知能力多样化的人们都能使用。
– (W3C - 无障碍性)

新手教程

我们的学习 Web 开发 无障碍性模块 包含现代、最新的教程,涵盖无障碍性基础知识。

什么是可访问性?

本文作为该模块的开篇,将深入探讨什么是无障碍性——包括我们需要考虑哪些人群以及为什么,不同的人使用哪些工具与 Web 交互,以及我们如何将无障碍性纳入我们的 Web 开发流程。

无障碍辅助工具和辅助技术

接下来,我们将关注无障碍性工具,提供有关可用于帮助解决无障碍性问题的工具种类,以及残障人士在浏览 Web 时使用的辅助技术的信息。您将在后续文章中一直使用这些工具。

HTML:可访问性的良好基础

通过确保正确使用 HTML 元素来完成其应有的目的,可以使大量的 Web 内容变得无障碍。本文将详细介绍如何使用 HTML 来确保最大的无障碍性。

CSS 和 JavaScript 无障碍最佳实践

CSS 和 JavaScript 在正确使用时,也有潜力实现无障碍的 Web 体验,但如果使用不当,它们会严重损害无障碍性。本文概述了一些应考虑的 CSS 和 JavaScript 最佳实践,以确保即使是复杂的内容也能尽可能无障碍。

WAI-ARIA 基础

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

可访问的多媒体

另一类可能导致无障碍性问题的內容是多媒体——视频、音频和图像內容需要提供适当的文本替代,以便辅助技术及其使用者能够理解。本文将介绍如何实现这一点。

移动可访问性

随着移动设备 Web 访问的普及,以及 iOS 和 Android 等热门平台拥有功能齐全的无障碍工具,考虑您的 Web 内容在这些平台上的无障碍性非常重要。本文探讨了移动设备特定的无障碍性注意事项。

无障碍性指南

无障碍性指南涵盖了作者指南、WCAG 合规性、无障碍小部件和导航、移动设备无障碍性以及其他关键主题,这些将帮助您理解为什么无障碍性对 Web 至关重要以及如何在您的项目中进行改进。

面向 Web 作者的无障碍性信息

本文档列出了有关检查和修复网站无障碍性问题的指南、法规、操作方法和工具。

个性化以帮助安全浏览

本文讨论了如何通过利用操作系统内置的个性化和无障碍设置,为患有前庭障碍的人以及支持他们的人使 Web 内容更具无障碍性。

无障碍的 Web 应用和组件

大多数 JavaScript 库都提供了一个客户端小部件库,可以模仿熟悉的桌面界面的行为。虽然这会生成一个看起来像其桌面对应物的小部件,但标记中通常没有足够的语义信息供辅助技术使用。本文档描述了提高此类小部件无障碍性的技术。

可键盘导航的 JavaScript 组件

到目前为止,希望使基于样式化的 <div><span> 的小部件无障碍的 Web 开发人员一直缺乏适当的技术。键盘无障碍性是最低无障碍性要求的一部分,开发人员应该了解这一点。本文档描述了使 JavaScript 小部件在键盘上可访问的技术。

移动设备无障碍清单

本文档为移动应用开发人员提供了一份简洁的无障碍性要求清单。

理解 Web 内容无障碍性指南 (WCAG)

一系列文章,提供简明扼要的解释,帮助您理解为符合 Web 内容无障碍性指南 (WCAG) 中概述的建议所需的步骤。

认知无障碍

认知无障碍涵盖了针对认知和学习障碍人群的无障碍考量。本文介绍了认知无障碍以及如何改进网络对有认知和学习差异人群的无障碍性。

无障碍性和空间模式

本文档描述了可能导致患有光敏感性癫痫、前庭障碍或其他感知问题的人出现身体症状的视觉模式。

Web 可访问性:理解颜色和亮度

虽然理解颜色、亮度和饱和度对所有有视力用户的设计和可读性都很重要,但它们对于视力受损、色觉缺陷以及有特定神经、认知和其他障碍的人来说至关重要。

网页癫痫发作和身体反应的无障碍性

某些类型的视觉 Web 内容可能会诱发某些脑部疾病患者的癫痫发作。本文帮助您了解可能存在问题的內容类型,并找到工具和策略来帮助您避免它们。

ARIA

这是一系列文章,教您如何使用无障碍富互联网应用程序 (ARIA) 来使您的 HTML 文档更具无障碍性。

参考

ARIA 参考

无障碍富互联网应用程序 (ARIA) 属性和角色的参考文档。

另见