如何在保留鍵盤可訪問性的同時停用焦點樣式？

我可以在不需要時停用焦點嗎？

您希望在不需要時停用焦點，因為您不喜歡焦點在時導航的外觀在它上面。它使用與 .active 相同的樣式並且令人困惑。然而，你不想為使用鍵盤的人擺脫它。

問題可能會解決

一些海報提到了 :focus-visible 偽類，現在它有不錯的瀏覽器支援。根據規範，瀏覽器現在應該僅在對使用者有幫助時才指示焦點，例如當使用者透過鍵盤或其他非指點裝置與頁面互動時。

這表示在大多數情況下在瀏覽器中，當使用者點擊/點擊按鈕（或另一個可聚焦元素）時，即使按鈕獲得焦點，使用者代理程式也不會顯示聚焦環，因為在這種情況下，對焦環對使用者沒有幫助。

向後相容性

像這樣使用:focus-visible 可能出現的問題是，不支援它的瀏覽器將顯示預設的焦點環，根據具體情況，該焦點環可能不清晰或不可見。 design.

原始答案

如果:focus-visible 解決方案不足以實現向後相容性，您可以使用以下方法為按鈕、連結和其他容器元素實現僅鍵盤焦點樣式解決方案如下：

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

此技術將所有樣式放置在容器的內部元素上，防止使用滑鼠時出現焦點樣式。

以上是如何在保留鍵盤可訪問性的同時停用焦點樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！