Accessibility

来自Kepha百科
Harrison.xing@ciu.edu​(留言 | 贡献)2026年3月17日 (二) 04:32的版本 (创建页面,内容为“本清单按照 '''WCAG 2.1 四大原则(POUR)''' 和 '''全部 Level A + AA 成功标准'''整理,适用于: * Moodle LMS 平台本身 * Moodle 主题 (Theme) * 插件 (Plugins) * 课程页面 * 教学内容(PDF、PPT、视频、Word、HTML等) 本清单可作为: * ADA 合规自我审计 checklist * 教学部门、课程设计部署人员,以及IT的合规标准 == '''WCAG2.1 四大原则''' == == 1. 可感知性 (Perceivable) == '''核…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

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

  • Moodle LMS 平台本身
  • Moodle 主题 (Theme)
  • 插件 (Plugins)
  • 课程页面
  • 教学内容(PDF、PPT、视频、Word、HTML等)

本清单可作为:

  • 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 text 的作用。

原则: 描述图片传达的信息或功能。


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 闪烁


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 II / III

✔ Section 508