理解 CSS 中 `:focus` 和 `:focus-visible` 之間的差異-css教學-PHP中文網

理解 CSS 中 `:focus` 和 `:focus-visible` 之間的差異

Susan Sarandon

發布： 2024-11-24 07:59:12

原創

289 人瀏覽過

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

了解 CSS 中 :focus 和 :focus-visible 之間的差異

我已經了解了鍵盤可訪問性的重要性，所以我知道聚焦元素的視覺指示非常重要。但眾所周知的 :focus 偽類並不總是最適合這項工作。這就是 :focus-visible 的用武之地。讓我們看看這兩個偽類之間的差異，並探索有效使用它們的最佳實踐。

:focus 偽類是一個 CSS 選擇器，它將樣式套用於任何接收焦點的元素，無論焦點是如何觸發的。這包括來自鍵盤導航、滑鼠點擊和觸控互動的焦點事件。

button:focus {
  outline: 2px solid blue;
}

登入後複製

在此範例中，只要按鈕獲得焦點，無論使用者是使用滑鼠點擊它、在觸控螢幕上點擊它還是使用鍵盤導航到它，該按鈕都會顯示藍色輪廓。

:focus-visible 偽類更專業。只有當瀏覽器確定焦點應該可見時，它才會將樣式套用到元素。當使用者透過鍵盤或輔助技術而不是透過滑鼠或觸控輸入進行導航時，通常會發生這種情況。

button:focus-visible {
  outline: 2px solid blue;
}

登入後複製

在這裡，當透過鍵盤導航或其他通常需要可見焦點指示器的輸入方法獲得焦點時，按鈕只會顯示藍色輪廓。

優點：
僅在必要時顯示焦點指示器，從而增強使用者體驗，從而為滑鼠和觸控使用者保持介面乾淨。
為鍵盤和輔助技術使用者量身定制體驗，為他們提供清晰的視覺提示。
缺點：
可能需要額外的考慮，以確保焦點指示器不會被意外省略，特別是在不支援 :focus-visible 的舊瀏覽器中。
- 在某些情況下，您可能想要向所有使用者顯示焦點指示器，無論輸入法為何。

為了實現最佳的可訪問性和使用者體驗，在 CSS 中結合使用 :focus 和 :focus-visible 通常是一個好主意。

button:focus {
  outline: 2px solid blue;
}

登入後複製

這是一個 Stackblitz 範例，展示了此類樣式的外觀，供您嘗試和使用：

使用鍵盤和輔助技術進行測試：確保您的 Web 應用程式可以使用鍵盤（Tab、Shift Tab 等）進行導航，並且焦點指示器對於依賴它們的人是可見的。在您的 e2e 測試套件中包含可訪問性測試絕不是一個壞主意。
提供清晰的焦點指示器：確保焦點指示器突出且易於看到。微妙或難以發現的焦點指示器可能會嚴重影響依賴鍵盤導航的使用者的可訪問性。