共通設計理論教材 / Class LLL

圖像說明、動態替代與多通道

拿掉一種線索，仍能完成相同目的

讓同一原創路線的圖解、完整文字與手動靜態步驟傳達同一指示，改道時一起更新。替代文字依用途決定，停止位移仍要保留必要先後；不把靜態圖當所有影音的完整替代。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 10 分鐘

開啟互動教材查看參考來源

閱讀目標

依用途決定圖像說明
讓靜態替代保留必要先後
同步更新圖、文字及狀態並辨識邊界

適用條件與學習範圍

讀者不看圖、不依顏色或不看連續動作時，還能取得完成任務所需的相同資訊嗎？

理解文字重排與原生順序；知道資訊不能只靠位置或顏色傳遞。

能依圖像用途描述需要的替代資訊，關閉本例圖像後仍依完整文字走完三站，並用手動站點與完整靜態序列比較先後。

到館路線是原創有限示意，不是真實導航；本例不自動播放，也未製作含對白影片、字幕、逐字稿或口述影像。沒有讀屏實測或全站WCAG認證。

原理與判斷

一張路線圖能迅速呈現關係，但只說「一張藍色的圖」無法幫人找到服務台。若重要資訊只能從移動光點推知，關閉動畫也可能只剩沒有意義的底圖。替代資訊要回答原來的目的，不能只描述材質或配色。本例圖解、每站指示與目前站點共用資料；三站全文一直可讀。切到只讀文字，確認仍知道順序與行動；切完整靜態序列，則可同時回看各步，無需追逐自動播放。

先問圖拿來做什麼

WCAG1.1.1處理非文字內容的等價目的，並依控制、感官體驗、時間媒體與裝飾等用途列範圍。WAI Images Decision Tree是教學資源，提醒簡單有意義圖像、複雜資訊圖、功能圖片與冗餘裝飾需要不同處理；不能替每張圖貼同一段泛稱。本例路線圖有簡短可及名稱，說明三站與目前站點，完整指示放在相鄰有序文字。若圖改作「前往資料室」按鈕，其名稱應能說明動作；若只是沒有新資訊的裝飾，則應避免讓輔助科技重複讀一長段裝飾描述。

等價文字不是逐像素描摹

三站文字需要保留入口、途中位置、目的地與必要指示。它不必逐筆列出每個圓角、色碼或線寬，因為那些細節不是這輪到館任務的核心。點選「只讀完整文字」，圖像消失但三站與資訊按鈕都仍在。對照反例：第二站通道關閉後，若只寫「注意安全」卻保留舊路線，文字與圖仍無法支援改道。教具把第二站更新為側廊，圖的地點名、可及名稱、完整文字與目前步驟同步；同源資料有助維護，但仍需人工核對內容本身是否正確。

靜態替代保留先後與控制權

2.3.3是AAA級的互動動畫條件，非必要的互動觸發位移動畫可停用；Understanding另分自動開始的動態與使用者互動觸發。這不等於所有自然捲動都被禁止，也不能只設一個少動態偏好便宣稱所有動態問題已解決。本例從一開始就用原生按鈕手動逐站，沒有計時器、自動播放或平滑位移；完整靜態序列把三站都留在頁面。選第幾站只改當前標記與說明，完整有序文字不消失。在少動態與無WebGL情況仍可操作，資訊不依賴動畫才能出現。

不只靠顏色與方位猜

目前站點同時有編號、地點文字及邊框；完整指示說出入口、書架／側廊與服務台。1.4.1要求不能只用色彩作視覺傳訊，並不表示只要多加一種顏色就足夠。本頁沒有把顏色的主觀顯著性轉為可及性分數。改道時要讀實際地名與步驟，而不是只說「走亮色那條」。當圖片對任務確有二維空間價值，也應保留合理的圖像檢視，而非為了文字替代把必要圖一律刪除。

反例：路線圖不能代替所有影音

這份靜態序列只示範三個離散站點。若教材改成含語音講解與操作細節的影片，單列三張圖可能遺漏對白、聲音事件或連續動作的關鍵；需依媒體類型另查字幕、逐字稿及口述影像等條件。同樣地，可及名稱、DOM順序與鍵盤自動檢查不等於真人使用讀屏軟體已通過。此頁沒有合成假讀屏驗證，也沒有把局部操作結果當全站WCAG認證；回到成品要記錄實際平台與未測範圍。

步驟與觀察

先對照圖與完整文字
重設，在總覽圖解中找三站，再核對下方有序指示；說明哪些資訊是任務必要，哪些只作視覺提示。
只關閉圖像
選只讀完整文字，確認仍能說出三站順序、通道與目的地。不要用隱藏正文的方式假裝提供另一通道。
查看完整靜態序列並改道
切靜態序列，使用上一站／下一站手動選擇；再換通道關閉反例，檢查圖、名稱與文字同步。所有步驟仍可回看。
返回重排並保留方案
補讀文字放大教材後返回，保留呈現模式與站點；重載仍接續，單頁重設不影響另頁方案。

常見問題

替代文字只寫顏色與材質

先確認圖的用途，再提供任務所需的內容或控制動作；複雜資訊可用相鄰完整文字。

少動態模式只留下沒有說明的終點

保留必要先後與狀態，提供手動步驟或可回看的完整靜態序列，別把資訊跟動畫一起移除。

圖更新了，文字還是舊路線

讓所有呈現共用內容資料，改道後逐項核對；同源不能代替事實正確性檢查。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：跨工具的可讀版面、原生語義與等價資訊；有限原創到館路線，不提供軟體選單或全站符合性宣告。來源狀態：實讀WCAG2.2固定W3C Recommendation 2024-12-12的1.1.1、1.3.2、1.4.1、1.4.4、1.4.10、2.1.1、2.3.3與2.4.3；Understanding相應放大、重排、非文字與互動動畫的解說段落，另讀WAI Images Decision Tree。Understanding與教學資源屬非規範解說，並非額外強制條文。示意限制：重用QZ23原創雙座校樣架，普通HTML全文、語義標題／有序列表／原生按鈕；容器上限560或320px、18→36px真文字放大，圖解／文字／完整靜態序列與手動站點由同一原創路線資料驅動。讀數取實際DOM與computed style，不用縮放圖假裝重排。原生軟體實測：僅網站Chromium的原生HTML、鍵盤與觸控路徑及本地字型檢查；沒有NVDA／VoiceOver或其他讀屏軟體、原生設計軟體、多瀏覽器全站稽核。學習成效驗證：沒有真人可用性、閱讀速度、眼動、醫療或學習成效實驗；單一範例通過不等於全站WCAG認證。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。