Don’t style :checked and :focus states identically – here’s why

I often encounter web forms designs where native checkboxes are completely restyled to not look like native checkboxes. It’s OK to do so, as long as all their inherent features are preserved. Here’s one that is too often compromised by a hasty redesign.

One nifty –yet often disregarded– feature of native checkboxes is that they provide a visual cue for when they are checked, and when they have focus. And it’s a different one: checked ones are… well, checked, and focused one generally have a focus ring.

Now, when they are redesigned, it may happen that the importance of this difference is overlooked. I recently stumbled upon this very issue, and its consequences for accessibility. I can’t show it publicly because it’s still in development stage, and hopefully, it will have been fixed when it’s in production. So I wrote a CodePen, embedded below. Bear in mind that it is a very simplified example, just to prove my point, and for that I didn’t want to go into an over-complicated design endeavor. And I used checkboxes because they are easy enough for this demo, but the same goes with radio buttons, and any set of interactive elements that have a focused and an active state.

See the Pen Don’t style :checked and :focus states identically – here’s why by Olivier Nourry (@oliviernourry) on CodePen.0

Thoughts? Questions? The comments section is all yours!