欢迎学习无障碍!

“数字无障碍”(通常缩写为 a11y)旨在设计和构建残障人士可通过有意义且等效的方式与之互动的网站和 Web 应用。

本课程面向初级和高级 Web 开发者。 您可以完整阅读该系列内容,以便大致了解无障碍功能方面的做法和测试,也可以将其用作特定主题的参考。如果您看到不熟悉的术语,请参阅我们的术语表。如果您是刚开始接触 Web 开发的新手,请查看学习 HTML 课程,了解标记基础知识;学习 CSS 课程,了解样式设置基础知识。

以下并非完整的参考文档。每个版块都引入了版块主题,并提供背景信息和示例。并提供指向主题参考(例如 MDNWCAG 规范)以及其他 web.dev 文章的链接。每个部分都有简短的评估,以帮助大家确认自己的理解程度。

根据您所解决的残障情况,一些无障碍功能最佳实践有所不同。了解您的用户非常重要,当残障人士向您说明他们的需求时,您还要倾听他们的意见。

我们期待您的反馈!打开 GitHub 问题,并提供尽可能多的信息,以便我们能够解决问题。

您将学习以下内容:

什么是数字无障碍?为什么说数字无障碍很重要?

设计和构建残障人士可通过有意义且同等的方式进行互动的网站和 Web 应用。了解这些选择对业务和法律的影响。

ARIA 和 HTML

何时使用 ARIA 与何时使用 HTML。

内容结构

使用语义 HTML、位置标记和表格来提供可访问的内容。

文档

构建无障碍网站和 Web 应用时需要考虑的其他 HTML 元素。

键盘焦点

了解并改进键盘导航顺序和样式。

JavaScript

可写入可访问的触发器事件、网页标题、动态内容等。

Images

创建无障碍映像。

颜色和对比度

使用适当的对比度构建易于使用的调色板。

动画

为患有各类运动引起的障碍的人提供支持。

排版

选择合适的字体和字号,并通过易于访问的布局设计文案的结构。

视频和音频

可让您的视频和音频无障碍播放的备选媒体类型。

表单

创建具有无障碍功能的表单。

设计和用户体验

打造无障碍设计并评估用户体验。

自动化无障碍功能测试

如何执行自动化无障碍功能测试。

手动无障碍功能测试

如何手动测试无障碍功能。

辅助技术测试

如何通过辅助技术 (AT) 进行测试。

总结和后续步骤

有助于您采取后续步骤的其他资源。

术语库

了解常见的无障碍功能术语和概念。

那么,准备好学习无障碍功能了吗?让我们开始吧