Why outlines are essential (and how to use them correctly) - CSS

If you only have used the attribute outlines in CSS to disable them, you need to continue reading this blog on using outlines correctly!

We want to use an outline to visualize when an item is focused. This focused state is triggered when clicking on an item or using the tab key on your keyboard. Of course, you can visualize it how you want, but generally speaking, you would use an outline.

Outlines for accessibility

As I said earlier, you don't need an outline when navigating through the page with clicks or taps. As we don't use our keyboards, we often forget how vital an outline is. But when you only use your keyboard, you will need a visual cue to know where you are on the website.

With CSS, you can easily set an outline when focused, but what's the difference between focus and focus-visible?

:focus vs. :focus-visible

What's the difference between :focus and :focus-visible, and which should you use? Let me explain. When using :focus, the outlines (like I show in the image above) would also show when we physically click on a button, which is not always the desired effect. So, if you want the outline to show when using the keyboard to navigate but don't want it to show when physically clicking on it, we use :focus-visible.

Because not all browsers support focus-visible, we still need to use both (confusing, right). But when the browser supports focus-visible, we want to remove the outline on the :focus class.

This is how it's done:

:focus-visible, :focus {

box-shadow: none;

outline: 3px solid rgba(88,189,133,.65);

outline-offset: 2px;

}

*:focus:not(:focus-visible) {
  outline: none;
}

TL;DR

An outline is vital for making your web application accessible to users who only use their keyboards. Using the pseudo-class :focus-visible is exactly what you should use because the outline will only show up when using the tab key on your keyboard. Sadly, not all browsers support :focus-visible, which is why we still need to use :focus as well.

It's a straightforward and clean solution that can help many users who want to use your website. So, think about this blog before disabling the outline in your next project!