Accessibility：修订间差异
无编辑摘要 |
无编辑摘要 |
||
| 第1行： | 第1行： | ||
== '''CIU Kepha Moodle Accessibility''' 合规 == | == '''CIU Kepha Moodle Accessibility''' 合规 == | ||
本页面内容按照 '''WCAG 2.1 四大原则（POUR）''' 和 '''全部 Level A + AA 成功标准'''整理，适用于： | 本页面内容按照 '''WCAG 2.1 四大原则（POUR）''' 和 '''全部 Level A + AA 成功标准'''整理，适用于： | ||
2026年3月21日 (六) 00:44的版本
CIU Kepha Moodle Accessibility 合规
本页面内容按照 WCAG 2.1 四大原则（POUR） 和 全部 Level A + AA 成功标准整理，适用于：
- Kepha Moodle LMS 平台本身
- Moodle 主题 (Theme)
- 插件 (Plugins)
- 课程页面
- 教学内容,包含多媒体（PDF、PPT、视频、音频、Word、HTML等）
- 对于标识适用于developer的，则由IT开发人员解决，其他内容由教授/助教/课程部署人员等内容负责人解决。
本页面内容及清单附件可作为：
- 教学部门、课程设计部署人员，以及IT的合规标准
- ADA 合规自我审计 checklist
WCAG2.1 四大原则
1. 可感知性 (Perceivable)
核心思想： 用户必须能够通过视觉、听觉或触觉接收到信息。信息不能对所有的感官都是不可见的。
- 实例： * 为图片提供替代文本 (Alt text)，方便视障人士通过读屏软件了解内容。
- 为视频提供字幕，方便听障人士。
- 确保文字与背景之间有足够的色彩对比度。
2. 可操作性 (Operable)
核心思想： 用户必须能够操作界面，且界面不能要求用户进行他们无法完成的操作。
- 实例： * 纯键盘操作： 所有功能都能仅通过键盘（无需鼠标）完成。
- 充足的时间： 给用户留出足够的阅读和操作时间，不要让弹窗消失得太快。
- 防诱发癫痫： 设计时避免使用可能诱发癫痫的高频闪烁内容。
3. 可理解性 (Understandable)
核心思想： 用户必须能够理解信息以及界面的操作逻辑。内容不能超出用户的理解范围。
- 实例： * 语言明确： 标明网页使用的是哪种语言。
- 预测性： 导航栏和按钮在不同页面上的位置和表现应当保持一致。
- 错误辅助： 当用户填错表单时，提供清晰的错误提示和修改建议。
4. 稳健性 (Robust)
核心思想： 内容必须能够随着技术的发展（如浏览器升级、辅助技术更新）保持兼容性。
- 实例： * 规范化代码： 使用符合标准的 HTML/XML 标签，确保主流浏览器和读屏软件都能准确解析。
- 兼容辅助技术： 确保盲人点显器或语音控制软件能顺利读取网页数据。
一句话总结： 如果一个页面能被看/听到（感知）、能被点到（操作）、能被看懂（理解），并且在各种设备上都不崩溃（稳健），那它就基本符合了 WCAG 的核心精神。
Moodle LMS ADA / WCAG 2.1 AA 完整合规检查清单
（适用于 Moodle 平台、课程内容、主题、插件）
一、可感知 Perceivable - 用户必须能够 感知内容信息
1.1 文本替代 (Text Alternatives)
1.1.1 非文本内容
必须为所有非文本内容提供替代文本。
检查项：
□ 所有图片都有 alt text
□ 装饰图片使用 alt=""
□ 图标按钮有可访问名称
□ 图表有文字说明
□ 图形有数据表或描述
□ 数学公式可被屏幕阅读器读取
□ CAPTCHA 提供音频或替代方案
□ 图像地图提供文本链接
操作步骤示例（适用于课程页面、标签（Label）、页面（Page）、论坛、测验题目、书籍（Book）等）：
- 打开课程并开启 编辑模式。
- 在文本编辑器（如 TinyMCE）中插入图片。
- 在 Alternative text / Image description 字段填写图片描述。 如普通描述：Front entrance of the University Library building on campus / 校园大学图书馆大楼正门。 或者想要强调建筑的描述： 哥伦比亚国际大学校园图书馆玻璃正门建筑。 当这样提供替代文本（alt text）后，屏幕阅读器即可使看不到图片的用户，也能理解图片内容
示例图片：
代码： <img src="university-library-front-entrance.jpg" alt="哥伦比亚国际大学图书馆玻璃正门建筑">
好的alt text举例： “CIU学生在大学图书馆里安静地学习” 不好的 alt text 示例： “图书馆图片”
装饰图片使用 alt=""如果图片只是装饰（例如分隔线、背景图）：
在插入图片时：Alt text: "" 勾选：Image is decorative
这样 屏幕阅读器会跳过该图片。
语言一致性：替代文本必须与周围网页内容的语言保持一致。如果您的页面是中文的，则替代文本也应为中文。如果主要内容是英文的，则替代文本也应为英文，除非图像明确包含中文文本。
我们要问自己：如果你的学生看不到这张图片时，他需要知道什么？ 这就是alt text 的作用。
原则: 描述图片传达的信息或功能。
仅适用于Developer: 图标按钮有可访问名称
<button aria-label="Download assignment template">
<i class="icon-download"></i>
</button>
或者
<a href="file.pdf" aria-label="Download PDF">
<i class="fa fa-file"></i>
</a>
教师/课程部署人员无障碍内容规范：
- 图片必须填写 alt text
- 图表必须有文字解释
- 不允许用图片代替文本
- 公式必须使用 MathJax
1.2 基于时间的媒体 (Time-based Media)
1.2.1 纯音频 / 纯视频
□ 音频提供 完整文字稿
□ 无声视频提供 文本说明
常见不合规
- 只有音频，没有提供音频完整文稿
- 无声视频没有提供文本说明
- 只有摘要（summary）没有全文
- 自动生成但未校对（错误严重）
- 图片形式的文字稿（不可读屏）
简单来说，所有“听得到或看得到”的内容，都必须能“读得到”
合规做法
方法1：页面内直接提供文字稿
示例：
标题：第3讲：市场营销基础（音频）
[音频播放器]
文字稿：
老师：今天我们讲的是市场细分…
（完整逐字稿文本）
添加方法： 打开课程 → 添加 “网页（Page）” 或 “标签（Label）”
方法2：单独文件 + 链接
- 上传：
- lecture3.mp3
- lecture3-transcript.pdf / .html / .docx
页面写：
🎧 音频：第3讲
📄 文字稿下载：[点击查看文字稿]
纯视频（无声）的做法
示例： 上传一个“无声操作演示视频”
标题：如何提交作业（演示视频）
[视频]
文字说明：
1. 打开课程页面
2. 点击“作业1”
3. 点击“添加提交”
4. 上传文件
5. 点击保存
视频展示了以上操作流程。
- 要描述视觉信息
- 不是简单一句话，而是步骤或说明
常见不合规
- 视频无声 + 无任何说明
- 只有标题，没有内容解释
- 用“看视频即可”替代说明
1.2.2 预录媒体字幕
□ 所有视频提供 同步字幕
也就是说，所有“有声音的视频”必须提供同步字幕（captions） 是字幕（同步）， 不是 transcript（文字稿不能替代）
“能听到声音的视频”，必须让用户“同步读到内容”
视频审核checklist
- 是否有字幕（captions）
- 是否同步
- 是否完整（含音效）
- 是否可开启/关闭
- 自动字幕是否已校对
请视频提供者提供同步字幕文件。如果没有，则可由课程部署人员自动生成后，由教师或助教进行校对。
同步字幕要求可开启/关闭。 由用户可以控制（不是烧录嵌入进视频里的唯一方式）
视频提供者：教师提供视频文件的同时需要提供 字幕文件（推荐.vtt ）
字幕文件示例：
WEBVTT
00:00:01.000 --> 00:00:05.000
欢迎来到本课程
00:00:05.000 --> 00:00:10.000
今天我们讲市场营销基础
1.2.3 音频描述或媒体替代
□ 视频视觉信息有 音频描述
或
□ 提供完整文字版
1.2.4 实时字幕 (AA)
□ 实时直播课程提供 实时字幕
1.2.5 音频描述 (AA)
□ 关键视觉信息有音频描述
教师无障碍内容规范
- 音频必须提供文字版文本
- 无声视频提供文本说明
- 录播视频必须有字幕
- 直播课程提供实时字幕
1.3 可适应性 Adaptable
信息结构必须可程序识别。
1.3.1 信息与关系
□ HTML 使用正确语义标签
□ 标题使用 <h1> - <h6>
□ 列表使用 <ul> <ol>
□ 表格使用 <th> <caption>
□ 表格关联 header
□ 表单 label 正确绑定
□ Moodle 内容区块结构清晰
□ ARIA landmark 正确使用
□ Moodle block 有语义角色
1.3.2 有意义的顺序
□ 阅读顺序正确
□ Tab 顺序正确
□ DOM 顺序符合视觉顺序
1.3.3 感官特征
不能依赖：
□ “点击红色按钮”
□ “右侧链接”
必须提供文字说明
1.3.4 方向 (AA)
□ 页面支持 横屏和竖屏
1.3.5 输入目的识别 (AA)
□ 表单字段支持 autocomplete
例如：
1.4 可区分 Distinguishable
1.4.1 颜色不能作为唯一信息
□ 错误提示不只用红色
□ 状态信息不只用颜色
1.4.2 音频控制
□ 自动播放音频可暂停
1.4.3 对比度 (AA)
文本对比度：4.5:1
大字：3:1
检查：
□ Moodle 主题颜色
□ 按钮
□ 菜单
□ 链接
□ 表单
1.4.4 可调整文本大小
□ 文本可放大 200%
无功能损失
1.4.5 图像文字
□ 避免使用图片文字
1.4.10 Reflow (AA)
□ 在 320px 宽度下可用
1.4.11 非文本对比度
UI 元素对比度：
3:1
例如：
□ 按钮边框
□ 表单框
□ 图标
1.4.12 文本间距
用户可调整：
内容不破坏
1.4.13 Hover / Focus 内容
弹出提示必须：
□ 可关闭
□ 可悬停
□ 不自动消失
二、可操作 Operable
用户必须可以 操作界面
2.1 键盘可访问
2.1.1 键盘操作
□ 所有功能可用键盘操作
□ Moodle 菜单可键盘访问
□ 活动模块可键盘操作
2.1.2 无键盘陷阱
□ Tab 可以离开任何组件
2.1.4 单字符快捷键
□ 提供关闭选项
2.2 足够时间
2.2.1 可调整时间
□ 测验时间可延长
□ session timeout 提示
2.2.2 暂停 / 停止
□ 自动轮播可暂停
2.3 癫痫安全
2.3.1 三次闪烁
□ 页面无 >3Hz 闪烁
在 Moodle 课程内容中不要使用每秒闪烁超过 3 次的动画或视频，否则可能违反无障碍标准。
视频： 如果你在 Moodle 上传或嵌入视频
需要避免
- 快速闪烁的灯光效果
- 频繁切换的动画（>3 次/秒）
- 强烈红色闪烁
解决方法
- 使用正常剪辑节奏的视频
- 删除快速闪烁片段
- 如果是演示视频，避免快速动画
GIF 动图或动画
老师在 Moodle 页面放 GIF 动图。
无障碍要求
- 动图不能快速闪烁
- 动图循环速度不能超过 3 Hz
建议
- 使用慢速动画
- 或改成静态图片
页面通知或提醒
有些主题或插件或者其他代码会使用 闪烁提醒。
例如：
- 新作业提醒
- 警告信息
必须确保：
- 不要快速闪烁
- 最好使用 颜色或图标 而不是闪烁
判断方法
如果肉眼看到内容 像警报灯一样快速闪，基本就可能超过 3 Hz。
安全做法：
静态图片
缓慢动画
不闪烁的提示
避免：
快速闪烁
频繁颜色切换
红色闪光效果
2.4 可导航
2.4.1 跳过重复内容
□ 提供 Skip to main content
2.4.2 页面标题
□ 每页唯一标题
2.4.3 焦点顺序
□ Tab 顺序逻辑正确
2.4.4 链接目的
□ 链接文本清晰
避免：
2.4.5 多种导航 (AA)
必须至少两种：
□ 搜索
□ sitemap
□ 目录
□ breadcrumb
2.4.6 标题与标签
□ 标题描述清晰
2.4.7 可见焦点
□ focus outline 明显
2.5 输入方式
2.5.1 指针手势
□ 不依赖复杂手势
2.5.2 指针取消
□ 点击可取消
2.5.3 标签与名称一致
按钮：
视觉文字 = accessible name
2.5.4 运动激活
□ 可关闭
三、可理解 Understandable
3.1 可读
3.1.1 页面语言
□ <html lang="en">
3.1.2 内容语言
□ 外语段落标记 lang
3.2 可预测
3.2.1 焦点不触发变化
□ focus 不自动跳页
3.2.2 输入不触发变化
□ 输入字段不自动提交
3.2.3 一致导航
□ Moodle 页面导航一致
3.2.4 一致识别
□ 相同组件外观一致
3.3 输入帮助
3.3.1 错误识别
□ 错误提示明确
3.3.2 标签或说明
□ 表单有 label
3.3.3 错误建议
□ 提供修复建议
3.3.4 错误预防 (AA)
重要表单：
□ 可确认
□ 可撤销
□ 可复查
四、稳健 Robust
4.1 兼容性
4.1.1 解析
□ HTML 无严重错误
4.1.2 名称 / 角色 / 值
□ ARIA 正确使用
□ UI 控件 role 正确
□ 状态可读
例如：
4.1.3 状态信息 (AA)
□ 动态信息可被屏幕阅读器读取
例如：
Moodle 特有检查
Moodle 主题
□ 主题对比度符合标准
□ Skip navigation 存在
□ 响应式布局可访问
□ 移动端支持
Moodle 插件
□ 插件支持键盘
□ 插件有 ARIA
□ 插件无颜色依赖
Moodle 课程内容
□ PDF 可访问
□ Word 可访问
□ PPT 可访问
□ 视频有字幕
□ 图片有 alt
文档内容合规
必须确保：
□ Tagged PDF
□ 正确 heading
□ 语言
□ alt text
Word
□ Heading styles
□ alt text
□ 列表语义
PowerPoint
□ reading order
□ alt text
视频
□ 字幕
□ transcript
□ audio description
ADA 法律要求附加
网站必须提供：
□ Accessibility Statement
□ 联系方式
□ 无障碍支持渠道
自动化测试工具
建议使用：
□ axe DevTools
□ WAVE
□ Lighthouse
□ NVDA
□ JAWS
合规完成标准
当以下全部满足：
✔ WCAG 2.1 Level AA
✔ ADA Title III
Kepha Moodle WCAG2.1AA_Checklist
下载此文件，并用浏览器打开
