Navigation sequence

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

modal dialog this receives the focus,

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

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

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

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.

Practical tip: efficient keyboard navigation). | Must | EN 301 549: 9.2.4.1 | | @!70 | Change of context | No loss of focus may occur during the keyboard navigation. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!71 | Change of context | Form elements may not be subject to an unexpected loss of focus when changing their value (see

Change of context). | Must | EN 301 549: 9.3.2.2, 11.3.2.2 | | @!72 | Change of context | When 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). | Must | EN 301 549: 9.2.4.3, 11.2.4.3 | | @!73 | Web: Consistency| Navigation elements must be displayed in the same relative sequence on each page within the application and receive the keyboard focus (see

Consistency). | Must | EN 301 549: 9.3.2.3 | | @!74 | Desktop: Consistency | Navigation elements should be displayed in the same relative sequence on each screen within the application and receive the keyboard focus (see

Konsistenz). | Should | WCAG 2.1: 3.2.3 (AA) |

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)

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

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!