Why you should use CSS focus styles

There are many ways people will use your website. Some use a mouse, some use a touch device, some use a screen reader and some use only the keyboard. In this article, you will learn all about focus indicators, how to style them and why they are important for many users.

What are focus indicators?

Ever seen the blue outline when focusing an input element? That’s the native focus style browsers use to indicate that an element is focused.

This blue outline will be shown for all interactive elements. This includes links (<a>), buttons (<button>), and all form elements like input and select. Every browser has a slightly different default style for the outline, so you probably want to change the default style (more on this later).

Why focus styles are important for accessibility

Everybody uses a mouse or a touch device to browse the web, right? Nope — there are many users who rely on a keyboard to navigate a site.

We may think that only a small minority are keyboard users, but the actual numbers may surprise you. In the US alone, there are about 20 million people who have difficulty lifting or grasping, and many of them use a keyboard instead of a mouse to navigate the web.

Power users

Many people work with computers all day, and in order to finish some tasks faster, they often use the keyboard instead of the mouse. Take me as an example — I am used to only using a keyboard when writing code or doing some task in the terminal. Like me, a lot of other power users prefer to use the keyboard to navigate on the web.

People with limited mobility

Some users can’t use a mouse. They may use something like a mouth stick to operate a standard keyboard or a switch, which simulates a keyboard.

People with low vision or cognitive disabilities

Some people use a screen reader, which is mostly controlled using the keyboard. In addition, there are many people temporarily relying on a keyboard — people with a broken mouse, for example.

Change the style of focus indicators

Now that we know what focus indicators are and why people rely on them, let’s see how we can change the default styling.

a:focus {
    outline: none;
    background-color: #651787;
    color: #fff;
}

Here we are removing the default blue outline using outline: none and at the same time change the background-color and color of the element when it receives focus. This way people will still easily recognize that the element is currently focused, but instead of the boring blue outline the style now matches your design.

One thing to note here: when changing colors, you should always check whether the color contrast is sufficient. This is especially important for people with low vision, but poor color contrast impacts everyone. If you ever surfed the web while sitting in the sunshine, you know how important it is to have a great color contrast to be able to see what’s on the screen.

How to use :focus-within to style the parent element of a focusable element

You want to style the parent element of a focused element? Great! There’s the :focus-within CSS pseudo-class for doing exactly that. Browser support is pretty solid, and it’s a great enhancement.

Let’s have a look at how we can use it:

<form>
  <label for="username">Username:</label>
  <input id="username" type="text">

  <label for="password">Password:</label>
  <input id="password" type="password">

  <input type="submit" value="Login">
</form>

Here we have a basic login form in HTML. As a next step, we will use CSS to create a certain effect:

form {
  padding: 10px;
  position: relative;
  overflow: hidden;
}
form:before {
  content:"";
  background: #ddd;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  transform: translateY(-100%);
  transition: transform 260ms ease-out;
}
form:focus-within:before {
  transform: translateY(0);

We use :before to create a background for the form and use transform: translateY(-100%) to hide it by default. Once a user focuses on one of the input elements, the background will move in from the top. This is done by using the form:focus-within selector and setting translateY to zero for the :before pseudo class. In addition, we use transition here to make it a smooth effect.

Check out the full example on JS Bin.

How to use :focus-visible to suppress focus styles

Sometimes using :focus styles can also create a poor user experience for mouse/pointer users. Take an image gallery with previous/next controls, for example. If a user clicks on one of these buttons, they will get focused; thus, the focus styles will be shown. While this is great for keyboard users, it may be too much for mouse/pointer users.

In the past, some made the poor decision to “fix” this by using the following CSS:

button:focus { outline: none; }

Don’t do this. This will, of course, also remove the focus indicator for keyboard users, making it almost impossible to use your image gallery.

This is where the :focus-visible pseudo class comes into play. By using :focus-visible, the focus styles will only be shown when a user uses a keyboard to focus an element.

Let’s have a look at how we can use this:

/* provide basic focus styles */
button:focus {
    ...
}
/* Remove focus styles for mouse users */
button:focus:not(:focus-visible) {
    outline: none;
}

Here we make use of the :not pseudo-class to explicitly remove focus styles if a user is using a mouse or pointer to focus an element. This way keyboard users will still see the focus indicator, while mouse users don’t. Great, problem solved.

Because browser support still isn’t great, you can use it either as an enhancement or a polyfill until there is broader support.

Be mindful of focus order

With grid and flexbox supported in all modern browsers, we can now easily reorder elements in CSS. This is pretty awesome, and you can achieve great layouts, but there is also a problem with changing the order visually without changing the order of the element itself.

By default, the focus order has to be meaningful, which we may impact here in a negative way.

Let me explain it with an example of a list of links:

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

By default, the visual order and the tab order of these links match. When using the tab key to navigate it will go from one to two and so forth. Now, let’s imagine we want to change the order visually and move the third element to the last position:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* visually move the third element to the last position */
li:nth-child(3) {
  order: 1;
}

See the full example here.

Now, the third element is visually in the last position, but the list order is still sequential. The visual order and the keyboard navigation order no longer match; this can make things unusable for keyboard users. You should always consider this when changing the order with CSS, and always test with your keyboard to confirm whether it still makes sense.

Conclusion

Building sites and apps with accessibility in mind is awesome. Styling focus indicators can greatly improve the usability for people using the keyboard. Make use of it and add some great looking focus styles to your site — many people will be very thankful.