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
設定正值。 - 確認焦點狀態非常清楚,與預設狀態相較。
隨堂測驗
測試你對重點的瞭解程度
以下何者是可自動聚焦的元素?
<a>
<p>
<button>
<input>
<output>
<select>
下列哪些輸入裝置可以設定焦點?