DEV Community

Create custom keyboard accessible checkboxes

Lindsey Kopacz on November 27, 2018

I've seen a ton of designers make these GORGEOUS checkbox styles, but then you see them implemented and you can't even select it using your key...

Read full post

Andrew Bone • Nov 27 '18

I will always upvote a11y content, I think it's so important.

I'm on mobile so I'll try and keep this short

One thing I would change with your code would be to not paint the check every time. To do this I'd change the CSS to something like

input[type="checkbox"] + label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 27px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  height: 6px;
  width: 13px;
  transform: rotate(-45deg);
  opacity: 0;
}
input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

It's a lot easier for the browser to change the opacity than it is to make the tick anew each time. Though it's fair to say no one would notice any improvement in performance I just prefer to do it that way as a style preference.

Lindsey Kopacz • Nov 28 '18

Hmm! That's a good point, I also like that :).

Andrew Bone • Nov 28 '18

Right, now that I'm on a desktop this is how I tend to do things

jsfiddle.net/link2twenty/3nrczx2q/

The main difference is the way I handle the HTML

<label class="md_checkbox">
  <input type="checkbox" />
  <span class="md_checkbox__tick"></span>
  Checkbox
</label>

I do it this way so you don't have to have an ID for each checkbox.

Are you planning on turning this into a series for different input types?

Lindsey Kopacz • Nov 28 '18

I have to read more into this and do some testing, I've always been yelled at for not having associations between inputs and labels, but I can see why having an ID for every checkbox may get annoying.

I have to sign into the day job, but I wanna look into this tonight and get back to you :)

Lindsey Kopacz • Nov 28 '18

Also, can I say the fact that you typed out the code on your phone is impressive!

Jimmy Byess • Nov 28 '18

Great tips! You probably already know this, but I think accessibility is overlooked. And I've made my fair share of custom-styled checkboxes because that's what our designers wanted. Now I know better and can still build it the way they want.

Lindsey Kopacz • Nov 28 '18

Hey Jimmy :D.

Yeah! I may change the CSS of this post to use visually-hidden for the checkbox itself based on a few comments I've seen. Just note that so you can come back to it :D

Ben Halpern • Nov 27 '18

Thanks for this! Checkboxes are not a straightforward html element.

Lindsey Kopacz • Nov 28 '18

They aren't! The good news is once you get the hang of it, it takes no time at all to implement. I fixed this in < 10 minutes on a site I was temporarily helping out with.

Lindsey Kopacz • Nov 28 '18

Case in point, people have other ways to do things in the comments and now I have more things to check out :P

. • Nov 28 '18

Hi! great article. But have you tried this out on iPhone? left: -99999px might be considered as out of view port, so clicking on checkbox might not work.

David Prokaj • Nov 28 '18

clip: rect(0,0,0,0); may solve this instead of left

Lindsey Kopacz • Nov 28 '18

Yeah, I used to use clip more, must have slipped my brain.

The good news though is you're thinking about ensuring that the checkbox will work, both minds in the right place :D

Andrew Bone • Nov 28 '18

I like doing

[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

Lindsey Kopacz • Nov 28 '18

That's a good point! Need to test it more! Signing into the day job now, but will report back!

Andrew Bone • Nov 30 '18

I've written an article inspired by this one. I'd love to hear your thoughts 🙂

Lindsey Kopacz • Nov 30 '18

Sweet! I will take a look! Sorry I haven't gotten back to this post sooner, so much going on this week!

Andrew Bone • Nov 30 '18

No rush, just thought I'd let you know 🙂

Mac Siri • Dec 7 '18

Awesome post! Thanks for sharing!