面向在线课程创作者的 WCAG 2.2 核查清单：逐条解释

创建一个外观精美并提供优质内容的在线课程只是工作的一半。如果残障学员无法感知您的视频、导航您的测验或理解您的指示，那么您的课程对于您受众中的一大部分人来说是根本无法使用的。Web内容无障碍指南（WCAG）2.2，由W3C于2023年10月发布，为使数字内容无障碍提供了权威的技术标准。本清单将每个相关的WCAG 2.2 AA级别要求翻译为在线课程讲师和教学设计师可以立即实施的简单英语操作。

WCAG 2.2将其56个成功标准组织在四个原则下，简称为POUR：可感知、可操作、可理解和健壮。每个原则解决无障碍的不同维度。本文将介绍与在线课程最相关的标准，解释每个标准在实践中的含义，提供实施指导，并指出课程讲师最常犯的错误。

将此作为工作参考。打印、书签或与您的团队分享。如果您在Eduspera上构建课程，许多这些检查通过平台内置的无障碍评分自动化——但理解底层要求无论您使用什么工具都能让您成为更好的课程讲师。

原则1：可感知

内容必须以所有用户都能感知的方式呈现——无论是通过视觉、听觉还是触觉。对于课程讲师来说，这一原则管理您如何处理图像、视频、音频、颜色和文本格式。

1.1.1 非文本内容（级别A）

含义：每个非文本元素——图像、图表、图标、信息图——必须有一个传达相同信息的文本替代。屏幕阅读器无法解释像素；它们读取您提供的替代文本。

如何为在线课程实施：

• 为课程材料中的每个图像编写描述性alt属性。显示“设计思维过程的三个阶段：同理心、定义、构思”的图表需要一个命名这些阶段的替代文本，而不仅仅是“图表”。
• 对于复杂的信息图，在周围文本中提供长描述或链接到详细的文本版本。
• 装饰性图像（视觉分隔符、背景图案）应使用空alt=""，以便屏幕阅读器完全跳过它们。
• 用作按钮或链接的图标必须有可访问的标签——可以是可见文本或aria-label属性。

常见错误：

• 使用文件名作为替代文本（例如，alt="IMG_2847.jpg"）。
• 编写替代文本时说“图像”——屏幕阅读器已经宣布它是图像。
• 在信息图像上留下空白的替代文本，使它们对屏幕阅读器用户不可见。

1.2.2 字幕（预录制）（级别A）

含义：所有带音频的预录制视频必须包含同步字幕。这是不可协商的——字幕不是在线课程的可有可无的功能；它们是基本要求。

如何为在线课程实施：

• 使用AI转录工具（如OpenAI Whisper）生成初始字幕，然后手动审核和校正它们。自动生成的字幕通常达到90-95%的准确率，但剩下的5%通常落在技术术语、专有名词和领域特定术语上——正是学员需要理解的词汇。
• 确保字幕与音频同步——时间很重要。字幕晚两秒出现会破坏学习体验。
• 当多人讲话时，包含讲话者身份。
• 字幕中包含有意义的音效（例如，“[掌声]”、“[电话铃声]”），以帮助理解。

常见错误：

• 仅依赖自动生成的字幕而不进行审核。
• 使用低对比度或小字体的嵌入式（开放）字幕。
• 省略“短”视频的字幕——要求适用于所有时长。

1.2.5 音频描述（预录制）（级别AA）

含义：当您的视频显示未在音轨中描述的视觉信息时——例如屏幕上的文本、演示或视觉过渡——您必须提供叙述这些视觉元素的音频描述。

如何为在线课程实施：

• 最简单的方法：叙述您展示的一切。如果您正在演示软件界面，请在点击和屏幕上出现内容时描述。这种技术称为“自描述视频”，在大多数教学环境中消除了对单独音频描述轨道的需求。
• 对于视觉内容重要但未叙述的视频（例如，无声演示或延时摄影），提供单独的音频描述轨道或扩展文本描述。

常见错误：

• 说“如您所见”而不描述“这里”显示的内容。
• 依赖屏幕录制而不叙述正在执行的操作。
• 显示屏幕上的代码或公式而不大声朗读。

1.4.3 对比度（最低）（级别AA）

