如何實現僅鍵盤焦點樣式並保持可訪問性？-css教學-PHP中文網

如何實現僅鍵盤焦點樣式並保持可訪問性？

Linda Hamilton

發布： 2024-11-04 02:28:01

原創

991 人瀏覽過

How to Implement Keyboard-Only Focus Styles and Maintain Accessibility?

實作僅鍵盤焦點樣式

背景：
您可能不喜歡預設焦點樣式元素。但是，您仍然希望具有鍵盤輔助功能的使用者能夠看到對焦環。在自訂焦點樣式的同時保持可訪問性可能具有挑戰性。本文探討了僅在使用鍵盤時啟用焦點樣式的解決方案。

解決方案：

刪除預設焦點樣式：

使用CSS 從所有可聚焦元素中刪除預設焦點樣式。這可以防止不需要焦點時出現混亂的樣式。

建立自訂可聚焦元素：

對於 span 或 div 等容器元素，請使用tabindex 屬性使它們可聚焦。

套用自訂焦點樣式：

a。內部元素焦點：

將焦點樣式加入容器元素內的內部元素。
這確保焦點樣式在多層元素中可見。

b.外部元素焦點：

向外部元素新增事件偵聽器，以刪除滑鼠點擊或觸控時的焦點環。
這可以保持可訪問性，同時防止滑鼠期間不必要的焦點樣式

範例程式碼：

<code class="css">button, a, span {
  -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;
}

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

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

登入後複製

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

登入後複製

結論：
透過在嵌套內部元素並從外部元素中刪除預設焦點樣式，您可以啟用僅鍵盤焦點樣式。這使您可以在自訂焦點外觀的同時保持可訪問性。

以上是如何實現僅鍵盤焦點樣式並保持可訪問性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！