Accessibility

来自Kepha百科

本清单按照 WCAG 2.1 四大原则(POUR) 和 全部 Level A + AA 成功标准整理,适用于:

  • Moodle LMS 平台本身
  • Moodle 主题 (Theme)
  • 插件 (Plugins)
  • 课程页面
  • 教学内容(PDF、PPT、视频、Word、HTML等)
  • 对于标识适用于developer,则由IT开发人员解决,其他内容由教授/助教/课程部署人员等内容负责人解决。

本清单可作为:

  • ADA 合规自我审计 checklist
  • 教学部门、课程设计部署人员,以及IT的合规标准

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)等):

  1. 打开课程并开启 编辑模式。
  2. 在文本编辑器(如 TinyMCE)中插入图片。
  3. 在 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>

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

  1. 图片必须填写 alt text
  2. 图表必须有文字解释
  3. 不允许用图片代替文本
  4. 公式必须使用 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 使用正确语义标签

□ 标题使用 <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


文档内容合规

必须确保:


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

下载此文件,并用浏览器打开