先找出重複路徑,再選擇控制

顧客連續打開多個產品頁面時,不應每次都要按鍵盤 Tab 鍵經過相同的頁首連結、搜尋欄、分類選單和推廣橫幅,才到達產品資訊。W3C 的 WCAG 2.2 成功準則 2.4.1 要求提供方法略過跨頁重複的內容區塊,但沒有指定唯一視覺設計,也不是要求每個重複詞語都加上略過連結。商戶應先找出自己網站範本中真正重複的區塊,再提供可用的通道。頁面開頭通往主要內容的連結是常見做法。地標和標題有助部分輔助科技用戶辨識區域,但不能自動證明看着螢幕、只用鍵盤的顧客有一條快捷而可見的路徑。

列出顧客實際會到達的頁面範本:首頁、分類頁、產品頁、搜尋結果、帳戶和結帳頁。從瀏覽器第一個可聚焦位置開始,記下到達各頁主要任務前會經過哪些控制。這個數目只是網站本身的觀察,不是 WCAG 規定的門檻;它可指出頁首或篩選欄是否令顧客每次都花很多按鍵。亦要查看手機版,因為展開的選單或同意提示可能改變焦點次序。還要留意重複區塊在主導覽前還是後;如果連結只略過選單,卻落在另一段重複推廣內容中,幫助有限。真正目標是到達該頁獨有內容或任務的起點。

讓目的地真實可達、清晰可見

W3C 的 G1 技術說明,在頁面開頭設置直接通往主要內容起點的連結。它要位於足夠早的焦點次序,讓鍵盤用戶毋須先經過整段重複導覽就能找到。連結文字應以該頁語言清楚說明用途,例如直接前往主要內容。它可以一直顯示,也可以在取得焦點時出現;但看着螢幕的鍵盤用戶考慮是否啟用時,必須看得見。目的地需要穩定的識別標記,而且應放在該頁獨有內容真正開始的位置。如果目標不存在、重複使用同一識別,或被固定頁首遮住,連結就只是裝飾。

使用有語義的頁面結構,讓輔助科技也能理解目的地。主要內容區域應包含該頁核心資訊,而非重複的網站頁首;起點亦應以有意義的標題或任務名稱協助定位。W3C 把略過重複區塊與維持合理焦點次序視為相關但不同的準則。若按連結後只是畫面捲動,下一次按 Tab 卻返回頁首或跳到難以預測的位置,用戶仍會困惑。測試時要看啟用連結後鍵盤焦點去了哪裏,而不只是看瀏覽器有否捲動畫面。視乎實作,目標可能需要容許程式設定焦點;但不要把無需操作的靜態文字變成多餘的固定 Tab 停靠點。理想結果是用戶在目的地能自然繼續下一步。

從新載入頁面開始用鍵盤測試

打開一個有代表性的頁面,重新載入,把滑鼠放到一旁,再按 Tab。略過連結應在重複導覽之前出現,而且焦點樣式在實際背景上清晰可見,不會被固定橫幅蓋住。按 Enter 啟用後,檢查畫面位置、適用時的程式焦點、下一次按 Tab 會到哪裏,以及屏幕閱讀器讀出甚麼頁面標題。再打開同一範本的第二頁重測;只在首頁可用,無法解決跨頁重複的問題。放大畫面和縮窄視窗後也要重試,因為響應式排版可能移動導覽位置,或改變固定頁首的遮擋範圍。記錄頁面、瀏覽器、視窗狀態和實際觀察,不要只寫籠統的「通過」。

測試不能只停留在那條連結。目錄頁即使略過全站頁首,產品結果前仍可能有一大段篩選控制。W3C 的略過區塊說明以篩選欄在結果前為例:當它也成為重複障礙時,直接前往結果的途徑可能有用。正確目的地取決於頁面用途。想調整條件的顧客需要篩選功能;連續翻看結果頁的顧客可能希望直接看產品。若頁面結構確有需要,可以分別提供清楚標示的通道,不要只放一條意思含糊的跳轉。兩條路都要用鍵盤及輔助科技測試,文字亦要清楚區分;通往主要內容的第一條路則應在各範本保持可預測。

