That one thing I regret about my CSS code

The tech world evolves in a tremendously fast manner, and so do design trends. When teams are working hard to deliver beautiful applications, they are making sure that expectations meet reality.

While doing that, engineers have to work with default browser behavior like the topic of this article — outline.

When trying to deliver a great user experience, it’s easy to get distracted and start paying less attention to details and not realizing why these default elements are implemented in the first place.

I was this engineer, and the goal of this article is to raise awareness around accessibility and explain that you should keep the outline for your projects even if it doesn't fit the look and feel of your application.

What is an outline?

As the name implies, the outline is an outside line around the HTML element.

The first look feels pretty close to a border property, but there are some essential differences in technical aspects and in mindset in general.

The outline is not visible if the element is not focused. The idea behind this property is to indicate that the component can be focused on folks using the keyboard only to navigate through your application or have a visual impairment.

Some of the technical differences between outline and border are:

• you can not modify the edges of the outline . it operates as a single unit
• outline does not take any space and does not affect other elements and layout in general

For more information, you can check the MDN spec about the outline.

Why should outline stay?

The outline has a very simple look and doesn’t fit most of the modern minimalistic design concepts. That’s why you can quite often find that engineers write a set of styles to hide it and keep the indication that the element is clickable.

.my-fancy-looking-button {
    outline: none; /* Hide the outline */
    cursor: pointer; /* Add the pointing cursor when hovering the element */
}

From the first look, that might feel like a valid solution, but the reality is that it’s not.

When hiding the outline, you have a couple of adverse outcomes, the accessibility of your application gets worst, and navigation with keyboard only is getting trickier.

Accessibility issue

Different groups of users need the outline to understand how they can navigate through your website.

We all are different, and a good project should aim to be accessible for everyone. In my honest opinion, a project with great attention to accessibility is better than a minimalistic clean-looking application that is convenient for a specific user group only.

I deliberately didn’t use the phrase “sacrificing the great design for the best” because making an application more accessible is never a sacrifice.

Caring about people should never be a negative aspect!

Keyboard navigation issue

Many users prefer to navigate through websites quickly. An outline is a fantastic feature that can help with that.

Creators want their applications to look beautiful, but sadly, it affects how specific projects help solve some problems quickly and conveniently.

Here you can find a gif that shows the navigation using the Tab key.

What if you still want to remove an outline?

I believe that this should not be an option, but if you still decide to remove an outline, there is an accessible way of doing that.

Steve Faulkner’s article covers the way of removing the outline and keeping your application accessible.

Suppose you are ready to add a third-party library to your application. In that case, you can use the remove-focus-outline npm package created by Lindsay Evans, which implements the idea described in the article.

Conclusion

This topic is not new, and I am happy if it is not needed since your application is accessible for different users. Sadly I still can see engineers sacrificing accessibility for an excellent design. That’s why I decided to give some attention to a topic that can help you build projects that can help more users find it useful.

I was an engineer who was not paying attention to this specific point, and hopefully, this article can help more people to improve their applications.

Keep the great work, and stay tuned!