Checkbox hack and hiding the input element

The checkbox hack is inherently inaccessible to keyboard users because its not clear that you are navigating a form field which doesn’t work with tab but with the spacebar and arrow keys.

I imagine if you hide the checkbox with display:none then assisted devices will assume its not tabbable anyway. Therefore I would hide it with the clip method (search visually:hidden) or just put it off screen (although left:-999em would have issues in a rtl environment so a negative top may be better). Also you may need to hide the overflow or you may get a focus ring stretching all the way from input to label.

We did have a short thread about accessibility concerns a while ago.

3 Likes