一個產品頁面檢查例子

假設本地商店的產品頁共用一個頁首,內含帳戶連結、搜尋、數個分類連結及季度推廣。只用鍵盤的顧客從搜尋結果打開三件產品,比較規格。每頁第一個 Tab 都到達可見的「前往主要內容」連結;啟用後,用戶來到產品名稱,下一個可操作控制亦按合理產品流程出現。測試人員要在兩件不同產品上確認,而不是只試一頁。然而在手機排版,固定推廣欄遮住跳轉後的產品名稱。團隊因此調整捲動定位或版面並重測,而非因網址片段改變就宣稱成功。這是示範測試方法的假設例子,並非對實際客戶網站的觀察。

商店還檢查一個帳戶頁,主要內容上方有臨時訊息。團隊須判斷訊息屬於完成帳戶任務所需的內容,還是可略過的重複橫幅;關鍵是略過後會否令用戶錯過必須知道的操作資訊。與當前行動有關的警告,不應無聲無息地消失。團隊同時審視英文及繁體中文標籤,因為連結文字和標題應以該頁語言幫助讀者定位。發佈記錄列明目的地識別、涵蓋的頁面範本和回歸測試。完成後,用戶可省卻重複按鍵,而選擇使用導覽的人仍可正常存取。

頁面範本變動後仍要保持通道可用

全站頁首改版,可能悄悄破壞原本良好的略過通道。新的同意面板、活動橫幅、頁內分頁,以及不重新載入的客戶端跳頁,都可能改變第一個焦點位置,或令跳轉後的目標消失。共享版面一有改動,就應把略過通道列入驗收。檢查實際呈現的頁面,而不只測試孤立組件;重要範本各取一頁,並涵蓋網站兩種語言。若客戶端跳頁沒有完整重新載入,也要查看用戶如何得知已到新頁及焦點從哪裏開始;這是更廣的導覽問題,單靠略過連結不能解決。共享範本負責人應承擔回歸檢查,並留下簡短而真實的鍵盤操作記錄。

測試失敗時,先準確描述失效方式,再選擇修正方法。若頭幾個焦點位置都找不到連結,要檢查文件次序及有否其他浮層先奪走焦點。若連結存在但看不見,就在實際放大比例和兩種語言版面檢查焦點樣式。若啟用後畫面正確捲動,下次按 Tab 卻返回導覽,則要檢查目標的焦點行為和後續控制。若目的地正確但被固定頁首遮住,就調整版面或捲動定位,並在窄螢幕重測。這些是不同缺陷,不能用同一修補一概處理。有效的工作單應列出頁面範本、從重新載入開始的步驟、預期目的地、實際焦點位置,以及簡短的鍵盤操作記錄或觀察。這令修正結果可供複核,也不會假稱自動審核已替真人測完操作路徑。

亦要決定由誰接受測試結果,因為單憑連結截圖證據薄弱。頁面負責人應確認通道到達承諾的內容;鍵盤測試者應確認焦點可見及下一步可操作;熟悉網站語言的人應檢查兩種標籤對讀者是否自然。可用精簡驗收記錄保存頁面網址、範本、語言、第一個焦點位置、啟用後目的地、下一次 Tab 位置,以及當時有否浮層。這份記錄亦可供日後改版重測,但不能因此聲稱已涵蓋所有裝置及輔助科技組合。若某頁結構特殊,例如全螢幕結帳步驟,就要記錄目的地選擇的理由,並直接測試該步驟。保持一致有幫助,但最終目的地仍須符合顧客打開那一頁時要完成的任務。

決策檢查

  • 略過通道是否在重複導覽之前出現,取得焦點時是否清晰可見?
  • 啟用後,畫面、焦點及下一次 Tab 是否進入真正的頁面任務?
  • 有否跨範本、語言、放大畫面及手機排版測試?
  • 版面改動時會否重新進行鍵盤回歸測試?

資料來源及延伸閱讀