CSS Podcast - 018: Focus
您在網頁上按一下的連結，會引導使用者前往網站的主要內容。這類連結通常稱為略過連結或錨點連結。 鍵盤啟用該連結後，使用 Tab 鍵和 Enter 鍵，主要內容容器周圍會顯示焦點環。為什麼會這樣？
這是因為 <main> 有 tabindex="-1" 屬性值，可透過程式輔助方式聚焦。指定 <main> 時 (因為瀏覽器網址列中的 #main-content 與 id 相符)，因此會獲得程式輔助焦點。在這種情況下，我們會建議您移除焦點樣式，但妥善處理焦點並謹慎處理，有助於打造良好、容易存取的使用者體驗。不妨也趁這個機會加強互動。
為何重視專注力？
網站開發人員的職責是讓所有人皆能輕鬆存取網站內容。透過 CSS 建立無障礙焦點狀態是這項工作的一環。
聚焦樣式可協助裝置 (例如鍵盤或切換控制項) 使用者瀏覽網站並與網站互動。如果元素獲得焦點，但沒有視覺指標，使用者可能會失去焦點。舉例來說，這樣可能會造成瀏覽問題，並導致系統使用錯誤的連結等不當行為。
元素如何成為焦點
某些元素會自動可聚焦；這些是接受互動和輸入的元素，例如 <a>、<button>、<input> 和 <select>。簡單來說，所有表單元素、按鈕和連結。一般來說，使用 Tab 鍵可在網站的可聚焦元素上移動，按下 Shift + Tab 鍵則可向後移動。
還有一個名為 tabindex 的 HTML 屬性，可讓您變更分頁索引 (亦即元素的聚焦順序)，即每次有人按下其 Tab 鍵，或焦點因網址或 JavaScript 事件的雜湊變更而移位時。如果 HTML 元素上的 tabindex 設為 0，就能透過「Tab」鍵接收焦點，並使用以文件來源順序定義的全域分頁索引。
如果您將 tabindex 設為 -1，就只能透過程式輔助方式接收焦點，這表示只有在 JavaScript 事件發生，或是網址中元素的 id 相符時才會發生雜湊。如果將 tabindex 設為比 0 高的值，系統就會從文件來源順序定義的全域分頁索引中移除這個值。現在起，分頁順序將由 tabindex 的值定義，因此含有 tabindex="1" 的元素會位於含有 tabindex="2" 的元素之前。
設定焦點樣式
元素獲得焦點時的預設瀏覽器行為，是顯示焦點環。聚焦環會因瀏覽器和作業系統而異。
您可以使用您在虛擬類別課程中學到的 :focus、:focus-within 和 :focus-visible 虛擬類別，透過 CSS 變更這項行為。設定焦點樣式時，請務必採用元素預設樣式中的「對比」。舉例來說，常見的做法是使用 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設定正值。 - 請確保焦點狀態與預設狀態非常清楚。
隨堂測驗
測驗您對焦點的相關知識
以下何者是可自動聚焦的元素？
<a><p><button><input><output><select>下列哪些輸入裝置可以設定焦點？