La checkbox con el centro centrado no se puede verificar cuando se usa TalkBack o VoiceOver.

Desarrollo una aplicación web mobile y estoy probando para la accesibilidad. He encontrado algunas casillas de verificación que no se pueden verificar al usar TalkBack en Android (con "Explore by Touch" habilitado) o VoiceOver en iOS.

El problema es que "ocultamos" la checkbox real y el usuario ve e interactúa con una label de estilo que se ve y actúa como una checkbox.

Esto es parte del CSS que oculta la checkbox real:

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

Aquí está el ejemplo HTML y CSS completo (Véase también en 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> 

TalkBack y VoiceOver intentan esbozar tanto la casilla oculta como la label:

Captura de pantalla de TalkBack

Cuando VoiceOver y TalkBack intenten "hacer clic" en la checkbox, las coorderadas x e y del clic están en el centro del cuadro que intenta delinear la casilla y la label. Este clic está fuera de la label de la checkbox, por lo que la checkbox no se comtesting.

¿Hay alguna manera de hacer que VoiceOver y TalkBack solo traten con la label? ¿Alguna otra forma de solucionar esto?

Creo que he encontrado una solución a este problema. Después de ver otras forms de hacer una casilla de estilo, encontré que muchos sugieren usar la display: none o visibility: hidden , pero suena así, quita algunas funcionalidades de las casillas de verificación (poder tabular para enfocarlas y la barra espaciadora para alternar) .

Pero hay otra forma de ocultar la checkbox. En lugar de esto:

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

Podemos hacer esto:

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

Encontrado aquí: https://stackoverflow.com/a/32876109/3014407

Dado que la casilla de estilo es más grande que la checkbox real, la checkbox real no está visible. Esto produce el resultado esperado al usar TalkBack o VoiceOver:

Captura de pantalla de TalkBack

Puede considerar usar la checkbox aria role en un elemento personalizado y definir el atributo aria-checked dinámicamente con 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>