查看“︁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
'''Accessibility / 无障碍'''

* 无障碍是指残疾人或者年老的人能够以同样有效、同样融合的方式获取相同的信息、参与相同的互动、享受相同的服务，并且使用起来与健全人基本相同。
* 无障碍环境的形成受到我们的行为、我们与环境的互动以及我们的个人偏好的影响。
* 无障碍环境对某些人来说至关重要，对所有人都有用。

* 辅助技术目的是解决残疾人士在完成任务时可能遇到的特定障碍。辅助技术的例子包括文本转语音、屏幕阅读器和语音识别。
* 无障碍技术旨在满足众多不同用户的需求。这类技术包含一些可由用户自定义的功能，以满足其个性化需求。

== '''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''':  图标按钮有可访问名称 

<code><button aria-label="Download assignment template"></code>

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

<code></button></code>

或者

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

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

<code></a></code>

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

# 图片必须填写 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. 点击保存

视频展示了以上操作流程。

* 要描述'''视觉信息'''
* 不是简单一句话，而是'''步骤或说明'''

'''''常见不合规'''''

* 视频无声 + 无任何说明
* 只有标题，没有内容解释
* 用“看视频即可”替代说明<br />
----

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

也就是说，所有“有声音的视频”必须提供同步字幕（captions）      是'''字幕（同步），''' 不是 transcript（文字稿不能替代）

“能听到声音的视频”，必须让用户“同步读到内容”

视频审核checklist

* 是否有字幕（captions）
* 是否同步
* 是否完整（含音效）
* 是否可开启/关闭
* 自动字幕是否已校对

请视频提供者提供同步字幕文件。如果没有，则可由课程部署人员自动生成后，由教师或助教进行校对。 

同步字幕要求可开启/关闭。 由用户可以控制（不是烧录嵌入进视频里的唯一方式）

视频提供者：教师提供'''视频文件'''的同时需要提供 '''字幕文件'''（推荐.vtt ）

字幕文件示例：

<code>WEBVTT</code>

<code>00:00:01.000 --> 00:00:05.000</code>

<code>欢迎同学们来到本课程</code>

<code>00:00:05.000 --> 00:00:10.000</code>

<code>今天我们讲市场营销基础</code>
----

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

或

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

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

Captions 按时间轴同步显示在视频下方，通常包含声音描述；而 Transcripts 是独立于视频的文本文件，通常只有对白，用于阅读或记录。 
 

我们提供的两种直播课程平台(都提供了WCAG2.1 AA Accessibility的实时字幕功能)： 

'''Teams:'''

Teams 会议中的Accessibility辅助功能

* 实时字幕（AI生成）：提供自动、实时的字幕，显示谁在说话。
* 实时翻译字幕：允许参与者查看翻译成他们首选语言的字幕。

如何使用实时字幕?

# 在Teams会议中，点击“More/更多”（三个点）图标。
# 选择语言和演讲"Language and speech"。
# 选择“显示实时字幕"Show live captions” 也可以使用键盘快捷键：Alt+Shift+C,     MacOS系统: Command (⌘) + Shift + C

[[File:ImageCaptions.png|center|thumb|1152x1152px]]
如何使用文字稿?

# 在Teams会议中，点击“More/更多”（三个点）图标。
# 选择录像和实时字幕"Record and transcribe"。
# 选择“开启实时字幕"Start Transcription” 也可以使用键盘快捷键：Alt+Shift+C,     MacOS系统: Command (⌘) + Shift + C     

[[File:ImageTeamsTranscription.png|center|thumb|1021x1021px]]



'''Zoom:'''

默认情况下，我们的Zoom已启用自动字幕功能。默认语言为英语，但您仍可以选择其他语言比如中文。 系统将根据设置生成相应语言的字幕。 

语言的可用性，取决于主持人的自动字幕设置。参会者可以点击“CC”图标来开启或关闭字幕。

如何开启实时字幕？ 