含义：文本与其背景的对比度必须至少为4.5:1。大文本（18pt或14pt加粗）至少需要3:1。这确保了低视力或色觉缺陷用户的可读性。

如何为在线课程实施：

• 使用对比度检查工具（例如WebAIM对比度检查器）检查您的幻灯片、缩略图和屏幕文本覆盖。
• 避免将文本放在繁忙的摄影背景上——如果必须，使用半透明覆盖。
• 特别注意表单中的占位符文本，通常以浅灰色在白色背景上显示，不符合对比度要求。

常见错误：

• 使用看起来吸引人的品牌颜色但未达到对比度（常见于粉彩调色板）。
• 忘记检查悬停、聚焦和活动状态的对比度。
• 使用浅灰色作为“次要”或“不太重要”的文本——如果是可读内容，则需要完整对比度。

1.4.5 文本图像（级别AA）

含义：不要使用图像显示文本，当可以用实际样式文本实现相同的视觉呈现时。文本图像无法调整大小、重排或被屏幕阅读器读取，除非有替代文本。

如何为在线课程实施：

• 使用真实文本（HTML，使用CSS样式）作为标题、字幕、标签和提示，而不是将它们嵌入为图形。
• 当需要文本截图时（例如，显示代码编辑器），在附近提供文本内容作为代码块或文字稿。

常见错误：

• 创建复杂的标题幻灯片作为平面图像而不是使用样式文本。
• 使用代码截图而不是正确格式化的代码块并带有语法高亮。

1.4.11 非文本对比度（级别AA）

含义：用户界面组件（按钮、表单字段、聚焦指示器）和有意义的图形（图标、图表元素）必须与相邻颜色的对比度至少为3:1。

如何为在线课程实施：

• 确保测验按钮、进度条和导航控件在其背景上清晰可见。
• 检查图表颜色是否可区分——不要仅依赖颜色来区分数据系列。添加图案、标签或不同形状。

常见错误：

• 在表单输入上使用细的、低对比度的边框。
• 将禁用按钮样式化，使其与背景无法区分。

原则2：可操作

用户必须能够使用任何输入方法——键盘、开关设备、语音控制或鼠标——导航和与您的课程互动。对于课程讲师来说，这一原则管理导航、时间和交互元素。

2.1.1 键盘（级别A）

含义：每个交互元素——按钮、链接、表单字段、视频控件、测验答案、导航菜单——必须仅通过键盘即可操作。没有功能可以仅依赖鼠标或触控板。

如何为在线课程实施：

• 仅使用Tab键（移动焦点）、Enter或Space（激活）和箭头键（在组内）测试整个课程流程。如果您无法完成任何操作，则不符合此标准。
• 自定义交互元素（手风琴、选项卡、模态对话框）需要适当的键盘事件处理程序——而不仅仅是点击处理程序。
• 确保视频播放器响应键盘快捷键：空格键用于播放/暂停，箭头键用于搜索，M用于静音。

常见错误：

• 构建没有键盘替代的拖放测验交互。
• 使用<div>元素样式化为按钮而没有role="button"和tabindex="0"——它们看起来可点击但无法接收键盘焦点。
• 创建键盘陷阱，焦点进入模态或视频播放器但无法在没有鼠标的情况下退出。

2.1.2 无键盘陷阱（级别A）

含义：如果键盘焦点可以移动到组件中，则必须能够使用标准键盘交互（通常是Tab或Escape）移出该组件。用户绝不能被困住。

如何为在线课程实施：

• 通过Tab键进入所有嵌入内容（视频播放器、交互模拟、第三方小部件）并验证您可以Tab键退出。
• 模态对话框在打开时应将焦点限制在对话框内，但在通过Escape或关闭按钮关闭时将焦点返回到触发元素。

常见错误：

• 嵌入捕获键盘焦点而不提供逃生机制的第三方小部件（投票、白板、代码游乐场）。
• 复杂交互组件内的无限Tab循环。

2.4.7 焦点可见（级别AA）

含义：当元素接收键盘焦点时，必须有一个可见的指示器——通常是轮廓或高亮——以便键盘用户可以看到他们在页面上的位置。

如何为在线课程实施：

