--- title: "CSS Accessibility - keeping focus" url: "https://www.bekk.christmas/post/2019/15/css-accessibility-keeping-focus" authors: ["Hans-Christian Fjeldberg-Gustavson"] published: "2019-12-15" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["CSS"] --- # CSS Accessibility - keeping focus Did you know that you might be required by law to create accessible websites? In many countries, government agencies has been required to create websites that comply with WCAG 2.0 for a long time, and in for instance Norway, this requirement also apply for private companies. For a general introduction to accessibility, I recommend reading the article from [day 6 in our UX Christmas calendar](https://ux.christmas/2019/6), and to see all the technical tidbits involved, I recommend going through the checklist found at [https://www.wuhcag.com/wcag-checklist/](https://www.wuhcag.com/wcag-checklist/). As this is a CSS Christmas calendar, let’s focus on the stuff we control using CSS, and today, it is all about keeping focus! ## In short CSS focus styles are essential for keyboard users and for meeting WCAG Focus Visible requirements. The article shows how removing focus outlines hurts usability and accessibility, and explains how custom form controls like checkboxes, radios, and dropdowns can preserve the original input and use focus-based styling on pseudo-elements instead. - **For:** Frontend developers styling forms and focus states - **Good to know beforehand:** Basic CSS knowledge _AI-generated_ ## :focus How many of you have done this before, I know I have: ``` :focus { outline: none; } ``` 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](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)! 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... ## Controlling the focus I highly recommend reading [Focusing on focus styles over at CSS tricks](https://css-tricks.com/focusing-on-focus-styles/) 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. ## Don’t forget to focus on your fancy designs 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](https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3), 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: ``` input[type="checkbox"]:focus + label::before { outline: #ff0a0e auto 5px; } ``` Thanks for reading, hope it was useful, and hope you have time to verify that your focus is correctly handled on your website :) ## Relevant resources recommended by the author - [Day 6 in our UX Christmas calendar](https://ux.christmas/2019/6) - [Technical WCAG Checklist](https://www.wuhcag.com/wcag-checklist/) - [Focusing on focus styles](https://css-tricks.com/focusing-on-focus-styles/) - [Pure CSS accessible checkboxes and radio buttons](https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3)