CSS Accessibility - keeping focus

How many of you have done this before, I know I have:

Great, we just made our site useless for those who really need and rely on this feature, and at the same time made our site less usable for the rest of our users. And, if we do not offer an alternative way of showing if an element is in focus, a fine might be one its way, since we are not complying with Success Criterion 2.4.7 Focus Visible!

Ok, but I didn’t actually add that line of CSS you say, it is part of my CSS Reset you say. Ok, but then it might be time to update your css reset, as the most used CSS Reset from Eric Meyer removed this css in 2011...

I highly recommend reading Focusing on focus styles over at CSS tricks for detailed information about everything focus. Different designs require different considerations when choosing how you are showing focus, but whatever you end up choosing, remember to take into account all the other WCAG Success Criterion to make sure you do not break compliance with more rules.

We love fancy design, or at least our users and designers love fancy design, and especially custom radio, checkboxes and dropdowns. As developers though, we especially hate styling these three form elements, due to the fact that they are not customisable out of the box. Cue hacks!

Aditya Bhandari goes through all the steps necessary for creating a custom accessible checkbox, and the same technique applies for radio buttons and dropdowns. To give you a hint; ::before and ::after is your friend :)

Not all custom checkboxes are created equal though, and it is depressing how little care is given to accessibility when browsing for custom css forms. When searching for “custom checkbox” on codepen.io, almost all top examples did not have proper accessibility.

And it really isn't that hard! To make sure you custom css forms are accessible:

1. Do not remove the initial input element from the DOM.

You might be tempted to apply input[type="checkbox"] { display: none; } to your checkbox. You just lost screen readers, and the possibility of controlling the focus state. The better way is to use opacity: 0; and move the original checkbox out of the way so that it does not take up any space.

1. Style your ::before or ::after based on the focus state

The work is almost done, it is just a matter of adding some focus style:

Thanks for reading, hope it was useful, and hope you have time to verify that your focus is correctly handled on your website :)