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)
□ 實時直播課程提供 實時字幕
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
文檔內容合規
必須確保：
□ 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
下載此文件，並用瀏覽器打開
