The Styled Centered checkbox cannot be checked when using TalkBack or VoiceOver

Question

I am developing a mobile web application and I am testing it for availability. I came across some checkboxes that cannot be checked when using TalkBack on Android (with Explore by Touch enabled) or VoiceOver on iOS.

The problem is that we “hide” the actual flag, and the user sees and interacts with a stylized label that looks and acts like a flag.

This is the part of CSS that hides the actual flag:

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

Here is a complete example of HTML and CSS (see also JSFiddle .)

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

Run codeHide result

TalkBack and VoiceOver will try to highlight the hidden flag and label:

VoiceOver TalkBack "click", 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;
}

: fooobar.com/questions/13363/...

, . TalkBack VoiceOver:

Answer 2

checkbox aria-checked 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>