# '''在会议控制工具栏中， 点击“更多/More（三个点）图标，'''   
# '''然后点击“显示字幕/Show captions”'''

[[File:ImageZoomcaption.png|center|thumb|1100x1100px]]
如何查看会议的完整文字记录/文字稿。

# '''在会议控制工具栏中， 点击“更多/More（三个点）图标，   然后点击“显示字幕/Show captions”'''图标，。
# '''在“字幕和翻译”'''下，点击“'''查看完整文字稿”'''。'''“文字稿/Transcript”'''面板将出现，显示本次会议的完整文字稿。
# '''（可选）在文字稿/Transcript'''面板顶部，使用搜索栏搜索文字稿。
# '''（可选）在文字稿/Transcript'''面板底部 ，单击'''“保存文字稿/Save transcript”''' 可下载完整文字稿的 .TXT 文件。
# '''（可选）要隐藏完整文字记录，请在“文字稿/Transcript”'''面板的右上角单击'''X'''图标关闭窗口。[[File:ImageCaptiondandTranscript.png|alt=ImageCaptiondandTranscript|center|thumb|1119x1119px|ImageCaptiondandTranscript]]

----

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



'''教师无障碍内容规范'''
* 音频必须提供文字版文本
* 无声视频提供文本说明
* 录播视频必须有字幕
* 直播课程提供实时字幕

----

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


信息和关系：通过代码（HTML标签）呈现的网页信息、结构和关系，必须能够通过程序确定或提供文本。例如，使用 <nowiki><h1>~<h6> 表示标题，<ul> 表示列表。</nowiki>

有意义的序列：内容显示的顺序必须符合逻辑，使辅助技术（如屏幕阅读器）能以正确的阅读顺序呈现内容。

感知特性 ：不应仅依赖形状、大小、视觉位置或声音来传达指令。例如，不仅说“点击右边的按钮”，应明确标识为“提交按钮”。

视图方向：内容不应限制单一视图方向（如仅限纵向或横向），除非特定视图是必不可少的。

识别输入目的 ：输入数据的表单字段必须定义明确的用途（如使用 autocomplete 属性），以便辅助技术可以自动填充或标识。 
----
{| class="wikitable"
! colspan="undefined" |关键要素
! colspan="undefined" |'''重点''' 
'''（适用于教师提供的所有课程资料包括文本内容，PowerPoint,Word,Excel等）'''
! colspan="undefined" |责任方
|-
| colspan="undefined" |信息和关系
| colspan="undefined" |使用文档内置结构（如 Word 标题样式、PPT 版式/标题占位符、Excel表格结构标题行/表头），而不是仅用视觉样式表达结构
| colspan="undefined" |教师（创建内容的人需要正确使用结构工具）
|-
| colspan="undefined" |有意义的序列
| colspan="undefined" |内容顺序逻辑合理清晰（PPT 阅读顺序、Word 线性结构、Excel 表格顺序从左到右、从上到下有逻辑）
| colspan="undefined" |教师
|-
| colspan="undefined" |感知特性
| colspan="undefined" |不仅依赖视觉或位置描述，应使用明确文本说明（如“图1 销售图” 或 “见销售增长 图（图1）”而不是“看右边图” ）
| colspan="undefined" |教师
|-
|视图方向
|内容在不同方向或显示方式下仍可理解（不依赖固定版式/方向）
|两者兼有（教师设计内容 + 工具/模板支持）
|-
|识别输入目的
|表单或数据字段有清晰标签（如Word 表单说明、 Excel 列名）
|老师
|}
----

=== 1.3.1 信息与关系Info and Relationships ===
□ 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 有语义角色


示例：

=== 标题与结构 (H1-H6) ===

