Focus

The focus state is used to highlight focused elements when users are navigating the site by keyboard or other accessibility tools.


DO'S & DON'TS

  • Make sure focus is distinguishable through shape and color.
  • Use different styles for focus and selected states, e.g. selected filters.
  • Don’t only use color to indicate focus; make it accessible for colorblind users.
  • Avoid the browser's standard focus border. It's generally too subtle.

We have two different style options for focused elements. A focus border around the element or changed background color.

Two different focus style

Live examples

Try out the examples by using Tab on your keyboard.

Buttons

Links

This is a longer text to show how focus looks in a paragraph on multiple lines. It’s important to see how a link with focus border looks in a longer context.

This is a longer text to show how focus works on multiple lines. The text link changes background color when in focus.

Forms and search




Objects

Tab order

The tab order of a page shall follow a logical path through the page. Accomplish this by writing structurally good markup. Keep in mind components that show or hide elements, as they need to become tabbable when shown and vice versa.

Logotypes

Consider the logotype guidelines when choosing focus style. Many logotypes should not be placed on colored backgrounds.

Example

SVT Style Guide

Read more

Altering the Default Tab Order Using Tabindex at WebAIM (2014)