專注

CSS Podcast - 018：焦點

在網頁上 使用者按下連結後，就會跳轉至網站的主要內容。 這類連結通常稱為跳轉連結或錨點連結。 透過鍵盤啟用該連結後，使用 Tab 鍵和 Enter 鍵， 主要內容容器周圍有聚焦環為什麼會這樣？

這是因為 <main> 具有 tabindex="-1" 屬性值。 也就是說，可以透過程式輔助方式聚焦 因為 #main-content 而指定 <main> 瀏覽器網址列中的 id 相符，而該字串會接收程式輔助焦點。 這時您可能會很想移除焦點樣式 但若能妥善處理專注力有助於創造良好 方便所有人使用 也可以藉此增添個人興趣。

為什麼「焦點」很重要？

身為網頁程式開發人員 發布商必須負責打造可供所有人使用的網站，讓人人都能受惠。 使用 CSS 建立無障礙焦點狀態是這項責任的一部分。

焦點樣式可協助鍵盤或裝置等裝置的使用者 切換控制功能 瀏覽網站並進行互動 如果元素獲得焦點且沒有視覺指標 使用者可能會無法追蹤焦點所在重點 這可能會產生瀏覽問題，並導致不必要的行為。 指出追蹤的連結有誤

元素如何聚焦

特定元素可自動聚焦。 這些是可接受互動和輸入內容的元素，例如 <a>。 <button>、<input>和<select>。 簡單來說，所有表單元素、按鈕和連結。 一般來說，你可使用 Tab 鍵瀏覽網站的可聚焦元素，按 Shift 鍵和 Shift + Tab 鍵前往下一頁。

此外，還有一個名為 tabindex 的 HTML 屬性可讓您變更 Tabing 索引，也就是 依焦點排列元素的順序。每當有人按下 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。
• 避免將 outline 樣式替換為 box-shadow。 它們不會顯示在 Windows 高對比模式中
• 只有在必要的情況下，才需要在 HTML 元素上為 tabindex 設定正值。
• 確認焦點狀態非常清楚，與預設狀態相較。

隨堂測驗

測試你對重點的瞭解程度