• 永远不要移除浏览器的默认焦点轮廓（outline: none）而不替换为同样或更可见的自定义焦点样式。
• 使用在浅色和深色背景上都能很好对比的焦点样式。常见模式是2px实线轮廓，带有对比色并偏移一个小间隙。
• 测试每个交互元素上的焦点可见性：导航链接、课时按钮、测验选项、视频控件。

常见错误：

• 在CSS中添加*:focus { outline: none; }以“清理”设计——这单行代码破坏了整个课程的键盘无障碍性。
• 使用与元素背景融合的焦点颜色。

2.5.7 拖动动作（级别AA）——WCAG 2.2中的新内容

含义：任何使用拖动动作（点击并保持加移动）的功能也必须通过单一指针动作（不拖动）实现，除非拖动是必需的。

如何为在线课程实施：

• 如果您有拖放测验问题（“将标签拖到正确的图表区域”），提供下拉菜单或点击选择替代方案。
• 可重新排序的课时列表应支持“上移/下移”按钮，除了拖动手柄。

常见错误：

• 假设拖放是唯一直观的交互——许多用户由于运动障碍无法执行拖动动作。
• 提供键盘替代但没有单指针（点击/触摸）替代——此标准专门针对指针输入，而不仅仅是键盘。

2.4.4 链接目的（在上下文中）（级别A）

含义：每个链接的目的可以从链接文本本身或链接文本及其周围上下文中确定。屏幕阅读器用户通常通过Tab键浏览链接——听到“点击这里，点击这里，点击这里”是无用的。

如何为在线课程实施：

• 编写描述性链接文本：“下载项目简报（PDF，2.3 MB）”而不是“点击这里”。
• 对于课时导航，使用课时标题作为链接文本，而不是通用标签。

常见错误：

• 使用“阅读更多”或“了解更多”作为链接文本而没有额外的上下文。
• 将原始URL作为可见文本链接——它们对屏幕阅读器不可读且对所有人都难以理解。

2.2.1 时间可调（级别A）

含义：如果您的课程包含计时活动（测验、评估），用户必须能够关闭、调整或延长时间限制——至少提供其中一个选项。

如何为在线课程实施：

• 对于计时测验，提供请求延长时间或完全禁用计时器的选项。
• 自动播放幻灯片或轮播必须有暂停控件。
• 会话超时应在过期前警告用户并允许延长。

常见错误：

• 硬编码测验计时器而没有任何调整选项——这对认知障碍、运动障碍或使用辅助技术导致交互速度变慢的学员影响尤为严重。

原则3：可理解

内容和界面行为必须对所有用户可理解。对于课程讲师来说，这一原则涉及语言清晰度、一致的导航以及您的课程如何处理用户输入——特别是在测验和表单中。

3.1.1 页面语言（级别A）

含义：每个页面的默认人类语言必须可以通过编程确定——通常通过lang属性在<html>元素上。屏幕阅读器使用此属性选择正确的发音引擎。

如何为在线课程实施：

• 确保您的平台设置了正确的lang属性（例如，lang="en"用于英语，lang="es"用于西班牙语）。
• 如果您的课程包含不同语言的段落，用适当的lang属性将它们包裹在span或div中，以便屏幕阅读器切换发音。

常见错误：

• 在完全是西班牙语的页面上使用lang="en"——屏幕阅读器将尝试用英语发音西班牙语单词。
• 完全省略lang属性，迫使屏幕阅读器猜测。

3.3.1 错误识别（级别A）

含义：当用户输入错误（提交测验、填写表单）时，必须自动检测并以文本形式向用户描述错误。错误消息必须识别特定字段并描述问题。

如何为在线课程实施：

• 当测验问题回答错误时，清楚指出哪个问题有错误以及期望什么类型的响应。
• 对于注册或个人资料表单，在相关字段旁边显示具体错误消息：“电子邮件地址必须包含@符号”而不是顶部的通用“无效输入”横幅。
• 使用aria-describedby将错误消息与其表单字段编程关联，以便屏幕阅读器在焦点移动到字段时宣布错误。

常见错误：

