專注

CSS Podcast - 018: Focus

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

這是因為 <main> 具有 tabindex="-1" 屬性值,表示可透過程式輔助方式將焦點放在該元素上。當系統指定 <main> 時,由於瀏覽器網址列中的 #main-contentid 相符,因此會收到程式輔助焦點。在這些情況下,您可能會想移除焦點樣式,但謹慎且適當地處理焦點,有助於打造良好且易於存取的使用者體驗。這也是為互動內容增添趣味的好地方。

為什麼焦點很重要?

身為網頁開發人員,您有責任讓網站對所有人皆可存取且無障礙。使用 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 設定正值。
  • 請確保聚焦狀態與預設狀態非常清楚。

進行隨堂測驗

測驗您對「專注」的瞭解

下列哪些元素可自動聚焦?

<a>
🎉
<p>
請再試一次!
<button>
🎉
<input>
🎉
<output>
請再試一次!
<select>
🎉

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

遊戲手把
遊戲控制器通常會在按下按鈕時傳送鍵盤事件。
鍵盤
用於瀏覽網頁時,一定會造成焦點。
老鼠
滑鼠需要視覺,且在使用時不會再將焦點放在元素上。過去,所有瀏覽器都會在按下按鈕時將焦點放在按鈕上,但現在已有所改變。
輔助技術 (例如螢幕閱讀器或切換器)
用於瀏覽網頁時,一定會造成焦點。
馬鈴薯
很抱歉,雖然在觸控螢幕上可以使用馬鈴薯當作游標,但在與螢幕輸入互動後,系統不會將焦點設為馬鈴薯。