輔助功能 視覺化焦點
為什麼
視覺化焦點對於所有依賴鍵盤和開關裝置的使用者都至關重要。
什麼
在談論 連結狀態 時，您已經瞭解了視覺化焦點的一些內容。讓我們深入探討。視覺化焦點有時被稱為鍵盤焦點或標籤焦點。它是具有鍵盤焦點的互動式元件上的視覺指示器。效果通常是邊框或輪廓。
如何操作
您將學習不要移除焦點，以及為焦點設定樣式的兩種選擇。
不要移除或隱藏焦點
這是本模組最重要的收穫。無論您做什麼，都不要移除焦點。這條 CSS 程式碼正在破壞很多人的輔助功能。
outline: 0;
另一種隱藏父元素因太小而無法顯示焦點的常用方法是結合使用
overflow: hidden;
大多數瀏覽器使用 outline 屬性 來顯示互動式元素的視覺焦點。我們有兩種選擇：保留它或自定義它。移除它不是一個選項。
在這個 Airbnb 的示例中，目的地 Ålesund 是焦點元素。但是，無法確定。原因是父 <div> 具有 overflow: hidden;
選項 1：使用預設設定
處理視覺化焦點的最簡單方法是讓瀏覽器處理。這有很多好處：
- 依賴視覺化焦點的使用者很容易識別它。
- 您無需編寫任何程式碼。
- 使用者不會感到意外。
移除 overflow: hidden; 會顯示預設的焦點樣式。瀏覽器 Chrome 的移動模式使用橙色輪廓。您可能會認為鍵盤焦點在移動裝置上不重要。這是一個誤解。人們也在移動裝置上使用鍵盤和其他輔助技術。
選項 2：自定義視覺化焦點
預設焦點也給我們帶來了一些挑戰。
- 預設樣式可能與站點的配色方案不匹配。
- 預設樣式與站點的配色方案相似。
- 預設樣式在所有瀏覽器中可見性不夠。
旅遊網站 Momondo 擁有鮮豔的配色方案。他們可以從其調色盤中選擇一種顏色作為視覺化焦點。
這是 Momondo 網站的修改版本，顯示連結“Trips”處於焦點狀態，帶有粉色和白色輪廓。粉色來自其調色盤，與搜尋按鈕相同。
順便說一句，當搜尋按鈕與白色文字一起使用時，其 色彩對比度 不足。對比度僅為 3.33。但是，當用作深紫色背景的視覺化焦點時，對比度更好，比率為 5.47。
CSS 輪廓
為了更好地自定義視覺化焦點，您需要了解不同的 CSS outline 屬性。請訪問 W3Schools 瞭解 outline 的樣式、顏色、寬度和偏移量。現在您已經為建立鍵盤可訪問的介面做好了更好的準備。
