Indicating the focused element

Focus is important for keyboard navigation #

The currently focused element on a website, which might be a link, a form field, or a button, must visually indicate its focus state. The indication of the focus state will improve or even enable keyboard navigation.

Without seeing what interactive element has the focus it´s impossible to navigate a website with the keyboard. For a keyboard user that situation is comparable to removing the mouse cursor for mouse users.

On a page, at any given time, there is one element that has the focus. Directly after loading the page, it is probably the document, but once you start to click or tab, it will be one of the aforementioned interactive elements.

Do not disable the focus outline #

By default, a browser will indicate focus with an outline CSS style, which can be changed. Sometimes web designers remove the outline to make the site design more elegant without disturbing outlines. I´m guilty of having done it many times.

/* DON´T DO THAT */
*:focus {
outline: none;
}

How to style the focus indication #

Styling the outline is the preferred method to indicate focus as opposed to styling border or background. outline doesn´t affect the box model, while border does, which means outline will not change the position of adjacent elements and is therefore better than adjusting the border. Also, changing the background for focused elements wouldn´t work for images.

The contrast ratio of the outline against the background must be at least 3:1, according to WCAG 2.1 Non-text Contrast – Level AA. The contrast of colors can be checked with the WebAIM Contrast Checker. Ideally the outline should be solid and thick enough to attract attention.

Here is how I do it: I´m first resetting the style by disabling the outline.

* {
outline: none;
}

Then, I´m styling the outline for any element that can gain focus. Depending on the website, it might sometimes be that the outline will partially be hidden by other site elements. To overcome that in some cases, I´m giving the focused element a position and a z-index.

*:focus {
outline: 3px solid yellow;
outline-offset: 2px;
position: relative;
z-index: 11111;
}

References #

  1. Mozilla Hacks, Hidde de Vries, Indicating focus to improve accessibility
  2. WebAIM, Jared Smith, The plague of outline:0
  3. WebAIM, Contrast Checker.
  4. CSS-Tricks, Sara Cope, outline
  5. MDN Web Docs, The box model