By default checkboxes (and radiobuttons) are accessible. But visually they aren’t very interesting. Most designs create a specific style for these form elements. But most tutorials on how to develop them don’t keep accessibility in mind. The tabbing and selecting is messed up and that makes the forms unusable for users with assistive software.

So I tried to develop the custom designed form with accessibility in mind. But I had some trouble with checkboxes: selecting them with my keyboard just wouldn’t work.

It turns out you select a checkbox with the [spacebar] and not the [enter] key. At least in Firefox.

Use the [spacebar] to select a checkbox with a keyboard. Not the [enter] key… 🙂

Need a tutorial for developing custom checkbox (and radio) elements? You can use this one from CSS-Tricks.