題幹與適用場景
設計系統要統一按鈕、輸入框、選單與自訂控制項的鍵盤焦點樣式。現有實作只改變邊框顏色，低對比主題幾乎不可見，focus 時改變尺寸又造成布局跳動。 請依 WCAG 2.2 Focus Appearance 設計可複用方案並建立驗收門禁。
WCAG 2.2 新增 Focus Appearance 成功標準，要求焦點指示器有足夠面積並與相鄰顏色保持對比。題目考察如何落到元件狀態、CSS、色彩 token、鍵盤路徑和測試。
面試官考察點
區分焦點指示器和元件本身、計算面積與對比、避免只用顏色、處理圓角和非矩形控制項、避免位移、保留原生語義，並覆蓋 :focus-visible、高對比和不同輸入方式。
回答前需要澄清的問題
- 目標是 AA 還是 AAA，哪些流程可由鍵盤操作？
- 焦點環在元件外、內，還是使用
outline-offset？ - 主題 token 與 forced-colors 模式如何提供？
- 自訂控制項是否具備正確原生語義與 ARIA 狀態？
- focus、hover、selected、error 疊加時如何保持可辨識？
- 如何測試非矩形、滾動容器和深色背景？
30 秒回答框架
「先確認標準等級與可操作元素，為每個 focus-visible 狀態提供不依賴顏色的焦點環。使用不佔布局的 outline 或 pseudo-element，用 token 保持與元件和相鄰背景對比；forced-colors 保留系統顏色。用完整鍵盤路徑、截圖像素與人工放大驗證。」
分步驟深入解答
第一步：明確焦點目標與狀態模型
優先使用原生 button、input、select 與連結；自訂 div 只有必要時才補鍵盤處理、role、名稱和值。focus-visible 可區分指標和鍵盤，但不能讓鍵盤焦點消失。 定義 default、hover、focus-visible、selected、invalid、disabled 的優先順序，確保焦點環在錯誤或選取時仍可見。
第二步：選擇不改變布局的繪製方式
不要增加 border 寬度製造焦點，避免盒尺寸改變。優先 outline、offset 或 pseudo-element；複雜形狀用內外陰影但要檢查 overflow 裁切。
.control:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}圓角、圖示按鈕和 slider 要按實際幾何評估，不可只畫被裁切的一條矩形線。
第三步：把 WCAG 2.4.13 轉成 token 與閾值
為環寬、偏移、焦點色、背景色和 error 狀態建立 token。驗證指示器和未聚焦元件、鄰接背景的對比，不只比較文字。漸層、圖片和半透明層需採最不利背景採樣。
focus-ring-width >= 2 CSS px
focus-ring-contrast-against-adjacent >= required threshold
focus-ring-area >= minimum perimeter-area rule面積與對比應依實際渲染像素和元件幾何驗證，不能以設計稿色值代替。
第四步：處理主題、forced-colors 與系統覆蓋
深色、淺色和品牌主題各有焦點 token。forced-colors: active 時不要覆蓋系統焦點色，可使用 ButtonText 等系統色保持可見。
@media (forced-colors: active) {
.control:focus-visible {
outline: 2px solid ButtonText;
outline-offset: 2px;
}
}不要用 outline: none 清除瀏覽器焦點，除非同一狀態提供等價或更清晰指示器。
第五步：覆蓋動態元件與滾動場景
選單、對話框、combobox 和虛擬列表要驗證焦點移動、關閉回到觸發元素、滾動不遮焦點環。transform、clip-path 和 overflow 不應把環裁掉。 使用 aria-activedescendant 時，視覺指示器要跟隨活動項，並與讀屏和鍵盤一致。
第六步：建立自動化和人工驗收
自動化檢查可聚焦元素、計算後 outline/box-shadow、主題 token 和 forced-colors 規則；截圖覆蓋狀態與背景。人工用 Tab、Shift+Tab、Enter、Space、方向鍵、Escape， 放大 200% 並開啟高對比模式複驗。
記錄元件、狀態、背景、環幾何、對比結果、鍵盤步驟和截圖。設計稿看到一條藍線不能證明符合標準。
高品質示範回答
「我先盤點可操作元素並優先原生控制項；對 focus-visible 用不佔布局的 outline 與 offset，token 統一環寬、顏色和背景對比。focus 不增加 border，也不只依賴顏色。深淺主題與 forced-colors 分開驗收並保留系統可見性。」
「選單、對話框、虛擬列表和非矩形控制項要測焦點移動、回焦與裁切。自動化取計算樣式與截圖，人工用鍵盤、200% 縮放和高對比模式驗證。」
常見錯誤
- 只改文字或邊框顏色 → 焦點環可能融入背景 → 分別驗證環與相鄰顏色。
- 增加 border 寬度 → 布局跳動 → 使用 outline 或不佔布局元素。
- 強制
outline: none→ 鍵盤失去回饋 → 提供等價可見指示器。 - 只測淺色主題 → 深色或 forced-colors 不可見 → 覆蓋主題模式。
- 只測矩形截圖 → 圓角和裁切漏測 → 測實際幾何與滾動。
- 焦點放在 div → 語義與讀屏不一致 → 優先原生控制項。
追問及應對
追問一：outline 和 box-shadow 哪個較好？
沒有唯一答案。outline 不佔布局且有系統語義，box-shadow 可做多層環；依裁切、圓角、forced-colors 與像素結果選擇。
追問二：為何 :focus-visible 不能取代 :focus？
它是瀏覽器顯示焦點的啟發式，不能消除焦點語義。鍵盤和輔助技術路徑仍需清晰指示器。
追問三：已有 error 紅框還需要焦點環嗎？
需要。錯誤狀態與目前操作目標不同，兩者都要可見且不只依賴顏色。
追問四：圖片或漸層背景如何測對比？
在環實際像素覆蓋的鄰近區域取最不利顏色，必要時加不透明底層或雙層環；平均色值不足以證明合規。
追問五：如何避免 focus ring 被 overflow 裁切？
檢查祖先 overflow、clip-path、transform；用內環、padding 或 pseudo-element 調整幾何，不能關閉焦點樣式。