close
address. Gaston Geenslaan 11 B4, 3001 Leuven
s.
All Insights

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

If you only have used the attribute outlines in CSS to disable them, read this blog on using outlines correctly. It makes your website much more accessible.

Written by
Aagje Reynders
Front-end Developer

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?

By using the tab key, you know where you are on the webpage

: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!

Written by
Aagje Reynders
Front-end Developer

Subscribe to our newsletter

Raccoons NV (Craftworkz NV, Oswald AI NV, Brainjar NV, Wheelhouse NV, TPO Agency NV and Edgise NV are all part of Raccoons) is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below:

By submitting this form, you agree to our privacy policy.

In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.

More blog articles that can inspire you

16/06/2022

‘Bubble Jump’ – Building an augmented reality game during my internship

My internship's goal was to create an augmented reality game. The purpose of this game was to enable a player to jump ar...

what we do

Socials

address. Gaston Geenslaan 11 B4, 3001 Leuven