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 inputs (<input>) and the select element (<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? No, there are many users relying 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 U.S alone there are about 20 million people who have difficulty lifting or grasping and many of them use a keyboard instead of a mouse.
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 also prefer to use the keyboard to navigate on the web.
People with limited mobility
Some 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 is when changing colors you should always check if 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.
:focus-within — how to style the parent element of a focusable element
You want to style the parent element of a focused element? Great, there is the :focus-within CSS pseudo-class for doing exactly that. Browser support is pretty solid and it is 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.
Don’t show focus styles when interacting with a mouse/pointer — the :focus-visible pseudo class
Sometimes using :focus styles can also have a side-effect for the user experience of mouse/pointer users. Take an image gallery with previous/next controls as an example. If a user clicks on one of these buttons, they will get focused and therefore 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.
As browser support is still not that great, you either use it as an enhancement or you can also use a polyfill until there is broader support.
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;
}
Now, the third element is visually in the last position, but the tab order is still One, Two and Three. The visual order and the keyboard navigation order don’t match anymore — 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 if 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.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
The post Why you should use focus styles appeared first on LogRocket Blog.
Top comments (0)