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 標籤，確保主流瀏覽器和讀屏軟件都能準確解析。
- 兼容輔助技術： 確保盲人點顯器或語音控制軟件能順利讀取網頁數據。
一句話總結： 如果一個頁面能被看/聽到（感知）、能被點到（操作）、能被看懂（理解），並且在各種設備上都不崩潰（穩健），那它就基本符合了 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)
□ 實時直播課程提供 實時字幕
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
如何使用文字稿?
- 在Teams會議中，點擊「More/更多」（三個點）圖標。
- 選擇錄像和實時字幕"Record and transcribe"。
- 選擇「開啟實時字幕"Start Transcription」 也可以使用鍵盤快捷鍵：Alt+Shift+C, MacOS系統: Command (⌘) + Shift + C
Zoom:
默認情況下，我們的Zoom已啟用自動字幕功能。默認語言為英語，但您仍可以選擇其他語言比如中文。 系統將根據設置生成相應語言的字幕。
語言的可用性，取決於主持人的自動字幕設置。參會者可以點擊「CC」圖標來開啟或關閉字幕。
如何開啟實時字幕？
- 在會議控制工具欄中， 點擊「更多/More（三個點）圖標，
- 然後點擊「顯示字幕/Show captions」
如何查看會議的完整文字記錄/文字稿。
- 在會議控制工具欄中， 點擊「更多/More（三個點）圖標， 然後點擊「顯示字幕/Show captions」圖標，。
- 在「字幕和翻譯」下，點擊「查看完整文字稿」。「文字稿/Transcript」面板將出現，顯示本次會議的完整文字稿。
- （可選）在文字稿/Transcript面板頂部，使用搜索欄搜索文字稿。
- （可選）在文字稿/Transcript面板底部 ，單擊「保存文字稿/Save transcript」 可下載完整文字稿的 .TXT 文件。
- （可選）要隱藏完整文字記錄，請在「文字稿/Transcript」面板的右上角單擊X圖標關閉窗口。
建立縮圖錯誤：檔案遺失 ImageCaptiondandTranscript
1.2.5 音頻描述 (AA)
□ 關鍵視覺信息有音頻描述
教師無障礙內容規範
- 音頻必須提供文字版文本
- 無聲視頻提供文本說明
- 錄播視頻必須有字幕
- 直播課程提供實時字幕
1.3 可適應性 Adaptable
信息結構必須可程序識別。
信息和關係：通過代碼（HTML標籤）呈現的網頁信息、結構和關係，必須能夠通過程序確定或提供文本。例如，使用 <h1>~<h6> 表示标题，<ul> 表示列表。
有意義的序列：內容顯示的順序必須符合邏輯，使輔助技術（如屏幕閱讀器）能以正確的閱讀順序呈現內容。
感知特性 ：不應僅依賴形狀、大小、視覺位置或聲音來傳達指令。例如，不僅說「點擊右邊的按鈕」，應明確標識為「提交按鈕」。
視圖方向：內容不應限制單一視圖方向（如僅限縱向或橫向），除非特定視圖是必不可少的。
識別輸入目的 ：輸入數據的表單字段必須定義明確的用途（如使用 autocomplete 屬性），以便輔助技術可以自動填充或標識。
| 關鍵要素 | 重點
（適用於教師提供的所有課程資料包括文本內容，PowerPoint,Word,Excel等） |
責任方 |
|---|---|---|
| 信息和關係 | 使用文檔內置結構（如 Word 標題樣式、PPT 版式/標題佔位符、Excel表格結構標題行/表頭），而不是僅用視覺樣式表達結構 | 教師（創建內容的人需要正確使用結構工具） |
| 有意義的序列 | 內容順序邏輯合理清晰（PPT 閱讀順序、Word 線性結構、Excel 表格順序從左到右、從上到下有邏輯） | 教師 |
| 感知特性 | 不僅依賴視覺或位置描述，應使用明確文本說明（如「圖1 銷售圖」 或 「見銷售增長 圖（圖1）」而不是「看右邊圖」 ） | 教師 |
| 視圖方向 | 內容在不同方向或顯示方式下仍可理解（不依賴固定版式/方向） | 兩者兼有（教師設計內容 + 工具/模板支持） |
| 識別輸入目的 | 表單或數據字段有清晰標籤（如Word 表單說明、 Excel 列名） | 老師 |
1.3.1 信息與關係Info and Relationships
□ HTML 使用正確語義標籤
□ 標題使用 <h1> - <h6>
□ 列表使用 <ul> <ol>
□ 表格使用 <th> <caption>
□ 表格關聯 header
□ 表單 label 正確綁定
□ Moodle 內容區塊結構清晰
□ ARIA landmark 正確使用
□ Moodle block 有語義角色
示例：
標題與結構 (H1-H6)
- 錯誤做法： 在 Moodle 的文本編輯器（Atto 或 TinyMCE）里，通過加粗、加大字號、改變顏色來製作「標題」。
- 正確做法： 選中文字，在下拉菜單中選擇 "Heading (large)" 或 "Heading (medium)"。
Moodle 技巧： Moodle 的課程名稱通常已經是
<h1>，所以課程內的章節標題應從<h2>或<h3>開始，形成嚴格的嵌套層級。
ImageSelectHeadingsInEditor
表格關聯 (th & caption)
- 例子： 一個展示學生平時成績的表格。
- 實現： * 使用
<caption>描述表格名稱（如：2026年春季期中成績單）。- 第一行表頭使用
<th>並加上scope="col"。 - 如果表格複雜，確保
id和headers屬性一一對應。
- 第一行表頭使用
表單 Label 綁定
- Moodle 場景： 在創建一個自定義問卷（Feedback）或數據庫活動時。
- 實現： 確保輸入框旁邊的文字不僅僅是「浮動文字」，而是用
<label for="id">標籤包裹，且for的值與輸入框的id嚴格一致。這樣盲人點擊文字時，焦點會自動進入輸入框。
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
大字：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
| 關鍵要素 | 重點 | 責任方 |
|---|---|---|
| 可讀 | 語言清晰，格式正確，縮寫定義明確。 | 老師 |
| 可預測的 | 一致的導航和功能。 | 開發者 |
| 輸入輔助 | 錯誤預防和識別。 | 兩者兼有（開發者構建它，教師使用它） |
簡而言之，開發者確保「房子」（Moodle）易於導航，而教師則確保「家具」（內容）擺放得易於理解。
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
下載此文件，並用瀏覽器打開