* '''错误做法：''' 在 Moodle 的文本编辑器（Atto 或 TinyMCE）里，通过加粗、加大字号、改变颜色来制作“标题”。
* '''正确做法：''' 选中文字，在下拉菜单中选择 '''"Heading (large)"''' 或 '''"Heading (medium)"'''。<blockquote>'''Moodle 技巧：''' Moodle 的课程名称通常已经是 <code><nowiki><h1></nowiki></code>，所以课程内的章节标题应从 <code><nowiki><h2></nowiki></code> 或 <code><nowiki><h3></nowiki></code> 开始，形成严格的嵌套层级。[[File:ImageSelectHeadingsInEditor.png|alt=ImageSelectHeadingsInEditor|center|frame|ImageSelectHeadingsInEditor]]</blockquote>

=== 表格关联 (th & caption) ===

* '''例子：''' 一个展示学生平时成绩的表格。
* '''实现：''' * 使用 <code><nowiki><caption></nowiki></code> 描述表格名称（如：2026年春季期中成绩单）。
** 第一行表头使用 <code><nowiki><th></nowiki></code> 并加上 <code>scope="col"</code>。
** 如果表格复杂，确保 <code>id</code> 和 <code>headers</code> 属性一一对应。

=== 表单 Label 绑定 ===

* '''Moodle 场景：''' 在创建一个自定义问卷（Feedback）或数据库活动时。
* '''实现：''' 确保输入框旁边的文字不仅仅是“浮动文字”，而是用 <code><label for="id"></code> 标签包裹，且 <code>for</code> 的值与输入框的 <code>id</code> 严格一致。这样盲人点击文字时，焦点会自动进入输入框。

----

=== 1.3.2 有意义的顺序Meaningful Sequence ===
□ 阅读顺序正确

□ Tab 顺序正确

□ DOM 顺序符合视觉顺序
----

=== 1.3.3 感官特征Sensory Characteristics ===
不能依赖：

□ “点击红色按钮”

□ “右侧链接”

必须提供文字说明
----

=== 1.3.4 方向  Orientation ===
□ 页面支持 '''横屏和竖屏'''
----

=== 1.3.5 输入目的识别  Identify Input Purpose ===
□ 表单字段支持 '''autocomplete'''

例如：
----

= 1.4 可区分 Distinguishable =
----

=== 1.4.1 颜色不能作为唯一信息 ===
□ 错误提示不只用红色

□ 状态信息不只用颜色
----

=== 1.4.2 音频控制 ===
□ 自动播放音频可暂停
----

=== 1.4.3 对比度 (AA) ===
文本对比度：'''4.5:1'''

如何查看对比度？ 

- 使用 WebAIM 对比度检查器等工具或浏览器扩展程序。

Log标志不受 WCAG 对比度要求的约束，但仍应注重易读性。

如何确保超链接对比度？

- 使用颜色和下划线使超链接与周围的文本区分开来。

