Create custom keyboard accessible checkboxes

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey

Content Warning: This blog post contains gifs. 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 keyboard. Let's say we got this in our style guide from our designer. I've seen this implemented before and it looks gorgeous. However, when I press the tab key, it zips right past it. If this field is required, you're screwing over a bunch of your users. They use ::before or ::after pseudo-elements to make a pretty checkbox and use the :checked pseudo-class to determine the styling of the check itself. It looks cool, but the problem is that they use display: none on the checkbox input itself. When we do that, we make the checkbox itself invisible to the browser, making it unusable for those who…

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey