0Pricing
Web Accessibility Academy icon

Web Accessibility Academy

HTMLFrontendWebEnterprise

构建包容性网站,让每个人都能使用。掌握语义 HTML、ARIA、键盘和屏幕阅读器支持,以及 WCAG 2.2 合规性。

🤖 AI 驱动📚 30 门课程👥 10万+ 学习者⭐ 4.9 分
课程概览

Web Accessibility (a11y): 为每个人而构建

构建包容性网站,让每个人都能使用。掌握语义 HTML、ARIA、键盘和屏幕阅读器支持,以及 WCAG 2.2 合规性。本课程轨道涵盖 30 门渐进式迷你课程,从绝对初级 (A1) 到高级 (B2),每节课都简洁专注,配有快速小测验来巩固每个概念。

您将学到什么

从基础知识开始,逐步深入中级和高级主题,每门课程都建立在前一门课程的基础上。每节课都很实用且简洁易学,24/7 AI 辅导员随时可以帮助您。

它如何工作

每门课程分为四个专注、简洁的课时。每天完成几节课,您将在几周内而不是几个月内掌握整个课程轨道。

开始学习 →

你的学习方式

🎯
互动课程
实时反馈的动手编程练习
🤖
AI 导师
遇到困难时立即获得 AI 帮助
💻
内置编辑器
直接在浏览器中编写并运行代码
🏆
证书
完成课程后获得证书
课程

30 门课程

Web Accessibility Academy 学习路径中的所有课程。

01

无障碍为何重要:真实的人与真实的障碍

A14 节课

解释无障碍设计能帮助哪些人,以及进行包容性构建的商业和伦理依据

02

您的第一个无障碍页面:POUR 思维

A14 节课PRO

应用 WCAG 的四项原则,判断任意页面是否具备无障碍性

03

语义化 HTML:让浏览器完成工作

A14 节课PRO

选择有意义的元素,让页面在添加任何属性前就具备无障碍性

04

正确构建标题与文档结构

A14 节课PRO

构建逻辑清晰的标题大纲,让屏幕阅读器用户能够据此导航

05

地标:为屏幕阅读器绘制页面地图

A14 节课PRO

使用地标区域,让用户可以直接跳到所需部分

06

真正描述图像的替代文本

A24 节课PRO

编写传达含义而非制造杂乱信息的图像替代文本

07

链接与按钮:不要再混淆它们

A24 节课PRO

选择正确的交互元素,让行为与语义保持一致

08

无障碍表单:让用户信赖的标签

A24 节课PRO

构建每个控件都有名称且易于操作的表单

09

颜色与对比度:让文本清晰易读

A24 节课PRO

确保文本和用户界面具有足够的辨识度,方便低视力和色盲用户使用

10

键盘导航:无需鼠标

A24 节课PRO

仅使用键盘即可访问并看见每一项交互

11

ARIA 基础:角色、状态与属性

B14 节课PRO

正确使用 ARIA,补充原生 HTML 无法表达的含义

12

无障碍名称与描述

B14 节课PRO

精确控制辅助技术为任意元素播报的内容

13

焦点管理与焦点顺序

B14 节课PRO

移动并限制焦点,让动态界面始终可用

14

跳过链接与绕过区块

B14 节课PRO

让键盘用户跳过重复内容,直接到达重要部分

15

无障碍表单验证与错误提示

B14 节课PRO

报告表单错误,让每位用户都能找到并修复问题

16

无障碍数据表格

B14 节课PRO

标记表格,让单元格与表头之间的关系清晰明确

17

无障碍 SVG、图标与装饰性图形

B14 节课PRO

公开有意义的图形,并隐藏纯装饰性图形

18

无障碍模态框与对话框

B14 节课PRO

构建能够锁定焦点、正常关闭并自我播报的对话框

19

构建无障碍标签页与折叠面板

B14 节课PRO

使用正确的 ARIA 和按键,实现常见的内容展开控件

20

屏幕阅读器测试:NVDA 与 VoiceOver

B14 节课PRO

按照盲人用户实际体验的方式测试您自己的作品

21

WCAG 2.2 AA:经得起检验的符合性

B24 节课PRO

将真实的成功标准对应到具体修复措施,构建符合 AA 要求的网站

22

React 与单页应用中的无障碍设计

B24 节课PRO

即使存在客户端路由和重新渲染,也让单页应用保持无障碍

23

ARIA 实时区域:播报动态变化

B24 节课PRO

通知屏幕阅读器用户那些无需重新加载页面就会发生的变化

24

复杂控件的 ARIA 编写实践

B24 节课PRO

遵循经过验证的 APG 模式,构建健壮的自定义控件

25

减少动效与安全动画

B24 节课PRO

尊重用户的动效偏好,避免引发不适或癫痫发作

26

无障碍数据可视化

B24 节课PRO

让图表不只依靠颜色和形状也能被感知

27

自动化测试:axe、Lighthouse 与 Playwright

B24 节课PRO

在您的流程中自动发现一类无障碍缺陷

28

手动审查与修复

B24 节课PRO

执行结构化的手动审查,并优先修复真正重要的问题

29

法律环境:ADA、EN 301 549 及更多标准

B24 节课PRO

了解将无障碍性纳入规划路线图的法律和标准

30

构建无障碍文化与检查清单

B24 节课PRO

将无障碍融入团队,让它超越单个项目持续发挥作用。

常见问题

常见问题解答

Web Accessibility Academy 课程免费吗?

免费。你可以免费开始 Web Accessibility Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 HTML 需要有先前的经验吗?

不需要。课程从基础开始,逐步进阶到更高难度的主题,所以即使你没有任何 HTML 基础也可以开始。

我在 CoddyKit 上怎样学习 HTML?

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合,24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 Web Accessibility Academy 后能获得证书吗?

可以。PRO 学员可以参加考试,获得 Web Accessibility Academy 课程的可分享的完成证书,其中包含可验证的代码。

我能在手机上学习 HTML 吗?

可以。CoddyKit 支持网页版和原生 iOS、Android 应用,你可以在任何设备上学习 HTML,进度会自动同步。

立即开始 Web Accessibility Academy

加入数千名学习者,通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程