无障碍
无障碍(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 内容无障碍功能指南
-
这组文章提供了快速解释,以帮助你了解需要采取的步骤,以符合 W3C web 内容无障碍指南 2.0(WCAG 2.0 或简称 WCAG,出于撰文需要)的建议。
- 色彩与无障碍简介
-
本文探讨了我们对于亮度和色彩的感知,并提供了如何在无障碍设计中使用色彩的基础知识,也演示了视觉与可读内容的最佳实践。
- 可通过键盘导航的 JavaScript 小部件
-
直到目前,web 开发人员仍缺乏合适的技术使基于
<div>
和<span>
的自定义组件无障碍化。对键盘的无障碍性是最基础的无障碍要求之一,开发者应当了解这一内容。 - ARIA
-
学习如何利用无障碍富互联网应用(Accessible Rich Internet Application)使你的 HTML 文档进一步无障碍化的一组文章。
- 移动无障碍化清单
-
本文档向移动应用开发者提供了实现无障碍化所需内容的简明清单。
- 认知无障碍
-
本文说明了如何确保你创造的 web 内容对认知障碍群体是无障碍的。
- 对癫痫症患者的无障碍
-
对于伴有特定脑部缺陷的群体,web 上的某些视觉内容可能导致他们出现癫痫症状。本文可以帮助你理解哪一类内容会有这些问题,并提供了避开这些问题的策略与工具。