Android – you cannot check the styled center check box when using talkback or voiceover

I've developed a mobile web application and I'm testing its accessibility. When I use talkback (touch browsing enabled) on Android or voiceover on IOS, I encounter some checkboxes that can't be checked

The problem is that we "hide" the actual check box. The user sees and interacts with the style label, which looks like a check box

This is part of the CSS that hides the actual check box:

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

This is the complete HTML and CSS example (see also jsfiddle.)

.input-tick {
  position: absolute;
  left: -999em;
}
.input-tick[disabled] + label {
  cursor: not-allowed;
  opacity: 0.5;
}
.input-tick[type="check@R_759_2419@"]: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(.check@R_759_2419@):not(.block-label) {
  display: inline-block;
}
.center {
  text-align: center;
}

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

Talkback and voiceover try to outline hidden check boxes and labels:

When voiceover and talkback try to "click" the check box, the X and Y coordinates clicked are in the middle of the box where they try to check the check box and label. This click is outside the label of the check box, so the check box will not be selected

Is there a way for voiceover and talkback to handle only tags? Is there any other way to solve this problem?

resolvent:

I think I may have found a way to solve this problem. After looking at other methods to set stylized check boxes, I found that many people recommend using display: none or visibility: hidden, but it sounds like this will delete some functions of check boxes (you can use tab to focus them and use spacebar to switch)

But there is another way to hide the check box. Not this:

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

We can:

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

Find here: https://stackoverflow.com/a/32876109/3014407

Because the stylized check box is larger than the actual check box, the actual check box is not visible. When using talkback or voiceover, this will produce the expected results: