如何啟用：僅關注鍵盤使用（或按 Tab 鍵）？

僅在鍵盤使用（或按Tab 鍵）時啟用:focus

概述

在不需要時停用:focus 可以透過消除來增強使用者體驗令人困惑的視覺線索。然而，為鍵盤使用者維護焦點功能至關重要。

原始解決方案：僅鍵盤焦點樣式

Roman Komarov 的解決方案利用 CSS 和 HTML 來實現僅鍵盤焦點樣式。它將可聚焦元素封裝在容器元素中，並僅對內部元素設定樣式，使鍵盤使用者可以直觀地存取焦點狀態。

改進的解決方案：:focus-visible 偽類

更新: :focus-visible 偽類提供了一種更優雅、更有效的方法來實現僅鍵盤焦點樣式。 瀏覽器現在僅在增強使用者體驗時才指示焦點，例如在鍵盤互動期間。

要使用 :focus-visible，請在 CSS 規則中將 :focus 替換為 :focus-visible。這可確保焦點樣式僅在透過鍵盤或非指點裝置啟動時可見。

向後相容性

不支援 :focus-visible 的瀏覽器將顯示預設焦點環。為了提供一致的使用者體驗，Šime Vidas 建議在 :focus 中定義焦點樣式並在 :focus:not(:focus-visible) 中恢復它們。

CSS 範例：

HTML 範例:

註解：

• 使用tabindex 屬性使不可聚焦的元素可聚焦聚焦。
• 確保您的 CSS 足夠具體以覆蓋預設的焦點樣式.
• 考慮使用 :focus-within 在子元素獲得焦點時設定父元素的樣式。

結論

透過利用:focus-visible 偽類或實現原始解決方案後，開發人員可以提供僅鍵盤焦點樣式，而不會影響鍵盤和滑鼠用戶的用戶體驗。

以上是如何啟用：僅關注鍵盤使用（或按 Tab 鍵）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！