專注

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 屬性可以協助你解決這個問題 會在不影響元素填滿的幾何大小的情況下加入額外的視覺 paddingoutline-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>
🎉

下列哪些輸入裝置可以設定焦點?

遊戲手把
使用者按下按鈕時,遊戲控制器通常會傳送鍵盤事件。
鍵盤
在使用網路時肯定會突兀。
老鼠
滑鼠需要視覺,使用時不會再將焦點放在元素上。以往所有瀏覽器 (例如按下按鈕時) 會聚焦在按鈕上,但此情況現已改變。
輔助技術 (螢幕閱讀器、切換鈕等)
在使用網路時肯定會突兀。
馬鈴薯
很抱歉,雖然馬鈴薯可以用做觸控螢幕上的指標,但在與螢幕輸入互動後不會造成焦點。