要求是頁面能承受讀者的設定

網站可選擇合適的預設字體排版,但讀者可能需要拉開行距或字距才能舒服閱讀。WCAG 2.2 的 1.4.12 準則關注的是:在以標記語言製作的內容中,讀者覆蓋原有文字間距後會發生甚麼事。它沒有規定網站預設必須採用測試數值,也沒有要求網站自行製作間距開關。作者要確保套用指定間距後,內容和功能仍然可見可用。因此只看原版設計截圖並不足夠;必須知道顧客調整後能否讀送貨條款、選款式和按最後操作鍵。

W3C 的測試數值是行高至少為字體大小的 1.5 倍、段後間距至少 2 倍、字距至少 0.12 倍,以及詞距至少 0.16 倍;測試時同時套用,其他樣式屬性保持不變。這些是驗證條件,不是聲稱每位讀者都偏好這組設定。如果測試時又改字體大小或視窗寬度,便混入了另一項變因,可能看不出真正的間距缺陷。請記錄所用設定和瀏覽器,讓開發人員能重現問題。

準則承認不同語言或文字系統未必使用所有間距屬性,雙語香港網站尤其要留意。英文詞語通常以空格分隔;中文一般不以同一方式在詞與詞之間加空格,因此詞距覆蓋對中文可能影響較少。但不能因此宣稱整個中文頁面不用測試。行高、段後間距及字距仍會改變版面;中文標點、夾雜英文產品名稱、價錢和中英混合標籤都可能令容器擠壓。驗收標準是重要內容與控制項有否消失,而不是頁面是否仍像設計師原本想像。

先找出文字承載決策的位置

先有目的地挑選少量頁面:商品卡、詳情頁、附有說明及錯誤提示的表格、結帳摘要,以及確認訊息;若業務沒有其中某頁,便選其實際等價步驟。頁首、導覽列、固定工具列、對話框和手機選單也要納入,因為短標籤經常被塞進固定尺寸容器。測試前換上真實而較長的英文、繁體中文內容。動態資料要試短值和長值,例如商品名稱、地址或訂單狀態;整齊的靜態範本不能證明資料載入後的版面安全。

可依 W3C 的 C36 測試程序,以工具或使用者樣式表,在瀏覽器正常縮放下套用四項指定數值,再於不同響應式版面檢視。不要只找明顯的橫向溢出:價錢附帶條件可能被裁切但外框沒變,錯誤說明可能壓在按鈕上,表格表面仍似完整。需要時用鍵盤與觸控實際操作。若顧客找不到控制項或看不清其用途,即使文字仍存在於文件中,功能也已受損。紀錄要指出具體元件和狀態,不只給整頁一個通過或失敗標記。

省略號不能一概視為失敗,也不能一概當作補救。W3C 說明,若完整內容可透過可用方式取得,例如聚焦、啟動後顯示,或在連結目的頁讀到,截短標籤仍可能符合要求;若間距改變後才出現省略號,重要字句又無處可見,就代表資訊流失。控制項還要檢查可供輔助科技讀取的名稱及畫面上下文,能否清楚交代操作。「前往付款」變成不明確的「繼續…」,在多步驟流程可能令顧客猶豫;應按實際決策需要判斷。

互動後才出現的內容也要測試:送貨條件可能藏在展開區,表格錯誤可能只在無效提交後顯示。應先套用間距覆蓋,再打開這些狀態,整個操作過程都保持設定。若只有關閉測試工具後文字才完整顯示,顧客其實仍不能使用。把具體狀態保存成可重現例子,日後版面改動便可在同一決策點回歸檢查。

修正容器後重測狀態

W3C 的 F104 失敗範例指出,不能伸展的文字容器常造成裁切和重疊。應檢查固定高度、隱藏溢出、絕對定位,以及只按某一句文字大小繪製的外框。可行時讓卡片或列隨文字增高,容許合理換行,並為標籤和錯誤訊息預留空間。窄畫面下,固定在畫面邊緣的面板可能要回到一般文件排列。不要靠刪去重要字眼、法律或商業條件來「通過」測試;修正後仍須保留顧客作決定所需的意思。

例如自取方式卡片設有固定高度。英文第一行寫可自取,較小的第二行說明可取貨時段。讀者加大行距及段距後,第二行被卡片邊界遮住,顧客可能在不知道時間條件下作選擇。較有用的修正是讓卡片高度隨內容伸展,並讓選項控制項按清晰次序接在說明之後。重新套用間距數值,再試中文版本及較長的自取地點名稱,確認條件在選擇前完整可見,而且仍可成功選取。

程式修改後,要在同一組間距設定下重測,記錄問題是消失、轉移,還是顯露另一個固定容器。若網站另有放大及重排驗收,也要分開進行;兩者與文字間距相關,卻不能互相取代。可保存一組真實的中英長文字及錯誤狀態作回歸樣本。日後編輯增加送貨條件、開發者改變按鈕樣式時,團隊就有可供檢視的實際頁面狀態。放行應取決於資訊是否可見可用,而不是新截圖與原設計有多相似。

可按文字消失後的後果排序:裝飾圖片說明被遮住或許令人不便;送貨限制、付款標籤或表格錯誤指示被截,則可能改變決定或阻止顧客完成。問題紀錄應包含原文字句、語言、視窗大小、套用的間距數值,以及哪部分變得不可見,再交給控制尺寸和溢出的元件負責人處理。若同一卡片樣式用於大量頁面,應先修共用樣式,再以不同長度的真實內容抽查,不能以一頁成功就宣稱全站安全。

驗收描述可以不用截圖,例如:「在正常縮放下套用 WCAG 四項間距覆蓋後,顧客選擇送貨方式之前,可完整閱讀時間條件,單選控制項可操作,中文版本亦一樣。」這清楚交代顧客結果與測試條件,也提醒日後編輯不要把重要限制硬塞進單行標籤。若現有設計容不下文字,應調整元件層級或把說明移到可伸展的一整行,再重新測試;不要只靠滑鼠懸停提示補救,觸控顧客未必能顯示它。

決策檢查

  • 在正常縮放下同時套用所有適用的四項間距數值。
  • 已檢查真實中英文長文字及錯誤狀態。
  • 決策文字與控制項沒有被裁切、遮擋或變得無法操作。
  • 任何省略內容均有可用方式查看全文。

資料來源及延伸閱讀