When it comes to creating accessible websites it is important to note that many users navigate the web through the use of a keyboard. Instead of clicking around the site with a mouse, these users navigate via the keyboard by using the "tab" key. When an HTML element within a website is able to handle keyboard input, that element is said to have focus. Only one HTML element can have focus at one time, and users navigate between these elements by "tabbing" through them.
What is :focus and why should we manage it?
The elements that can recieve focus include:
-
<a href="">Link</a>tags -
<form>elements and buttons - any element that include
tabindex
Not all of the users that navigate through a website by "tabbing" through focus elements are blind users, but many are impaired in ways that including additional visual queues could help them navigate more effectively. Wouldn't it be nice if, while these users are "tabbing" through, these focus items animated from one item to the next, adding a visual queue to where the next item in focus is located. This idea has been created in a few different forms, but I wanted to bring up a newer open source library that works across all browsers: FloatingFocus.
Introducing FloatingFocus
As multiple options have come around to improve the way the standard focus styling and operability works, none seemed to be as complete as the Dutch tech agency Q42 has hoped. Some had browser compatibility issues, others could benefit from additional or improved styling. Guido Bouman and the team at Q42 decided they could make something that makes both the end user and the design team happy, and came up with the library titled FloatingFocus. The result is an easy to implement new tool that automatically finds focus items, giving them improved styling and animation to display when they are "tabbed" too and from.
The following steps show you how to add FloatingFocus to your own project, and include only a few simple lines of JS and CSS.
NPM Import
First we will import the package into our project. We then need to instantiate it to run FloatingFocus in our app.
import FloatingFocus from '@q42/floating-focus-a11y';
new FloatingFocus(containerElement);
// containerElement is an optional parameter which defaults to `document.body` when removed
CSS
We then need to add the following to our CSS file. Some of these styles are optional, so look at the comments or try with and without to decide if you want them in our app.
/* Hide all default focus states if a mouse is used, this is completely optional of course */
*:focus {
outline: none;
}
/* Default outline value, which will be applied to all elements receiving focus, this is a required step. */
/* The .focus class is used by the focus target, more below. */
.floating-focus-enabled :focus, .floating-focus-enabled .focus {
outline: dodgerblue solid 2px;
outline-offset: 8px;
}
/* Give all buttons a green focus state instead of dodgerblue, this is optional in case it's needed. */
.floating-focus-enabled [type="button"]:focus {
outline-color: green;
outline-offset: 4px;
}
Example
Below is a CodePen example so you can see what FloatingFocus looks like when implemented. To see the library in action, click within the CodePen example and "tab" a few times between focus items.
Conclusion
Accessibility is an important factor in web development, and all users should be considered as you are building a new website or application. FloatingFocus helps assist users navigating your website with a keyboard by clearly displaying and animating which item has the focus state across the web page they are viewing. I hope this blog post gives you ideas on how you want to improve keyboard accessibility in your projects!
Do you think about focus while developing your front end user experience? Do you have any tips or favorite tools for improving keyboard accessibility? Let me know in the comments!
Top comments (0)