鍵盤使用者能看清目前選中的網頁控制項嗎？

找出鍵盤使用者失去位置的地方

顧客按 Tab 從搜尋框移到篩選器，按 Enter 卻得不到預期結果。問題未必在按鍵本身：焦點可能已移到一個沒有可見焦點狀態的控制項。看得見畫面的鍵盤使用者需要知道下一個動作會落在哪個連結、按鈕或欄位。WCAG 2.2 的「焦點可見」屬 AA 等級，要求鍵盤焦點在某種操作模式下有可見指示。檢查應由顧客旅程開始，而非只看單張截圖：以 Tab 及 Shift+Tab 走完整頁，記下每個必須猜測焦點位置的地方。

焦點指示是狀態提示，並非替所有控制項加裝飾。它可以是瀏覽器原有外框、刻意設計的邊線或其他清晰變化，只要使用者能可靠地找出當前項目。只有滑鼠懸停樣式，無法幫助不用指標的人；在產品照片或深色區域幾乎看不出的色調變化亦不足夠。設計新的品牌樣式前，先看全站 CSS 重設有否把瀏覽器預設外框取消。恢復有效的預設樣式，往往是最快的修復；只有確實增加清晰度時，才進一步自訂。

焦點的顯示方式，與鍵盤焦點的先後次序要分開檢查。頁面可有可見外框卻有混亂的 Tab 次序，也可有合理次序卻完全沒有可見提示。兩者都值得測試，但本文集中處理當前目標如何顯示。彈出視窗可能需要指定焦點進入及限制範圍，而其關閉按鈕的可見焦點仍是另一項樣式要求。列出各頁模板共用的互動元件：連結、選單、有動作的卡片、篩選器、表格欄位、展開按鈕和結帳控制。修正共用元件，便可涵蓋多個頁面。

選擇在不同背景都清楚的樣式

W3C 說明，用來辨認控制項的焦點指示屬於「非文字對比」所涵蓋的視覺資訊。在該準則的例外情況以外，具意義的像素須與相鄰顏色達到至少 3:1 對比，屬 AA 等級。這與一般正文的文字對比是不同量度。應以實際相鄰像素測試指示：在白底清楚的外圈，遇上淺色照片可能消失。雙色外框或與元件隔開的實色外圈或有幫助，但仍須檢查真正畫面，不能只憑設計色票作保證。

WCAG 2.2 另有 AAA 等級的「焦點外觀」，對焦點指示的面積和狀態變化對比訂出更強要求；它與 AA 等級的「焦點可見」並非同一準則。團隊可以參考前者設計較穩健的樣式，尤其是細小圖示，但不應誤稱所有 AAA 細節都是 AA 必須。記錄專案檢查哪項準則及採用甚麼測試方法。這有助避免把幾乎看不出的單像素變化當成良好設計，或以錯誤準則否定有效的瀏覽器預設外框。

CSS 的 :focus-visible 選擇器可在瀏覽器判斷需要可見提示時顯示焦點，通常包括鍵盤導航，同時減少部分滑鼠操作後不必要的外圈。它是樣式工具，不能證明所有自訂元件都可用鍵盤操作。較舊或特殊環境要有清晰後備樣式，並測試程式設定焦點、文字欄位，以及由滑鼠轉回鍵盤的情況。切勿先全站移除外框，再只靠一個可能漏掉元件庫項目的選擇器。使用者仍須在某種模式下持續看見當前鍵盤目標。

確認焦點控制項確實看得見

即使外框鮮明，若固定頁首蓋住取得焦點的按鈕，仍無法幫助使用者。WCAG 2.2 的「焦點不被遮擋（最低要求）」同屬 AA，處理由網站內容把焦點控制項完全遮住的情況。檢查固定導覽列、cookie 提示、浮動聊天按鈕及展開式篩選器。接近畫面頂部及底部時慢慢按 Tab，不要假設自動捲動必定避開覆蓋物。控制項只露出一部分或可達到所述最低要求，實際仍可能難用；應按顧客任務判斷是否需要更多空間或捲動偏移。

放大及窄畫面會改變焦點外圈被裁掉的位置。自訂外框可能被設有 overflow hidden 的上層、卡片邊界或輪播視窗截去。桌面版有效的外圈，手機版按鈕換行後可能消失。要在常見響應式寬度和較高瀏覽器縮放下測試，包括表格錯誤訊息或較長的中文標籤令控制項變高的情況。指示應對準真正可啟動的元件；若焦點只在卡片內一個細連結，卻把整張卡片圈起來，顧客可能誤判可按範圍。

不要只靠焦點顏色暗示 Enter 或空白鍵會做甚麼；標籤及控制項語意仍然重要。若裝飾容器有外框，真正互動的子項卻沒有焦點，便會令人困惑。原生按鈕和連結通常有可預期的鍵盤行為；自訂可按的 div 必須先補上語意及事件處理，樣式才有意義。稽核時分別記錄元件能否取得鍵盤焦點、焦點是否可見、名稱是否說明動作，以及預期按鍵能否啟動。某一方面合格，不能彌補另一方面失敗。

以零售流程而非元件清單作測試

假設顧客用鍵盤尋找替換零件：輸入搜尋詞、移到篩選器、開啟產品、選擇款式，最後到訂單核對頁。設計團隊在白底輸入框用藍色外圈，但產品卡片是淡藍底，款式控制項又在照片上；同一外圈在這些背景變得難看清。團隊逐個實際狀態測試，採用能跨背景維持對比的焦點樣式，並確認停用款式不會看似可選。這項演練衡量顧客能否完成任務，而非單個元件在設計稿是否漂亮。

請測試者只用鍵盤開始，每次按鍵前說出自己認為焦點在哪個控制項。記錄首次不確定的位置、背景、縮放比例及有否開啟覆蓋層，再比較英文與繁體中文路徑；較長標籤可能換行，改變焦點外框形狀或位置。表格驗證出錯後也要重測，因新訊息可能把控制項推到固定頁首下面。可行時加入一位不熟悉頁面的測試者。熟知 DOM 次序的開發者，可能無意間以記憶補足畫面缺少的線索。

發現缺陷後，先修正共用元件並重走流程。若只有一張推廣卡片出問題，也要修復該卡片，並查核同一樣式是否出現在別處。訂立小型視覺驗收組合：文字連結、圖示按鈕、表格欄位、篩選標籤，以及接近固定元件的控制項；在淺色和深色背景都測試。自動檢查器不能判斷顧客能否舒適地在繁忙照片上追蹤微弱外圈，因此仍要人手用鍵盤測試。可用畫面截圖記錄已測狀態，但不要聲稱未測頁面亦已涵蓋。

網站更新後仍要保持焦點可見

把焦點樣式納入設計系統元件，並列入新增控制項的驗收條件。覆核者應一起查看懸停、焦點、停用和錯誤狀態，因日後改色可能只破壞其中一種。新的固定推廣橫幅或聊天面板，亦可遮住原本優良的指示；版面改動後要重走完整流程。持續維護的規則很具體：鍵盤使用者能說出目前目標、在畫面看見足夠部分，並在啟動前預測動作。任何一項觀察失敗，頁面都需要修復，無論滑鼠體驗看來多精緻。