Checkbox hack and hiding the input element

HTML & CSS
1

What’s the right practice of hiding the input element when using the checkbox hack? I know I can simply set display: none, but it seems to cause accessibility problems.

2

Set the margin-left on the checkbox to something like -9999px, which will shove it way off screen without causing any type of horizontal scrollbar.

1 Like
3

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
4

I’m not sure the purpose of your research/practice, but I found this in my recent travels and found it an interesting alternative to the checkbox hack for dropdown menus.

Note: It needs a little JS to reach full accessibility which is noted on the page.

1 Like
5

Yes :focus-within is a very useful new css property and just using focus:within I added keyboard accessibility to the menu in this demo (which was from another thread).

The js is there for the management of the scroll and nothing to to with the tabbing.

2 Likes
6

Is this OK? DEMO

Is the following any better?

#btn {
position: absolute;
opacity: 0;
}

7

I think opacity is ok also but remember the element is still there if you haven’t moved it so you will need its stacking level to be under any other content otherwise you may block it from the cursor. (Or you could add pointer-events:none but that may harm its use.)

1 Like
8

Other than accessibility concerns, is the checkbox hack semantically correct?

9

Technically, no, it’s not - hence why it’s called a hack,

The checkbox has no function other than showing/hiding elements. So since it has no meaning in the context of where it is, it’s not semantically correct.

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.