共通設計理論教材 / Class LLL

文字放大、重排與閱讀順序

放大之後，內容與操作仍要接得起來

把真HTML正文從18放大到36px，再分開縮窄容器，檢查原文、功能與原生順序是否仍完整。分清設計稿視覺、程式可判定結構與焦點路徑；200%文字示範不是整站符合性測試。

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

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

閱讀目標

分開比較文字大小與容器寬度
保留完整原文與必要功能
區分內容順序、焦點順序與視覺配置

適用條件與學習範圍

把字放大、把畫面縮窄後，讀者還能讀到全部內容，並依有意義的順序操作嗎？

能分清行高與段落間隔；理解文字可以有語義標題及有序列表。

能固定原文只改字級或容器，說明重排與單純放大圖片的差別，並實際用Tab、Enter走到範例資訊按鈕。

只檢查本頁原創路線樣本的有限HTML行為；不把320px容器演示當全頁400%縮放驗收，也沒有宣稱讀屏試用、所有輔助科技支援或全站符合WCAG。

原理與判斷

字在設計稿上看起來清楚，不代表成品放大後仍可閱讀。若固定高度把後半句切掉，或縮窄時移走必要按鈕，讀者會失去資訊；把整張文字圖片放大，也不會得到同樣的原生文字重排。本例把到館說明當普通HTML，字級、容器、圖文模式分開控制。先固定原文只改一項，直接觀察斷行與內容高度；再用鍵盤依序操作。這些是可檢查的結果，不是閱讀速度或學習成效分數。

200%文字與窄寬，是兩個條件

WCAG2.2的1.4.4是AA級文字放大條件，要求適用文字可達200%且不失內容或功能，並列字幕與文字影像等範圍例外。教具的100%→200%把正文18px改36px，標題及樣本按鈕也隨文字尺度變大；沒有用transform放大一張紙。先只改文字，還原後只改容器。這兩項都可能增加文章高度，卻有不同原因。教具的設定是局部示範，並不取代瀏覽器整頁縮放與真實內容的檢查。

重排保住內容，不是縮成一張小圖

1.4.10是另一項AA級條件；橫排連續內容以等效320CSSpx寬檢查資訊、功能與雙向捲動，對確需二維配置的部分有例外。規範註解以1280px視口放到400%說明等效寬，不能把200%文字與400%整頁縮放混為一談。本例「320px」是容器上限，手機可用空間更窄時會繼續貼合。完整說明與按鈕留在同一條垂直內容流，沒有因行數增加而省略；本地讀數顯示實際寬高。真地圖或資料表需另判斷二維用途，不能讓一般說明借例外維持超寬。

視覺排序、閱讀結構與Tab路徑

當內容先後影響意思，1.3.2要求正確順序可由程式判定；2.4.3則處理循序導覽的焦點順序。兩者相關但不相等：Tab走可操作元件，並不把每一個段落當按鈕；靜態文字透過標題、列表與文件結構閱讀。範例保留標題、說明、三站有序文字、逐站操作、資訊按鈕的原生DOM順序，沒有用CSS order或正數tabindex把它們重新排列。用Tab從上一站／下一站走到開放資訊，再到求助方式；用Enter或空白啟用，確認結果仍在範例下方。這不是模擬讀屏聲音或讀屏軟體通過證書。

反例：更窄、放大與改道

將文字放大200%後再選窄容器，行數與高度都會變多。只要原文與功能仍可讀可用，多行本身不是錯誤；若只把畫面變矮、裁掉最後一站來省空間，便已改變任務所需資訊。接著切「通道關閉」。原本第二站書架改為側廊，讀者的目的是避開關閉路段；這時只保留漂亮舊圖就不夠。沿多通道教材核對圖與完整指示的同步，而非把版面重排當內容已正確。

一個樣本不代表整站認證

Understanding文件是W3C的非規範解說；它們幫助理解條件與取捨，不是每一項技術都強制採用。此頁從選定條件示範檢查方法，未驗全部成功準則、全站頁面或完整流程。回到真成品時，要查實際內容、瀏覽器、視口、文字縮放及輔助科技的使用條件，並補真實使用者觀察。品牌字體和玻璃視覺可以保留，但必要文字、焦點與操作不能只靠視覺稿保證。

步驟與觀察

建立同一原文基準
重設，確認寬容器上限560px、100%文字與三站完整指示。標題與本文是可選取HTML。
只放大文字，再只縮窄
改200%，看computed正文36px與高度；還原後改320px上限。不要同時改兩項便把結果全歸因給字體。
組合條件並用鍵盤完成操作
窄容器加200%時，讀到最後一站。依Tab順序到資訊按鈕，用Enter查開放資訊，再到求助方式；原文不需每段硬加Tab。
補讀多通道，返回保留
沿關係閱讀圖解與文字替代。返回／重載接續本頁方案；重設只改本頁，不清除另一教材的路線選擇。

常見問題

把文字圖片放大當原生重排

使用可選取原文，觀察真正字級與斷行。圖的尺寸改變不能替代文字、語義與功能。

用CSS交換欄位但忽略內容順序

核對原生文件順序與實際Tab路徑；視覺排列看似合理，不保證循序操作接得起來。

200%或320px樣本通過就宣稱整站認證

明列本次樣本、條件與未驗範圍；局部演示與全站完整流程驗收分開。

適用範圍與證據

原教材查核日期：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認證。

參考來源

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