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

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

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

什麼是 :focus 偽類？

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

:focus 的用法範例

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

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

什麼是 :focus-visible 偽類？

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

:focus-visible 的用法範例

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

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

:focus 和 :focus-visible 之間的主要區別

：重點

• 行為： 適用於任何接收焦點的元素，無論輸入法為何。
• 用例：確保與元素的所有互動都以視覺方式指示，無論是透過滑鼠、鍵盤或觸控。

:焦點-可見

• 行為： 僅在焦點可見時套用樣式，例如使用鍵盤或輔助技術。
• 用例：非常適合您只想向鍵盤和輔助技術用戶提供焦點指示器，同時避免為滑鼠和觸控使用者提供不必要的輪廓（通常是設計所需的）的場景。

無障礙影響

：重點

• 優點：
• 保證所有使用者都可以看到某個元素何時獲得焦點，這對於可訪問性至關重要。
• 缺點：
• 可能會導致滑鼠使用者的體驗不佳，因為在滑鼠互動過程中可能會出現不必要的焦點樣式。

:焦點-可見

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

使用 :focus 和 :focus-visible 的最佳實踐

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

結合 :focus 和 :focus-visible

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

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

額外提示

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

結論

:focus-visible 偽類提供了一種更精細的方式來管理焦點指示器，提高可訪問性和用戶體驗，特別是對於鍵盤和輔助技術用戶。透過了解 :focus 和 :focus-visible 之間的差異，並在 CSS 中應用最佳實踐，您可以創建更易於存取和用戶友好的 Web 應用程式。

請記住，可訪問性永遠不應該是事後的想法。透過深思熟慮地應用焦點樣式，您可以確保所有用戶，無論他們如何與您的網站交互，都可以輕鬆導航和互動。

以上是理解 CSS 中 `:focus` 和 `:focus-visible` 之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！