Improving Keyboard Accessibility with Floating Focus
Tags: a11y, css, codenewbie, beginners
Published: 2021-02-25 04:36:06

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](https://engineering.q42.nl/floating-focus/). Some had browser compatibility issues, others could benefit from additional or improved styling. [Guido Bouman](@guidobouman) 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`](https://github.com/Q42/floating-focus-a11y). 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](https://codepen.io/lukekyl/pen/BaQmGga) 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.

{% codepen https://codepen.io/lukekyl/pen/BaQmGga default-tab=result %}

## 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!**


#### Additional Resources for Improving Focus and Keyboard Operability
- [Yale University Usability & Web Accessibility: Focus & Keyboard Operability ](https://usability.yale.edu/web-accessibility/articles/focus-keyboard-operability)
- [Rob Dodson's Dev.to Article: Managing focus for accessibility](https://dev.to/robdodson/managing-focus-64l)
- [CSS Tricks Article: :focus](https://css-tricks.com/almanac/selectors/f/focus/)
- [FloatingFocus GitHub Page](https://github.com/Q42/floating-focus-a11y)