Synonyms: Focus, focus frame, focus appearance

See also:: Use of the keyboard , text cursor

The focus indicator displays which element currently has the keyboard focus (see DIN EN ISO 9241-161: 8.37).

The focus indicator is usually displayed with a border around the focused element. Other focus indicators are also permitted, provided that they meet the requirements, e.g.

  • Inverting of foreground and background color,
  • Changed background color,
  • Changing the size of the element,
  • Superimposing of a graphical element, such as a side bar.

In certain cases, several focus indicators can be displayed:

  • Example 1: When a selection list receives the focus, a focus indicator can be displayed around the entire list. A focus indicator must also be displayed with the current list entry.
  • Example 2: With a combined input field, the focus can be on the input field as well as on the selection list.
  • Example 3: If an interactive element receives the focus within a page area, then the page area can also be shown as focused.
  • Example 4: The title bars of all application windows that do not have the focus are shown grayed out.

In some cases, the focus indicator can be identical to the selection marker (i.e. the marking of the selected option, see Element status ), if the focused element is identical to the selected element:

  • Example 1: A selection list without multiple selection has a focus indicator on the focused list entry. This indicator can serve as a selection marker at the same time, as the focused list entry is identical to the selected list entry. If this selection list does not also have a focus indicator for the entire list, however, to be able to detect whether the selection list is focused, it is necessary to ensure that the selection marker in the focused state of the selection list differs clearly from the selection marker in the non-focused state of the selection list (e.g. minimum contrast ratio 3:1).
  • Example 2: A selection list without multiple selection has a focus indicator on the focused list entry, e.g. a border. This focus indicator is not used simultaneously as a selection marker. A different background color, for example, is used as the selection marker. When navigating through the list entries, both the focus indicator and the selection marker are moved. In this case, an additional focus indicator for the entire list or a differentiation of the selection marker in the focused and non-focused state is not necessary, as the focusing and selection can be perceived independently of each other.
  • Beispiel 3: A multiple selection list has a focus indicator that surrounds the entire list. Since the focused list entry does not match the selected list entries in the case of the multiple selection list, the focus indicator and selection marker must be marked separately for the list entries (e.g., as shown in example 2 with a border and a different background color).
186GeneralThe focus indicator must be visible at each navigation step.MustEN 301 549:,
187ContrastThe focus indicator must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549:
188ContrastThe elements must also have a contrast ratio of at least 4.5:1 for text and at least 3:1 for the content of graphics in the focused status.MustEN 301 549:,,,
189ConsistencyThe focus indicator should be clearly assignable to the focused element.MustEN 301 549:,
190VisibilityThe element must be scrolled into the visible area on receiving the focus so that both the element and its focus indicator are visible.

Note: This also applies when navigating the arrow keys through the list entries of a selection list, for example.

MustEN 301 549:
191SizeThe area of the focus indicator shall be at least as large as:
  • 1px times the circumference of the element or
  • 4px times the length of the shorter side.
ShouldWCAG 2.2

Use of the keyboard: focus indicator

Permalink "Use of the keyboard: focus indicator"

The change of the focus indicator between the elements is described in the use of the keyboard and navigation sequence sections. By default, the navigation takes place with the TAB key.

The change of the focus indicator within an element is described at the respective elements. The navigation within elements often takes place with the arrow keys.

Use of the pointing device: focus indicator

Permalink "Use of the pointing device: focus indicator"
Placing the focusLeft clickRequired
192PositionThe focused element must be communicated to the Accessibility API.MustEN 301 549:,,,
193Desktop: PositionThe size and position of the focused element must be communicated to the Accessibility API.

Note: This is important, for example, to ensure that screen magnifiers can display the focused element in the visible area and a focus highlighting.

MustEN 301 549:,
194OperationIt must be possible to position the focus with assistive technology (see Use of the keyboard).MustEN 301 549:,,,

Practical tip: focus indicator

Permalink "Practical tip: focus indicator"

The focus indicator must have sufficient contrast, and should be designed consistently at the same time. With applications that have different background colors, this can be achieved by using a two-color border (e.g. black and 05.15.2023 Page 68 of 317 white) that has sufficient contrast against each background. A two-color focus indicator is also useful with control elements on gradients or graphics.

For example: Two buttons on a color gradient from white to black. The top button is currently focused. The focus indicator consists of a black border (inside) and a white border (outside), which means that it always easy to see, regardless of the background color. It is the standard focus frame offered by Google Chrome.

Figure 13: Two-color focus indicator

Information about this article

You are welcome to send feedback by email about our handout!