DEV Community


Discussion on: Custom Checkbox with HTML & CSS

taufik_nurrohman profile image
Taufik Nurrohman

There is another way:

<label tabindex="0">asdf</label>
<input tabindex="-1" type="checkbox">
Enter fullscreen mode Exit fullscreen mode
nikhil27b profile image
Nikhil Bobade Author


inhuofficial profile image

The problem with that approach is semantics and the weird and wonderful compatibility world of web browser and screen reader combinations, landing on the label of a checkbox does not have the same semantic meaning as landing on the checkbox itself.

Some screen reader and browser combinations will not announce the checked state for example.

So it is certainly a good fix for keyboard accessibility, it is not so great from a screen reader and assistive tech perspective.

The other thing to consider is voice navigation, I do not know how something like "dragon naturally speaking" would behave with this. But as I do not know I cannot comment in any meaningful way other than an educated guess that this would not be very robust due to experience with Dragon not behaving well with workarounds.

I mean, Dragon even has problems with implicit labels so it shows how careful you sometimes have to be due to the scattered support across assistive tech.

Thread Thread
nikhil27b profile image
Nikhil Bobade Author