• 仅通过颜色（红色边框）指示错误而没有文本——无法感知颜色的用户完全错过错误。
• 显示单个“您的提交中有错误”消息而不指定哪些字段需要更正。

3.3.2 标签或说明（级别A）

含义：表单字段和交互组件必须有描述预期输入的标签或说明。每个文本输入、下拉菜单、复选框和单选按钮都需要一个可见的、编程关联的标签。

如何为在线课程实施：

• 使用<label>元素，其for属性与输入的id匹配，或将输入包裹在标签元素内。
• 对于测验问题，确保问题文本通过fieldset/legend或aria-labelledby与答案选项编程关联。
• 在需要时提供格式提示：“出生日期（DD/MM/YYYY）”或“密码必须至少8个字符。”

常见错误：

• 使用占位符文本作为唯一标签——当用户开始输入时，占位符消失，留下他们没有上下文。
• 依赖视觉接近（标签出现在字段附近）而没有编程关联。

3.2.3 一致的导航（级别AA）

含义：出现在多个页面上的导航机制（课程侧边栏、课时导航、进度条）必须每次都以相同的相对顺序出现。用户会建立对界面的空间记忆；在页面之间更改布局会让他们感到困惑。

如何为在线课程实施：

• 在所有课时中保持课程导航（侧边栏、面包屑、上/下一个按钮）在一致的位置。
• 如果您有进度指示器，确保它在每个课时页面上出现在相同的位置。

常见错误：

• 在某些页面将“下一个课时”按钮从内容底部移动到顶部。
• 在测验页面与课时页面上显示不同的导航元素而没有明确的理由。

3.3.8 可访问的身份验证（最低）（级别AA）——WCAG 2.2中的新内容

含义：身份验证过程不得要求认知功能测试（记住密码、解决CAPTCHA、识别图像中的对象），除非提供可访问的替代方案。用户必须能够通过密码管理器、密钥、复制粘贴或单点登录进行身份验证。

如何为在线课程实施：

• 不要在密码字段中阻止粘贴——这会阻止密码管理器的使用。
• 支持OAuth/SSO登录（Google、Microsoft）作为密码身份验证的替代方案。
• 如果您使用CAPTCHA，提供音频替代或使用不需要用户交互的隐形CAPTCHA技术。

常见错误：

• 出于“安全”原因禁用密码字段的粘贴——这实际上降低了安全性，因为它阻止了强大、唯一密码的使用。
• 使用没有任何替代方案的基于图像的CAPTCHA。

3.2.6 一致的帮助（级别A）——WCAG 2.2中的新内容

含义：如果您的平台提供帮助机制（联系信息、FAQ链接、聊天支持），它们必须在页面上以相同的相对位置出现。

如何为在线课程实施：

• 将您的帮助/支持链接放在一致的位置——通常是页脚或持久导航元素。
• 确保帮助机制在课程播放器中可用，而不仅仅是在主站点。

常见错误：

• 在营销网站上提供帮助聊天小部件，但在课程播放器界面中移除。

原则4：健壮

内容必须足够健壮，以便与当前和未来的辅助技术可靠地工作。对于课程讲师来说，这一原则管理您的课程HTML结构以及辅助技术是否可以正确解释它。

4.1.2 名称、角色、值（级别A）

含义：每个用户界面组件必须向辅助技术公开其名称（标签）、角色（它是什么类型的元素）和当前值或状态。这就是屏幕阅读器知道某物是按钮、复选框是否选中或滑块当前值的方式。

如何为在线课程实施：

• 使用语义HTML元素：<button>用于操作，<a>用于导航，<input type="checkbox">用于复选框。这些会自动公开角色和状态。
• 使用自定义组件时，应用适当的ARIA角色和属性：role="tabpanel"，aria-selected="true"，aria-expanded="false"。
• 对于测验进度指示器，使用role="progressbar"与aria-valuenow、aria-valuemin和aria-valuemax。

常见错误：

• 构建没有ARIA角色的自定义视频播放器<div>按钮——屏幕阅读器无法识别它们为交互元素。
• 使用与可见文本相矛盾的aria-label——屏幕阅读器用户听到一件事，而视觉用户看到另一件事。

4.1.3 状态消息（级别AA）

