Zentriert Checkbox nicht überprüfbar bei Verwendung von TalkBack oder VoiceOver

Question

Ich entwickle eine mobile Web App und teste sie auf Barrierefreiheit. Ich habe einige Kontrollkästchen gefunden, die nicht überprüft werden können, wenn TalkBack unter Android (mit "Explore by Touch" aktiviert) oder VoiceOver unter iOS verwendet wird.

Das Problem ist, dass wir das tatsächliche Kontrollkästchen "ausblenden" und der Benutzer sieht und interagiert mit einem formatierten Etikett, das aussieht und sich wie ein Kontrollkästchen verhält.

Dies ist Teil der CSS, die das eigentliche Kontrollkästchen versteckt: (. Siehe auch auf JSFiddle)

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

Hier ist die vollständige HTML und CSS Beispiel

.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 und VoiceOver versuchen, sowohl das ausgeblendete Kontrollkästchen als auch das Etikett zu umschreiben:

Wenn Voiceover und Talkback versuchen, „klicken Sie auf“ das Kontrollkästchen, die x- und y-Koordinaten des Klicks sind in der Mitte der Box, die das Kontrollkästchen und das Etikett zu skizzieren versucht. Dieser Klick befindet sich außerhalb der Beschriftung für das Kontrollkästchen, sodass das Kontrollkästchen nicht aktiviert wird.

Gibt es eine Möglichkeit, mit VoiceOver und TalkBack nur mit dem Label umzugehen? Irgendeine andere Möglichkeit, das zu beheben?

Answer 1

Ich denke, ich habe vielleicht eine Lösung für dieses Problem gefunden. Nachdem ich mir andere Möglichkeiten für ein gestyltes Kontrollkästchen angeschaut habe, habe ich festgestellt, dass viele die Verwendung von oder visibility: hidden vorschlagen, aber es hört sich so an, als ob einige Funktionen der Checkboxen entfernt werden (Tabs zum Fokussieren und Leertasten zum Umschalten).

Aber es gibt eine andere Möglichkeit, das Kontrollkästchen zu verbergen. Statt dessen:

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

Wir können dies tun:

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

hier gefunden: https://stackoverflow.com/a/32876109/3014407

Da der Stil Checkbox größer als die tatsächliche Kontrollkästchen ist, die tatsächliche Kontrollkästchen nicht sichtbar ist. Dadurch ergibt sich das erwartete Ergebnis, wenn Talkback oder Voiceover mit:

Answer 2

Sie betrachten könnte die checkbox aria role auf einem benutzerdefinierten Element verwendet und definieren das aria-checked Attribut dynamisch mit Javascript

<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>