專注

CSS Podcast - 018：焦點

在網頁上，您點選連結，讓使用者略過網站的導覽頁面，直接前往主要內容。這類連結通常稱為略過連結或錨點連結。當使用者透過鍵盤 (使用 Tab 和 Enter 鍵) 啟用該連結時，主要內容容器會出現焦點環。為什麼會這樣？

這是因為 <main> 具有 tabindex="-1" 屬性值，表示可透過程式輔助方式將焦點放在該元素上。由於瀏覽器網址列中的 #main-content 與 id 相符，因此已指定 <main> 時，系統會接收程式輔助焦點。您可能會想在這類情況下移除焦點樣式，但請妥善處理焦點並謹慎處理，有助於建立良好、方便存取的使用者體驗。這也是為互動內容增添趣味的好方法。

為什麼「焦點」很重要？

網頁程式開發人員應負責打造可供所有使用者存取的網站。使用 CSS 建立無障礙焦點狀態是這項責任的一部分。

焦點樣式可協助使用鍵盤或切換控制項等裝置的使用者瀏覽及與網站互動。如果元素獲得焦點，但沒有視覺提示，使用者可能會遺漏焦點內容。這可能會造成瀏覽問題，並導致非預期的行為 (假設點選連結有誤)。

元素如何聚焦

某些元素可自動聚焦；這些是接受互動和輸入的元素，例如 <a>、<button>、<input> 和 <select>。簡單來說，就是所有表單元素、按鈕和連結。通常，您可以使用 Tab 鍵在網頁上前進，並使用 Shift + Tab 鍵往後移動。

另外還有一個名為 tabindex 的 HTML 屬性，可讓您變更 tab 索引 (即元素聚焦順序)，每次使用者按下 tab 鍵，或在網址中以雜湊變更或 JavaScript 事件變更聚焦時，都會變更。如果 HTML 元素上的 tabindex 設為 0，則可透過 tab 鍵接收焦點，並遵循由文件來源順序定義的全域分頁索引。

如果您將 tabindex 設為 -1，則只能透過程式設計接收焦點，也就是只有在 JavaScript 事件發生或雜湊發生變更 (與網址中的元素 id 相符) 時才會接收焦點。如果您將 tabindex 設為大於 0 的任何值，系統就會將其從全域分頁索引中移除，該索引由文件來源順序定義。標籤順序現在會由 tabindex 的值定義，因此具有 tabindex="1" 的元素會在具有 tabindex="2" 的元素之前收到焦點。

設定焦點

元素獲得焦點時，預設的瀏覽器行為是顯示焦點環。這個聚焦環會因瀏覽器和作業系統而異。

您可以在 CSS 中變更這項行為，使用您在虛擬類別課程中學到的 :focus、:focus-within 和 :focus-visible 虛擬類別。請務必設定採用「對比」元素預設樣式的焦點樣式。舉例來說，常見的方法是使用 outline 屬性。

a:focus {
  outline: 2px solid slateblue;
}

outline 屬性看起來可能太靠近連結文字，但 outline-offset 屬性可以派上用場，因為它會添加額外的視覺效果，padding不會影響元素填滿的幾何大小。outline-offset 的正數值會將外框推向外側，負值則會將外框拉向內側。

目前在部分瀏覽器中，如果元素上設有 border-radius 且使用 outline，兩者就不會相符，輪廓會出現尖銳的角落。因此，您可能會想使用具有小模糊半徑的 box-shadow，因為 box-shadow 會裁剪形狀，並遵循 border-radius，但這類樣式不會在 Windows 高對比模式下顯示。這是因為 Windows 高對比模式不會套用陰影，且大多會忽略背景圖片，以便使用者設定偏好設定。

摘要說明

建立與元素預設狀態形成對比的焦點狀態非常重要。預設的瀏覽器樣式會為您執行這項操作，但如果您想變更這項行為，請記住下列事項：

• 請勿在可接收鍵盤焦點的元素上使用 outline: none。
• 請勿使用 box-shadow 取代 outline 樣式。因為這些圖示不會顯示在 Windows 高對比模式中。
• 只有在必要時，才在 HTML 元素上為 tabindex 設定正值。
• 確保聚焦狀態與預設狀態非常清楚。

隨堂測驗

測試你對重點的瞭解程度