含义：状态消息——成功确认、错误计数、进度更新——必须在不接收焦点的情况下向辅助技术宣布。用户不应需要在页面上寻找更改。

如何为在线课程实施：

• 使用ARIA实时区域（role="status"或role="alert"）用于消息，如“测验提交成功”或“已回答10个问题中的3个”。
• 对于实时进度更新（上传进度、课时完成），使用aria-live="polite"，以便公告不会打断用户的当前活动。
• 对于关键错误，使用role="alert"，这会触发即时公告。

常见错误：

• 显示屏幕上可见但未向屏幕阅读器宣布的成功通知。
• 为非关键更新使用aria-live="assertive"，导致破坏性中断。

语义HTML结构

含义：您的课程内容应使用正确的HTML语义——按逻辑顺序的标题（<h1>到<h6>）、列出项目的列表、表格数据的表格和页面区域的地标（<nav>、<main>、<aside>）。这是辅助技术支持的基础。

如何为在线课程实施：

• 用清晰的标题层次结构构建您的课时内容：一个<h1>用于课时标题，<h2>用于主要部分，<h3>用于子部分。切勿跳过标题级别。
• 使用<ul>或<ol>列出项目——屏幕阅读器用户依赖列表语义来理解结构和项目数量。
• 将您的课程导航包裹在<nav>地标中，以便屏幕阅读器用户可以直接跳转到它。

常见错误：

• 使用粗体文本模拟标题——它在视觉上看起来像标题，但对屏幕阅读器的标题导航功能不可见。
• 将内容嵌套在没有任何语义意义的通用<div>元素中。

正确的ARIA使用

含义：ARIA（可访问的富互联网应用程序）属性补充HTML语义以支持复杂的组件。然而，错误的ARIA比没有ARIA更糟糕——它会误导辅助技术。

如何为在线课程实施：

• 遵循ARIA的第一条规则：如果可以使用已经具有所需语义的原生HTML元素，请使用它而不是将ARIA添加到通用元素。
• 如果必须使用ARIA，请遵循WAI-ARIA编写实践指南中的特定模式（选项卡、手风琴、对话框等）。
• 使用屏幕阅读器测试——NVDA（免费，Windows）、VoiceOver（内置，macOS/iOS）或TalkBack（内置，Android）。

常见错误：

• 在<div>上添加role="button"但忘记添加键盘事件处理程序——元素宣布为按钮但不响应Enter或Space。
• 在可见和交互的内容上使用aria-hidden="true"——这会将其从屏幕阅读器中隐藏，而它仍然在屏幕上可见，造成混乱的断层。

课程讲师的可打印WCAG 2.2清单

使用此清单在发布前审核您的课程内容。每个项目映射到特定的WCAG 2.2成功标准。

可感知

• ☐ 所有图像都有描述性替代文本（1.1.1）
• ☐ 装饰性图像使用空替代属性（1.1.1）
• ☐ 所有视频都有准确、同步的字幕（1.2.2）
• ☐ 仅有视觉信息的视频有音频描述（1.2.5）
• ☐ 文本对比度至少为4.5:1（1.4.3）
• ☐ 大文本对比度至少为3:1（1.4.3）
• ☐ UI组件对比度至少为3:1（1.4.11）
• ☐ 使用真实文本而不是文本图像（1.4.5）
• ☐ 内容在放大到200%时可读（1.4.4）
• ☐ 信息不单靠颜色传达（1.4.1）

可操作

• ☐ 所有交互元素都可以通过键盘访问（2.1.1）
• ☐ 课程中不存在键盘陷阱（2.1.2）
• ☐ 焦点顺序遵循逻辑顺序（2.4.3）
• ☐ 所有元素上的焦点指示器清晰可见（2.4.7）
• ☐ 链接文本描述目的或目标（2.4.4）
• ☐ 页面标题具有描述性和唯一性（2.4.2）
• ☐ 拖放有点击/触摸替代（2.5.7）
• ☐ 计时活动可以延长或禁用（2.2.1）
• ☐ 内容每秒闪烁不超过3次（2.3.1）
• ☐ 提供跳过导航链接（2.4.1）

可理解

