如何不讓可訪問性集中在復選框上

Question

我們在復選框的頂部實現了一個切換開關。 復選框用於跟蹤切換開關是打開還是關閉。 一切正常，直到您打開輔助功能。 當打開輔助功能並且用戶點擊切換開關時，焦點將轉到復選框，但它不可點擊。 但是，如果用戶點擊標簽，則可以點擊。 我需要以某種方式不讓可訪問性焦點出現在復選框中，但仍然會在點擊切換開關或標簽時宣布它是否已選中或未選中。

我已經嘗試使用tabindex和z-index來不讓焦點進入復選框，但兩者都沒有任何區別。 我嘗試使用visibility：hidden。 它可以工作，但是如果選中復選框，則可訪問性會停止通知。

我們的實施：

<div class="myToggleSwitch >
    ::before
    <inputtype="checkbox" disabled="disabled">
        <label>Label for the Toggle Switch
            <div class="switch" >
                ::before
                <div class="switch-control">
                </div>
                ::after
            </div>
       </label>
       ::after
</div>

Answer 1

當關注復選框時，您可以使用CSS在開關上設置一些樣式。

例如：

.myToggleSwitch input[type="checkbox"]:focus + label .switch {
  // Switch styles go here.
  outline: 1px solid blue;
}

用簡單的英語，它會顯示“使用聚焦復選框輸入查找具有”myToggleSwitch“類的任何元素。 然后找到一個帶有子元素的相鄰標簽，其中包含一個“switch”類，並給它一個藍色輪廓。

要確保頁面上不顯示該復選框，您可以執行以下操作：

.myToggleSwitch input[type="checkbox"] {
  position: absolute:
  left: -1000%;
  visibility: hidden;
}

隱藏它並將其定位在屏幕外，這樣它仍然可以聚焦但在頁面上看不到。

Answer 2

您的HTML結構似乎已損壞。

輸入和它的標簽之間沒有關系。 輸入不是嵌套在標簽內，也不是使用for屬性來鏈接它們。

在示例代碼中disabled該復選框。

在那種情況下，我假設您使用了一些實際上不依賴於復選框狀態的樣式？ 因為單擊標簽不會更改示例中輸入的值。