Focus indicator

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).

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.

Accessibility API. | Must | EN 301 549:
9.4.1.2, 11.4.1.2, 11.5.2.13, 11.5.2.15 | | @!193 | Desktop: Position | The 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.

Use of the keyboard). | Must | EN 301 549:
9.4.1.2, 11.4.1.2, 11.5.2.14, 11.5.2.16 |

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.

Information about this article

Date:

16.04.2024

License:

CC-BY-SA 4.0

Version:

1.0

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