Synonyms: Tab sequence, focus order

See also: Use of the keyboar , Changes of context , Time limits

The navigation sequence decides the sequence in which the elements and areas to be focused with the keyboard receive the focus. Typically, this applies to the following navigation methods:

  • Navigating between the elements with the tab key,
  • Navigating within the elements with the arrow keys,
  • Navigating between areas (e.g. with the F6 key),
  • Quick navigation (e.g. with PAGE UP, END).

Operation

Permalink "Operation"
No.PropertyDescriptionClassificationReference
64Navigation sequenceThe navigation sequence must be such that the contents can be viewed in a meaningful sequence and the control elements can be accessed according to their task-appropriate processing sequence.

Note: This is achieved, for example:

  • when opening a modal dialog this receives the focus,
  • when closing a modal dialog, the focus is reset to the triggering element,
  • the buttons for submitting a form are located at the end of the form
MustEN 301 549: 11.2.4.3

65Navigation sequenceIn the case of elements which are operated with the arrow keys, the navigation must be limited to the element when using the arrow keys.

Note: This relates to, for example, radio button groups, selection lists, tabs, menus, toolbars..

MustEN 301 549: 9.2.4.3, 11.2.4.3
66Navigation sequenceAfter page updates which make a focus change necessary, the focus must be positioned so that the work can be continued in a consistent way.

For example: After deleting an element, the focus should be positioned on the previous or next element.

MustEN 301 549: 9.2.4.3, 11.2.4.3
67Navigation sequenceWith modal dialogs, the navigation must be limited to the dialog.

Note: The rest of the application can only be focused and operated when the modal dialog is closed.

MustEN 301 549: 9.2.4.3, 11.2.4.3
68Navigation sequenceThe navigation sequence should be appropriate for the work task.

Note 1: For German language applications, this usually means that the navigation should correspond to the reading sequence, and should take place from the top left to the bottom right.

Note 2: The navigation sequence should match in both navigation directions (forward and backward).

Note 3: It may be necessary for the visual sequence to be adjusted to meet this requirement.

ShouldDIN EN ISO 9241-171: 9.3.18
69Web: Amount of navigation stepsIt must be possible to skip areas of content that occur on several pages (see Practical tip: efficient keyboard navigation).MustEN 301 549: 9.2.4.1
70Change of contextNo loss of focus may occur during the keyboard navigation.MustEN 301 549: 9.3.2.1, 11.3.2.1
71Change of contextForm elements may not be subject to an unexpected loss of focus when changing their value (see Change of context).MustEN 301 549: 9.3.2.2, 11.3.2.2
72Change of contextWhen using the keyboard, the focus must be positioned correctly if an expected change of context occurs that has to be operated. Alternatively, the change of context must receive the keyboard focus after the current focus position (see change of context).MustEN 301 549: 9.2.4.3, 11.2.4.3
73Web: ConsistencyNavigation elements must be displayed in the same relative sequence on each page within the application and receive the keyboard focus (see Consistency).MustEN 301 549: 9.3.2.3
74Desktop: ConsistencyNavigation elements should be displayed in the same relative sequence on each screen within the application and receive the keyboard focus (see Konsistenz).ShouldWCAG 2.1: 3.2.3 (AA)

Practical tip: navigation sequence in Web applications

Permalink "Practical tip: navigation sequence in Web applications"

HTML

Permalink "HTML"

The correct navigation sequence should be controlled by the order of the elements in the source code. The tabindex=0 attribute should not be used. The autofocus attribute should only be used with caution, as the contents before the automatically focused element are only perceptible with difficulty for visually impaired or blind people. There are applications in which autofocus can be put to good use, however, e.g. on a login page for the focusing of the first input field. Further information: 6.6.3 The tabindex attribute - HTML Standard (whatwg.org), 6.6.7 The autofocus attribute - HTML Standard (whatwg.org)

ARIA

Permalink "ARIA"

The correct navigation sequence should be controlled by the order of the elements in the source code. The tabindex=0 attribute must be used for control elements that would not otherwise receive the keyboard focus. Elements that should be focusable by JavaScript but are not automatically in the TAB circuit are marked with tabindex=-1. This applies, for example, to buttons in toolsbars , Einträge in selection lists oder radio buttons within a group of radio buttons. In these cases, just one button, one list entry and/or one radio button is marked with tabindex=0 and all others are marked with tabindex=-1. Further information: Developing a Keyboard Interface | APG | WAI | W3C

Practical tip: efficient navigation in applications

Permalink "Practical tip: efficient navigation in applications"

If the current application window contains several focusable elements, users who depend on the use of a keyboard cannot navigate through the window efficiently because they have to use the TAB key to navigate through these elements. To allow for an efficient form of keyboard navigation, it is recommended that one or more of the following methods are implemented and documented in the Hilfe option:

  • Area navigation (e.g. with F6),
  • Skip links at the start of the window and/or before areas with several navigation steps,
  • keyboard shortcuts for frequently required functions and/or control elements,
  • Designing areas with several navigation steps so that they can be shown and hidden (e.g. Menu with sub-menus, tabs , accordion ),
  • Outsourcing of contents with several navigation steps to secondary screens (e.g. in dialog windows which can be opened separately),
  • Use of grouping elements that are navigated within using the arrow keys instead of the TAB key (e.g. toolbar , menu ),
  • with applications that do not support the virtuellen Cursor : Mode in which control elements receive the focus only.

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

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