大字：'''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 =
{| class="wikitable"
! colspan="undefined" |关键要素
! colspan="undefined" |重点
! colspan="undefined" |责任方
|-
| colspan="undefined" |可读
| colspan="undefined" |语言清晰，格式正确，缩写定义明确。
| colspan="undefined" |老师
|-
| colspan="undefined" |可预测的
| colspan="undefined" |一致的导航和功能。
| colspan="undefined" |开发者
|-
| colspan="undefined" |输入辅助
| colspan="undefined" |错误预防和识别。
| colspan="undefined" |两者兼有（开发者构建它，教师使用它）
|}
简而言之，开发者确保“房子”（Moodle）易于导航，而教师则确保“家具”（内容）摆放得易于理解。

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

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

✔ WCAG 2.1 Level AA

✔ ADA Title III

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

= FAQ 常见问题解答[[File:ImageFAQ.png|alt=ImageFAQ|frameless|74x74px]] =
替代文本？
{| class="wikitable"
|如何为图表编写替代文字？
|在替代文字中总结关键信息。在上下文中提供完整的数据描述，或链接数据表。例如：“柱状图显示每月缺勤人数：1 月总计 30 人，2 月总计 25 人，3 月总计 28 人。”
|-
|装饰性图片是否应该添加替代文字？
|如果图片纯粹是装饰性的，请使用 alt=""，以便屏幕阅读器跳过它。
|-
|如何为嵌入文本的图片编写替代文字？
|如果图片包含关键文字，请将其添加到替代文字中。如果文字较长，请进行概括，并在其他地方提供完整版本。例如：“无障碍峰会活动宣传单，6月15日，主讲嘉宾：John Doe。”
|-
|我应该如何处理logo的替代文字？
|请使用公司或组织名称。例如：“Google 标志”，而不是“蓝红字母拼写的 Google”。
|-
|那么像信息图这类复杂的图像呢？
|在替代文本中提供简短摘要。在上下文文本中或以链接文档的形式提供完整描述。例如：“信息图总结了无障碍最佳实践。完整描述见下方文本。”
|}


对比度
{| class="wikitable"
|如何查看对比度？
|使用 WebAIM 对比度检查器等工具或浏览器扩展程序。
|-
|那么，标志呢？
|标志不受 WCAG 对比度要求的约束，但仍应注重易读性。
|-
|如何确保超链接对比度？
|使用颜色和下划线使超链接与周围的文本区分开来。
|-
|背景可以使用透明效果吗？
|避免使用透明度过高的背景，以免降低对比度，影响可读性。
|-
|如果我的品牌/模板颜色不符合对比度要求怎么办？
|调整遮阳强度或提供其他无障碍设计方案
|}


标题
{| class="wikitable"
|一份文档或网页应该有多少个 H1 标签？
|每个文档或页面应该只有一个 H1 标签，通常用作主标题。
|-
|我可以用粗体字代替标题吗？
|不可以，粗体文本并不能提供正规标题的结构优势。请使用真正的标题样式。
|-
|如果某个章节不需要标题怎么办？
|请使用段落正文。不要为了增加间距而插入空标题。
|-
|如何测试我的标题结构是否正确？
|使用屏幕阅读器或辅助工具按标题导航。
|-
|表格中是否需要使用标题？
|仅当表格需要分段时才使用；否则，请使用表格标题。
|}
描述性链接
{| class="wikitable"
|当链接到一个下载文件的链接时，如何编写描述性链接
|
* 请注明文件类型和用途（例如，“下载无障碍 PDF 指南 [PDF]”）。
* 避免使用“点击此处下载”之类的通用文本。
|-
|如果我的内容包含指向同一目标的多个链接，该怎么办？
|
* 使用一致、描述性的链接文本，但避免过度重复。
* 如有必要，请添加上下文（例如，“注册参加活动（9-11年级）”与“注册参加活动（高年级）”）。
|-
|导航菜单中的链接应该如何处理？
|
* 使用清晰简洁的菜单标签（例如，“辅助功能资源”而不是“更多信息”）。
* 确保菜单结构按逻辑顺序将相关链接分组。
|-
|特定行动Call to Action (CTA) 按钮中的链接呢？如联系我们，立即付款，免费下载等
|
* 按钮文字应具有行动导向性和针对性（例如，“注册参加研讨会”而不是“点击注册”）。
* 确保按钮文字本身就能为使用辅助技术的用户提供必要的上下文信息。
|-
|如何确保文档中的链接可访问？
|
* 除非必要，否则请避免使用原始URL。
* 确保文档中的超链接颜色与周围文本具有足够的对比度，并且能够区分开来。
* 如果要在打印文档中添加链接，请以可读格式提供完整的 URL。
|}


多媒体无障碍访问
{| class="wikitable"
|如何制作准确的字幕？
|老师尽可能提供视频字幕源文件，可使用专业字幕服务或人工智能辅助工具，然后人工审核准确性。 如果需要协助，可联系课程部署专员帮助开启自动生成字幕，然后由老师或助教人工审核准确性。
|-
|自动生成的字幕就足够了吗？
|不够，自动生成的字幕经常会有错误。务必检查、编辑以及人工审核。
|-
|什么情况下需要音频描述？
|如果视频包含对话无法传达的重要视觉信息。
|-
|什么是无障碍媒体播放器？
|支持字幕、键盘导航和屏幕阅读器兼容性的播放器。
|-
|我应该如何处理实时视频的无障碍访问问题？
|提供实时字幕，并尽可能提供美国手语翻译。
|}



= 按内容类型划分的课程资料 =

==== '''<u>PowerPoint 幻灯片</u>''' ====
无障碍PowerPoint幻灯片确保所有观众（包括使用辅助技术的用户）都能阅读、浏览和使用幻灯片。这适用于 PowerPoint (PPT)、Google Slides 和其他基于幻灯片的工具。

==== 演示可访问性的关键原则 ====
{| class="wikitable"
!战略
!如何
!如何检查
|-
|每张幻灯片都要使用幻灯片标题
|
* 每张幻灯片都应该有一个独特且描述性的标题。
* 避免使用空白标题——这有助于使用屏幕阅读器的用户进行导航。
|启用大纲视图（PowerPoint）或检查 Google 幻灯片中的幻灯片标题。
|-
|请确保阅读顺序正确。
|
* 将幻灯片内容按逻辑顺序排列。
* 使用选择窗格（PowerPoint）或 Tab 键导航来验证顺序。
|使用 Tab 键在幻灯片之间切换——确保元素按有意义的顺序排列。
|-
|使用易于理解的文本格式
|
* 使用无衬线字体（例如 Arial、Calibri、Verdana）。
* 为了保证可读性，请确保字体大小至少为 24 磅。
* 保持文字与背景之间的高对比度。
|在 PowerPoint 或 Google Slides 中运行辅助功能检查器。
|-
|为图像和图形提供替代文本
|
* 为有意义的图片、图表和信息图添加描述性替代文字。
* 将装饰性图像标记为装饰性（PowerPoint）或留空。
|右键单击图像并选择“替代文本”。
|-
|确保链接具有描述性
|
* 请使用有意义的链接文本，而不是原始URL。
* 例如：“了解更多无障碍信息”而不是“点击此处”。
|扫描“点击此处”之类的通用短语，并将其替换为上下文相关的链接。
|-
|避免仅以颜色作为沟通手段。
|
* 使用图案、标签或下划线来区分关键元素。
* 避免使用红色/绿色组合，因为这可能会给色盲用户带来困扰。
|以灰度模式查看幻灯片，或使用颜色对比度检查器。
|-
|为现场演示启用自动字幕
|
* 使用内置字幕工具
* 提供预先录制演示文稿的文字稿。
|启用实时字幕并测试其准确性。
|-
|以易于访问的格式分享演示文稿
|
* 将幻灯片导出为带标签的 PDF 文件，以保留其结构。
* 避免以图片或扫描版 PDF 的形式分发幻灯片。
|在 Adobe Acrobat 中打开导出的 PDF 文件，并使用辅助功能检查器。
|}
[https://aem.cast.org/create/creating-accessible-documents '''如何制作/创建无障碍文件/文稿''']

[https://webaim.org/techniques/powerpoint/ '''微软 PowerPoint 辅助功能''']

==== '''<u>文档 Document</u>''' ====
无障碍文档确保所有用户（包括残障人士）都能有效地阅读、浏览和使用文档内容。这适用于文字处理文件（例如 Microsoft Word、Google Docs）、PDF 和其他文本文件。

==== 文档可访问性的关键原则 ====
{| class="wikitable"
!战略
!如何
!如何检查
|-
|使用正确的标题和结构
|
* 应用真正的标题样式（H1、H2、H3 等），而不是仅仅加粗文本。
* 保持逻辑顺序（例如，不要从 H1 跳到 H3）。
* 确保标题准确描述各部分内容。
|使用文档内置的导航窗格（Word/Google Docs）来验证结构。
|-
|为图片提供替代文字
|
* 为有意义的图片添加简洁但描述性的替代文字。
* 装饰性图片应标记为装饰性图片（Word），或不添加替代文字。
* 如果图像传达了复杂的数据（例如图表），请在附近添加文字摘要。
|右键单击图像，查看是否有“替代文本”选项。
|-
|确保链接具有描述性
|
* 使用有意义的链接文本（例如，“查看无障碍指南”而不是“点击此处”）。
* 除非必要，否则请避免使用原始URL。
|扫描文档，查找“点击此处”或“阅读更多”之类的短语，并将其替换为描述性文字。
|-
|正确使用表格
|
* 使用表格属性定义列标题。
* 避免合并单元格或空单元格，以免扰乱阅读顺序。
* 添加表格标题或摘要以提供背景信息。
|在 Word 中，选择表格，转到“表格设计”，然后检查是否有表头行。
|-
|确保足够的色彩对比度
|
* 确保文字与其背景的对比度至少为 4.5:1。
* 避免仅使用颜色来传达含义。
|使用颜色对比度检查器或将文档转换为灰度图进行测试。
|-
|使用易于访问的字体和格式
|
* 选择易读字体（例如 Arial、Calibri、Verdana）。
* 正文字体大小至少使用 12 磅。
* 为了保证可读性，请确保行距至少为 1.5。
|扫描文档，检查是否有字太小或难以辨认的文字。
|-
|请核对阅读顺序和逻辑流程
|
* 请确保按预期顺序阅读内容（尤其是在 PDF 文件中）。
* 避免将文本放置在会干扰导航的浮动文本框中。
|使用 Tab 键导航或屏幕阅读器预览。
|-
|（如有需要）转换为易于访问的PDF格式
|
* 从 Word/Docs 正确导出，而不是打印成 PDF。
* 确保标签、替代文本和标题保持不变。
* 请使用 Adobe Acrobat 的辅助功能检查器进行验证。
|在 Acrobat 中，打开辅助功能检查器（工具 > 辅助功能 > 全面检查）。
|}
[https://www.youtube.com/playlist?list=PL2GnpAhfNiFGnv0D6ATcclO3cyq3ZZjyG '''视频教程： How to make word documents accessible 如何使Word文档易于访问'''] 

==== '''<u>视频和音频</u>''' ====
无障碍视频和音频内容确保所有用户，包括听力或视力障碍者，都能获取信息。这适用于录制媒体和直播媒体。

===== 视频和音频无障碍访问的关键原则 =====
{| class="wikitable"
!战略
!如何
!如何检查
|-
|为所有视频内容提供字幕
|
* 字幕应同步、准确、完整。
* 使用可开启或关闭的隐藏式字幕。
* 包括说话人识别和非语音声音（例如，[播放音乐]）。
|启用字幕，并通过观看视频来验证其准确性。
|-
|提供音频和视频的文字稿
|
* 文字稿应包含对话内容和相关声音。
* 提供可下载的文本或HTML格式的成绩单。
|打开文字稿，确认其与口语内容一致。
|-
|为视觉内容提供音频描述
|
* 音频描述会叙述对话中未传达的重要视觉细节。
* 对于包含大量视觉元素（例如图表、演示）的视频来说，这一点尤为重要。
|播放带有音频描述的视频，并确认关键画面已进行描述。
|-
|使用易于访问的媒体播放器
|
* 确保键盘可以操作播放控制功能。
* 提供对比度友好的界面，以提高可视性。
|仅使用键盘和屏幕阅读器测试媒体控制。
|-
|确保实时视频可访问
|
* 为网络研讨会和虚拟会议提供实时字幕。
* 考虑提供手语翻译服务。
|启用实时字幕，并在播放过程中确认字幕准确性。
|}

==== '''<u>PDF文档</u>''' ====
PDF 是一种常见的文档共享格式，但它在可访问性方面存在一些挑战。以下将帮助您决定何时使用 PDF，何时避免使用 PDF，以及在必要时如何提高 PDF 的可访问性。
----

====== PDF格式的优点和缺点 ======
优点

* 通用格式：PDF 文件在不同设备和操作系统上保持格式一致。
* 安全功能：PDF 文件可以限制编辑或保护敏感信息。
* 可直接打印：非常适合需要按设计原样打印的文档（例如，宣传册、传单）。

缺点

* 可访问性挑战：PDF 文件通常缺乏屏幕阅读器所需的正确结构（例如，缺少标签、阅读顺序问题）。
* 难以编辑：'''修复辅助功能问题需要 Adobe Acrobat Pro 等专业软件。'''
* 不适合移动设备：与响应式网页不同，PDF 文件在小屏幕上难以浏览。

====== 何时使用PDF？ ======
* 基本格式：当文档格式至关重要时（例如，表格、正式信函），请使用 PDF。
* 存档文档：如果 PDF 文件已正确添加无障碍标签，则可以作为存档内容。
* 印刷分发：对于主要用于印刷的材料，请使用 PDF 文件。

====== 何时应避免使用PDF文件？ ======
* 简单的文本内容：对于简单的内容（例如，新闻通讯、更新），请'''使用网页'''或易于访问的 Word 文档。
* 交互式内容：'''除非能确保完全的交互性和可访问性，否则请避免使用 PDF 格式的表单或应用程序。'''
* 需要频繁更新：对于经常更改的内容，请避免使用 PDF；更新网页效率更高，并可确保用户访问最新版本。

[https://helpx.adobe.com/acrobat/using/creating-accessible-pdfs.html '''创建易于访问的PDF文件''']

==== '''<u>网络平台媒体</u>''' ====
网络平台及社交媒体无障碍功能确保所有用户都能使用帖子、图片、视频和互动内容，包括那些依赖屏幕阅读器、字幕和键盘导航的用户。每个平台的无障碍功能各不相同，但核心最佳实践适用于所有平台。

===== 网络平台及社交媒体内容可访问性的关键原则 =====
{| class="wikitable"
!战略
!如何
!如何检查
|-
|撰写描述性强、清晰易懂的文本
|
* 使用通俗易懂的语言，避免使用不必要的术语。
* 标签中的每个单词都要大写（#驼峰式命名法，而不是 #全部小写）。
* 帖子内容应简洁明了，便于阅读，并注意适当的间距。
|请大声朗读这篇文章，以确保其清晰易懂。
|-
|为图片提供替代文字
|
* 为所有有意义的图片添加替代文字。
* 描述要详尽但要简洁（重点突出关键细节）。
|启用屏幕阅读器并验证图像的描述方式。
|-
|确保视频内容包含字幕和文字稿。
|
* 使用自动生成的字幕并手动校正，或者上传您自己的字幕。
* 提供成绩单链接。
|打开字幕播放视频，并核实其准确性。
|-
|使用描述性链接
|
* 避免使用通用的“点击此处”短语——使用清晰明了的链接文本。
* 使用易于访问的 URL 缩短服务缩短链接，这些服务允许使用描述性别名。
|检查所有链接，确保它们指向正确的目的地。
|-
|使表情符号和特殊字符清晰可读
|
* 请谨慎使用表情符号，因为屏幕阅读器会将其朗读出来。
* 表情符号应放在句末，不要放在文本中间。
* 避免过度使用特殊字符和符号。
|使用屏幕阅读器测试表情符号和特殊字符的朗读方式。
|-
|确保帖子可通过键盘浏览。
|
* 交互元素（投票、按钮、表单）应可通过 Tab 键和 Enter 键访问。
* 避免使用需要悬停操作而没有其他替代方案的交互式图形。
|尝试仅使用键盘浏览帖子。
|-
|提供高对比度的图像和图形
|
* 图片中的文字与背景的对比度应至少为 4.5:1。
* 避免在明亮的背景上使用浅色文字。
|使用对比度检查器验证清晰度。
|-
|限制动画和闪烁内容
|
* 避免快速闪烁的内容，以防止诱发癫痫发作。
* 如果适用，请提供暂停或停止动画的选项。
|播放动画并确保其符合 WCAG 闪烁阈值。
|}

= 更多详细信息请参考以下资料 =
[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''']