手機版不是把桌面版縮小：閱讀順序比欄數重要

桌面上，標題、說明與示意圖可以並排看。換到手機後，它們卻得回答一個更具體的問題：讀者先看見哪一段，才知道下一段在說什麼？

只把三欄改成一欄，沒有回答這件事。如果關鍵限制排在很遠的地方，行動連結先於必要說明出現，或示意圖佔滿第一個畫面，內容雖然都還在，讀者仍可能失去理解的線索。

我會先把內容當成一條可以往下讀的路徑，再決定寬螢幕上哪些部分值得並排。以下以本站在 2026 年 10 月 24 日的服務、筆記與產品頁面結構為例，談的是順序與實作取捨，不是手機視覺已經驗收完成的宣告。

先把單欄內容讀通，再安排桌面位置

本站每張服務卡片先放服務名稱與說明，再放涵蓋項目及補充限制，最後才是介面示意。中等寬度時，文字群組與示意圖排成兩欄；更寬時，文字群組透過 display: contents 參與外層網格，形成三欄。

這裡沒有另外複製一張手機卡片。欄數改變時，仍是同一組標題、說明與範圍資料。對窄螢幕來說，讀者先理解這項服務處理什麼，再讀到涵蓋範圍，最後看示意；不是把桌面畫面照比例縮小。

這也提供一種內容檢查方式：暫時不想左右位置，只看標題、段落與清單的先後，能不能知道這個區塊要說什麼。若必須靠「右邊那張圖」才能理解限制，換成單欄時就需要更明確的文字關係。

不過，先以單欄整理是我的設計起點，不是每個網站都只能採用同一種閱讀順序。新聞、比較表或工作流程可能有不同的依賴，要看內容本身。

DOM 順序、視覺位置與焦點順序要分開看

CSS 可以把元素放到不同的網格位置，也能用 order 改變排列。但畫面上移到前面，不代表文件本身的先後和鍵盤導覽也跟著變了。

W3C 對 Meaningful Sequence 的要求，是當順序會影響意思時，必須能以程式判定一個正確的閱讀順序。它也明確保留多種合理順序的可能，不要求所有內容只有唯一排法。[1]

因此，兩張互不依賴的文章卡片換位置，和把必要說明搬到送出按鈕後面，是不同的問題。前者可能仍然讀得通，後者則需要檢查操作前是否已經得到必要資訊，不能只憑畫面好看就判斷。

鍵盤又是另一條需要走過的路。W3C 的 Focus Order 關心焦點順序是否保留意思與可操作性，不是要求每個可聚焦元素都機械式地按視覺座標排序。[2] 如果視覺上由左往右，按 Tab 卻反覆跨過尚未理解的區塊，就值得回頭檢查布局與文件結構。

我不會為了讓桌面錯置的內容看起來正常，就先加一串正值 tabindex 補救。應先確認內容依賴、原生連結與控制的順序，再處理真正需要的排版。

同一組卡片，也要容得下不同長度的內容

本站筆記的一般列表，在較窄的寬度採單欄，達到設定斷點後變成兩欄；兩種排列都使用同一份文章資料與卡片元件。

這只能說明資料與渲染入口共用，不能證明每個標題長度都剛好。短標題、兩行摘要排得整齊，不代表換成較長的英文或日文，連結就仍在容易找到的位置。

檢查時，我會挑一張標題較長、摘要也不短的卡片，沿著分類、標題、摘要與閱讀連結看下去。先確認資訊完整，再看間距、換行與卡片之間的節奏；不要先固定高度，把難排的內容裁掉。

精選卡片則另有桌面網格定位，不能拿一般列表的自然排列，推論全站都沒有重排。響應式檢查要說清楚是哪一種卡片、哪一層容器，而不是只記一個「手機版正常」。

示意圖不一定要一直佔著相同的位置

本站產品頁的功能說明區，先放標題、說明與條列，再放介面示意；寬螢幕時兩者並排。示意區設為 aria-hidden="true"，可理解的功能說明仍由前面的文字提供。

產品頁開頭採取另一種安排：在窄螢幕的特定斷點，示意區變成絕對定位，降低不透明度後放在文字後方。這表示同一頁也不只有「全部依序往下堆」一種策略。

兩者的共同判準，是讀者不應為了看懂一句說明，被迫先辨認一張縮得很小的介面。裝飾可以退到背景；如果圖裡真的包含文字沒有交代的重要資訊，就不能只隱藏或淡化，還要提供可理解的替代內容。

服務卡片的示意同樣是裝飾性結構，不是可以操作的產品畫面。它們的位置和比例可以因版面調整，但不能讓讀者誤以為必須點那張示意圖，才能完成合作或閱讀。

用一段完整閱讀，代替只檢查幾個斷點

我會從一個區塊的開頭讀到行動入口：先知道這是什麼，理解與自己相關的範圍，讀到必要限制，最後知道可以做什麼。這比只確認欄位在某個寬度有沒有掉下去，更容易找出內容本身的斷裂。

確認時還要切換檢查方式。視覺上看過一次，再沿鍵盤走到連結；需要時另查可及性樹與輔助科技的閱讀。多語頁面也要放進真實文案，不用同一組短佔位文字代表所有版本。

長文章的程式碼、表格與圖片有自己的重排問題；這篇先處理區塊之間的閱讀依賴。兩者都需要真實內容，但不能用一次列表檢查，順便宣稱整個文章版型都已驗收。

本文整理的是目前結構與我採用的檢查方法，沒有全裝置、完整鍵盤或輔助科技的通過紀錄，也不是 WCAG 合規認證。手機版最後仍要讓人實際讀過；如果拿掉左右並排就不知道內容在說什麼，應先回頭修順序，再微調欄寬。

Sources

[1] https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html — W3C — Understanding SC 1.3.2 Meaningful Sequence [2] https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html — W3C — Understanding SC 2.4.3 Focus Order