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>
下列哪些輸入裝置可以設定焦點?