產品目錄放大後，顧客還能揀貨及查詢嗎？

先定義顧客要完成甚麼

假設公司供應餐飲用具，採購人員要先找款式，再核對容量、物料及每箱件數，最後加入查詢清單。測試就應沿着這條路走，而不是只看首頁有沒有走位。請銷售同事挑出最容易混淆的兩款貨品，列明哪些資料會影響選擇。即使放大後的卡片排列很整齊，只要包裝單位被截去，這次修改仍未解決實際問題。

小額改善可以先集中處理現有目錄範本，但不能只抽一款名稱很短的產品。準備較長的中文品名、英文描述、連續型號字串，以及已選篩選條件、找不到結果和有下一頁的畫面。兩種語言各自挑選具代表性的資料；中文混用英文型號時尤其值得留意。以下例子及驗收做法均屬建議，並非某客戶的實測紀錄，也不代表修改後會增加多少訂單。

量度可用寬度，再走完整個流程

W3C 對 WCAG 2.2「內容重排」的說明，以 320 CSS 像素寬作為直向捲動內容的參考：資料與功能須保留，只有確實需要二維排列的部分可獲例外。瀏覽器內容區原為 1280 CSS 像素寬，放大至 400% 就是等效例子。不要把顯示器解像度當成內容區寬度。本篇只借用這項技術準則安排目錄驗收，通過並不等於整個網站已符合所有無障礙要求。

1. 準備可重現的測試資料

   記下網址、語言、產品編號及篩選設定，修改後沿用同一批資料覆測。

2. 設定並記錄畫面條件

   先檢查 320 CSS 像素寬的畫面，再用桌面瀏覽器放大至等效寬度重試。記錄瀏覽器、縮放比例和有效寬高；若中途切換版面，也檢查該縮放比例。

3. 實際選貨及操作

   搜尋、套用及移除篩選、開啟產品、返回列表，再操作分頁。另用鍵盤走一次，檢查焦點、已展開選單及查詢按鈕是否看得見、用得到。

4. 換語言重新測試

   換上另一語言的長內容，重新完成任務，包括空白結果及已選條件標籤。保存出錯時的狀態，不要只截取首次載入的畫面。

修改版面時，先保留選貨資料

一般產品卡片可先試改成單欄，讓名稱及規格按內容增加高度。請開發人員先查固定寬度、最小寬度和文字區高度，未必需要重建目錄。側欄若佔去太多位置，可考慮改為可展開的篩選區，但報價必須包括展開、套用、清除和關閉等狀態。直接隱藏篩選，或刪短品名來遷就版面，都可能令顧客失去判斷所需的資料；型號末尾幾個字往往正是款式差異。

以上是版面方案示例，並非實測改善成效；應按現有元件及選貨任務決定做法。

表格有例外，不代表整頁有例外

若買家需要逐欄比較閥門的接口尺寸及物料，保留規格表可能比拆成卡片更合適。W3C 的例外適用於有必要維持二維關係的表格，不會自動延伸至標題、搜尋或分頁；一般儲存格內容仍須重排。可把橫向捲動限制在表格區內，外圍控制項則配合頁面寬度排列。驗收時用鍵盤進入該區，捲動後再確認讀者仍能辨認數值屬於哪一款產品、哪一項規格。

另一做法是每款貨品各列一份規格清單，適合逐件查閱，代價是頁面變長，跨款比較也較費力。先請銷售同事判斷客戶如何選貨，再決定是否值得改。產品卡片恰好排成幾欄，並不足以證明它需要表格例外。修改單應寫清楚必須保留哪種行列關係、哪些內容可移到表格外，以及顧客如何使用其餘操作功能。

把卡住的步驟寫成可驗收的修改單

預算有限時，先處理看不到款式差異、用不到篩選或無法前往下一頁等問題，再調整純粹不整齊的間距。每項修改附上語言、網址、貨品、畫面寬高、縮放比例、已選條件、重現步驟、預期結果及實際問題。請開發人員分開估算產品卡片、篩選與分頁元件的工作量。共用元件修好後，仍要抽查另一個產品分類，不能假設所有範本都沿用同一套樣式。

下一步可由目錄負責人選一個有代表性的分類，跟開發人員一起走完中英文選貨流程，把問題表直接用作驗收依據。修改後重試原本失敗的狀態，也查看中間寬度和正常桌面版，避免只顧最窄畫面而弄壞其他排列。若要延伸檢查其他雙語任務，可參考下方指南；若簡單調整仍無法完成選貨，就以這份問題表界定需要設計支援的元件範圍。