Focus styles

Priority: 1

Introduction

Focus styling, provided by user agents by default, is used to indicate which element is currently being focused by keyboard. Typically, focus is achieved by pressing the Tab key. Pressing Tab should focus the next interactive element in the source, invoking the focus style.

Users who rely on the keyboard for page navigation include those with motor impairments due to long term ailments (such as rheumatism) or temporary injuries (like a broken wrist). Where focus styles are not provided, it is left for them to guess which element they have under focus, and is therefore ready to be activated. Their experience of using the interface will be confusing and frustrating, and they may give up on trying to achieve some tasks.

WCAG Criteria

2.4.7 Focus Visible (level AA)

Scope of the issue

Most of the Marketing site is missing focus styles. The Join site has a mixture of missing focus styles and somewhat inadequate default focus styles, and the Account dashboard relies almost entirely on default user agent styles.

Fixing the issue

Contrary to popular belief, it is possible to provide clear but attractive focus styles without JavaScript and without adversely affecting mouse users. On the Bulb sites, I recommend an animated outline property. Press the Tab key to invoke the focus style on the example link provided:

Code


a, button, input, textarea /* etc */ {
  outline: 0.125em solid transparent;
  outline-offset: 0.5em;  
}

:focus {
  outline-color: currentColor;
  outline-offset: 0.125em;
  transition: all 0.25s ease-out;
}

:hover:focus {
  outline: none;
}

The initial outline is invisible…
… and has a wide offset.
On focus, the outline takes the font color. In most cases this will be the correct (visible against the background) color for the context.
The outline-offset is shrunk via a transition, drawing the eye.
(optional) By concatenating :hover and :focus, the focus style is partially suppressed for mouse users who may find it distracting.