Hiding · 11
Keep a custom checkbox touchable
A custom visual checkbox still needs a full-size native input for touch screen-reader exploration.
What to do
- Keep the native checkbox named and present in the accessibility tree.
- Make it fully cover the 32×32 visual control.
- Use opacity: 0—not display: none—and preserve pointer interaction.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
Stretch the native input over the custom square, then make it transparent. Manually verify drag-to-explore and double-tap with VoiceOver or TalkBack.