• ☐ 通过lang属性设置页面语言（3.1.1）
• ☐ 表单错误以具体描述的文本识别（3.3.1）
• ☐ 所有表单字段都有可见的、关联的标签（3.3.2）
• ☐ 导航在所有页面上一致（3.2.3）
• ☐ 帮助机制出现在一致的位置（3.2.6）
• ☐ 身份验证不要求认知功能测试（3.3.8）
• ☐ 在可能的情况下提供错误建议（3.3.3）
• ☐ 内容使用适合受众的清晰、简单语言

健壮

• ☐ 正确使用语义HTML元素（4.1.2）
• ☐ 自定义组件具有适当的ARIA角色和状态（4.1.2）
• ☐ 状态消息使用ARIA实时区域（4.1.3）
• ☐ 内容与主要屏幕阅读器兼容（NVDA、VoiceOver、JAWS）
• ☐ 标题层次结构逻辑且顺序正确
• ☐ HTML验证没有关键错误

Eduspera如何自动化WCAG合规性

从头开始构建一个无障碍课程是一项巨大的努力——但不必是手动的。Eduspera将无障碍检查直接集成到课程创建工作流中，在问题到达您的学员之前捕捉到它们。

• 无障碍评分：每个课程根据自动化的WCAG 2.2 AA检查获得实时无障碍评分。随着您添加内容，评分会更新，立即标记缺失的替代文本、对比度问题和结构问题。
• AI驱动的字幕：上传到Eduspera的视频会自动使用AI转录，生成字幕，您可以直接在平台内审核和编辑——无需单独的工具或工作流即可解决SC 1.2.2。
• 键盘优先设计：整个课程播放器——导航、视频控件、测验和进度跟踪——从头开始构建，完全支持键盘无障碍性，而不是事后补救。
• 语义HTML输出：在Eduspera的富文本编辑器中创作的课程内容会自动生成干净、语义化的HTML，具有正确的标题层次结构、列表结构和ARIA属性。
• 无障碍测验引擎：测验组件包括适当的标签、错误消息和焦点管理，开箱即用，解决多个WCAG标准（3.3.1、3.3.2、2.1.1、4.1.2），无需课程讲师具备技术知识。

目标不是取代您对无障碍的理解——此清单存在是因为理解原则很重要。目标是自动化重复检查，以便您可以专注于创建优秀的教育内容，为每位学员服务。阅读更多关于如何使在线课程无障碍，以获得更广泛的无障碍教学设计视角。

常见问题

我的在线课程需要符合WCAG A级、AA级还是AAA级？

WCAG AA级是国际公认的网络无障碍合规标准，并且是大多数立法引用的级别，包括欧洲无障碍法和美国残疾人法（实际上）和第508条。A级是绝对最低限度，不足以合规。AAA级包括增强标准，这些标准有价值但通常不需要——许多AAA标准在普遍应用时不切实际（例如，要求所有视频内容提供手语翻译）。将AA级作为您的基准，并在有利于您特定学员群体的情况下采用个别AAA标准。

我可以使用哪些工具测试我的课程是否符合WCAG标准？

自动化工具可以捕捉大约30-40%的WCAG问题。使用axe DevTools（浏览器扩展）、WAVE或Lighthouse进行自动扫描。对于剩下的60-70%，手动测试是必不可少的：仅使用键盘导航，使用屏幕阅读器测试（Windows上的NVDA，macOS上的VoiceOver），使用WebAIM的对比度检查器验证颜色对比，并请残障用户测试您的课程。像Eduspera这样的平台将自动化无障碍扫描直接集成到创作工作流中，在您发布之前捕捉常见问题。

我可以为现有课程进行WCAG合规性改造，还是需要从头开始重建？

改造几乎总是可行的，通常比重建更实用。首先运行自动扫描以识别最常见的问题——缺失的替代文本、不足的对比度、未标记的表单字段——因为这些通常可以快速修复。然后解决结构问题：标题层次结构、键盘导航和焦点管理。对于大多数课程讲师来说，最耗时的修复是为现有视频添加字幕，但AI转录工具大大减少了所需的工作量。按影响优先修复：完全阻碍访问的障碍（键盘陷阱、缺失字幕）应首先修复，然后是降低体验的问题（对比度差、缺失替代文本）。