无障碍

无障碍(Accessibility,常被缩写为 A11y,因为它以“a”开头,后跟 11 个字母,以“y”结尾)在 web 开发中意味着使尽可能多的人能够使用网站,即使有些用户的能力在某种程度上受限。

对大多数人来说,技术让生活更便捷。而对于有障碍的人群,技术使一切皆有可能。无障碍化意味着设计出尽可能没有使用障碍的内容,无论访问者的身体情况、认知能力以及他们访问 web 的方式是怎样的。

Web 从根本上是为所有人设计的,无论他们的硬件、软件、语言、位置或能力如何。当 web 达到这一目标时,具有不同听力、运动、视觉和认知能力的人都可以访问它。”(W3C——无障碍

主要教程

MDN 无障碍学习区包含现代的最新教程,涵盖以下无障碍性要点:

什么是无障碍?

这篇文章很好地初步介绍了无障碍化的实际情况——包括我们需要考虑哪些人群以及为什么,不同的人用什么工具与 Web 进行交互,以及如何在网站开发的流程中加入无障碍设计。

HTML:无障碍性的良好基础

只需确保以恰当的方式使用正确的 HTML 元素,很多 web 内容就能实现无障碍化。本文详细介绍如何使用 HTML 来实现最大程度的无障碍化。

CSS 和 JavaScript 无障碍最佳做法

如果使用得当,CSS 和 JavaScript 也能提供无障碍的 web 体验。倘若误用,无障碍性会明显受损。本文列出了一些 CSS 和 JavaScript 最佳实践,即使是复杂的内容,也能尽可地确保无障碍。

WAI-ARIA 基础知识

如前文所述,在涉及无语义 HTML 和 JavaScript 动态更新的内容时,制作复杂的 UI 控件可能很困难。借助 WAI-ARIA 技术来添加额外的语义,使得浏览器和无障碍技术可以识别和使用这些控件,并让用户了解网页实际情况。这里我们将介绍这种技术的基础知识,并用它改善无障碍性。

多媒体无障碍化

多媒体也是一类可能需要无障碍化的内容——视频、音频、图像等都需要给出适当的文本替代,以便可以被辅助性技术及其用户来理解。本文就介绍了以上内容。

移动设备的无障碍

使用移动设备访问 web 越来越流行,而同时,iOS、Android 等主流移动平台也拥有日趋完善的辅助工具,让你的网站内容在这些平台上做到无障碍化自然很重要。本文将介绍移动设备领域的无障碍化注意事项。

其他文章

了解 Web 内容无障碍功能指南 (en-US)

这组文章提供了快速解释,以帮助你了解需要采取的步骤,以符合 W3C web 内容无障碍指南 2.0(WCAG 2.0 或简称 WCAG,出于撰文需要)的建议。

色彩与无障碍简介 (en-US)

本文探讨了我们对于亮度和色彩的感知,并提供了如何在无障碍设计中使用色彩的基础知识,也演示了视觉与可读内容的最佳实践。

可通过键盘导航的 JavaScript 小部件 (en-US)

直到目前,web 开发人员仍缺乏合适的技术使基于 <div><span> 的自定义组件无障碍化。对键盘的无障碍性是最基础的无障碍要求之一,开发者应当了解这一内容。

ARIA (en-US)

学习如何利用无障碍富互联网应用(Accessible Rich Internet Application)使你的 HTML 文档进一步无障碍化的一组文章。

移动无障碍化清单

本文档向移动应用开发者提供了实现无障碍化所需内容的简明清单。

认知无障碍 (en-US)

本文说明了如何确保你创造的 web 内容对认知障碍群体是无障碍的。

对癫痫症患者的无障碍 (en-US)

对于伴有特定脑部缺陷的群体,web 上的某些视觉内容可能导致他们出现癫痫症状。本文可以帮助你理解哪一类内容会有这些问题,并提供了避开这些问题的策略与工具。

参见