使用「話語提示」或「VoiceOver」時不支持樣式的中心複選框

Question

我開發了一個移動Web應用程序，並且正在測試它的可訪問性。我遇到了一些在Android上使用TalkBack（啓用了「通過觸摸瀏覽」）或iOS上的VoiceOver時無法檢查的複選框。

問題是我們「隱藏」了實際的複選框，並且用戶看到並與樣式標籤交互，該標籤的外觀和行爲類似於複選框。

這是隱藏實際複選框CSS的一部分：（另見JSFiddle）

.input-tick { 
    position: absolute; 
    left: -999em; 

以下是完整的HTML和CSS例如

.input-tick { 
 
    position: absolute; 
 
    left: -999em; 
 
} 
 
.input-tick[disabled] + label { 
 
    cursor: not-allowed; 
 
    opacity: 0.5; 
 
} 
 
.input-tick[type="checkbox"]:checked + label::after { 
 
    border: 3px solid; 
 
    border-right: none; 
 
    border-top: none; 
 
    content: ""; 
 
    height: 10px; 
 
    left: 4px; 
 
    position: absolute; 
 
    top: 4px; 
 
    width: 14px; 
 
    transform: rotate(-55deg); 
 
} 
 
.input-tick[type="radio"] + label::before { 
 
    border-radius: 100%; 
 
} 
 
.input-tick + label { 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    margin-bottom: 0; 
 
    position: relative; 
 
} 
 
.input-tick + label::before { 
 
    border: 2px solid #000; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 22px; 
 
    margin-right: 0.5em; 
 
    vertical-align: -6px; 
 
    width: 22px; 
 
} 
 
.input-tick + label:not(.checkbox):not(.block-label) { 
 
    display: inline-block; 
 
} 
 
.center { 
 
    text-align: center; 
 
}

<div class="center"> 
 
    <input type="checkbox" class="input-tick" id="agree-to-terms" name="agree-to-terms"> 
 
    <label for="agree-to-terms"> 
 
    I agree 
 
    </label> 
 
</div>

TalkBack和VoiceOver嘗試勾勒隱藏的複選框和標籤：

當VoiceOver會和對講嘗試「點擊」複選框，則x和點擊的y座標是在試圖勾勒複選框和標籤框的中間。此點擊位於複選框標籤的外部，因此複選框不會被檢查。

有沒有辦法讓VoiceOver和TalkBack只處理標籤？任何其他方式來解決這個問題？

Answer 1

我想我可能已經找到了解決這個問題的方法。查看其他方式來執行樣式複選框後，我發現很多人都建議使用display: none或visibility: hidden，但聽起來這樣刪除了複選框的某些功能（能夠通過製表符將其聚焦和空格鍵切換）。

但還有另一種方法來隱藏複選框。取而代之的是：

.input-tick { 
    position: absolute; 
    left: -999em; 
} 

我們可以這樣做：

.input-tick { 
    position: absolute; 
    opacity: 0; 
    z-index: -1; 
} 

發現在這裏：https://stackoverflow.com/a/32876109/3014407

由於風格的複選框比實際複選框越大，實際複選框是不可見的。使用話語提示或配音時，這將產生預期的結果：

Answer 2

你可能會考慮一個自定義元素上使用checkbox aria role，並用JavaScript動態定義aria-checked屬性

<div id="customcheckbox" tabindex="0" aria-role="checkbox" 
    class="checked" aria-checke="true">This is checked</div> 

... becomes ... 

<div id="customcheckbox" tabindex="0" aria-role="checkbox" 
    class="unchecked" aria-checke="false">This is not checked</div>