查看“︁Accessibility”︁的源代码

== '''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 标签，确保主流浏览器和读屏软件都能准确解析。
** '''兼容辅助技术：''' 确保盲人点显器或语音控制软件能顺利读取网页数据。

----<blockquote>'''一句话总结：''' 如果一个页面能被'''看/听到'''（感知）、能被'''点到'''（操作）、能被'''看懂'''（理解），并且在'''各种设备上都不崩溃'''（稳健），那它就基本符合了 WCAG 的核心精神。</blockquote>
----

= Moodle LMS ADA / WCAG 2.1 AA 完整合规检查清单 =
（适用于 Moodle 平台、课程内容、主题、插件）
----

= 一、可感知 Perceivable - 用户必须能够 '''感知内容信息''' =

= 1.1 文本替代 (Text Alternatives) =

=== 1.1.1 非文本内容 ===
必须为所有非文本内容提供替代文本。

检查项：

□ 所有图片都有 '''alt text'''

□ 装饰图片使用 <code>alt=""</code>

□ 图标按钮有可访问名称

□ 图表有文字说明

□ 图形有数据表或描述

□ 数学公式可被屏幕阅读器读取

□ CAPTCHA 提供音频或替代方案

□ 图像地图提供文本链接


'''操作步骤示例（适用于课程页面、标签（Label）、页面（Page）、论坛、测验题目、书籍（Book）等）：'''

# 打开课程并开启 '''编辑模式'''。
# 在文本编辑器（如 '''TinyMCE'''）中插入图片。
# 在 '''Alternative text / Image description''' 字段填写图片描述。 如普通描述：Front entrance of the University Library building on campus  / 校园大学图书馆大楼正门。      或者想要强调建筑的描述： 哥伦比亚国际大学校园图书馆玻璃正门建筑。  当这样提供替代文本（alt text）后，屏幕阅读器即可使看不到图片的用户，也能理解图片内容

示例图片：
[[File:Front entrance of the University Library building on campus.png|center|thumb|720x720px]]


代码： <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">

    <nowiki><i class="icon-download"></i></nowiki>

</button>

或者

<a href="file.pdf" aria-label="Download PDF">

    <nowiki><i class="fa fa-file"></i></nowiki>

</a>

'''教师/课程部署人员无障碍内容规范'''：

# 图片必须填写 alt text
# 图表必须有文字解释
# 不允许用图片代替文本
# 公式必须使用 MathJax

= 1.2 基于时间的媒体 (Time-based Media) =

=== 1.2.1 纯音频 / 纯视频  ===
□ 音频提供 '''完整文字稿'''

□ 无声视频提供 '''文本说明'''
----

=== 1.2.2 预录媒体字幕 ===
□ 所有视频提供 '''同步字幕'''
----

=== 1.2.3 音频描述或媒体替代 ===
□ 视频视觉信息有 '''音频描述'''

或

□ 提供完整文字版
----

=== 1.2.4 实时字幕 (AA) ===
□ 实时直播课程提供 '''实时字幕'''
----

=== 1.2.5 音频描述 (AA) ===
□ 关键视觉信息有音频描述


'''教师无障碍内容规范'''

* 音频必须提供文字版文本
* 无声视频提供文本说明
* 录播视频必须有字幕
* 直播课程提供实时字幕

----

= 1.3 可适应性 Adaptable =
信息结构必须可程序识别。
----

=== 1.3.1 信息与关系 ===
□ HTML 使用正确语义标签

□ 标题使用 <code><nowiki><h1> - <h6></nowiki></code>

□ 列表使用 <code><nowiki><ul></nowiki></code> <code><nowiki><ol></nowiki></code>

□ 表格使用 <code><nowiki><th></nowiki></code> <code><nowiki><caption></nowiki></code>

□ 表格关联 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 页面语言 ===
□ <code><html lang="en"></code>
----

=== 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
----

= 文档内容合规 =
必须确保：
----

=== PDF ===
□ 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
----

= Moodle 推荐审核流程 =
每学期：

1. 平台自动扫描

2. 手动审计

3. 课程内容审计

4. PDF 检查

5. 视频字幕检查
----

= 合规完成标准 =
当以下全部满足：

✔ WCAG 2.1 Level AA

✔ ADA Title III

= Kepha Moodle WCAG2.1AA_Checklist =
下载此文件，并用浏览器打开

= 更多详细信息请参考以下资料 =
[https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1 How to Meet WCAG (Quick Reference)]
[https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/ What’s New in WCAG 2.1]