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. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 64 | Navigation sequence | The 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:
| Must | EN 301 549: 11.2.4.3 |
| 65 | Navigation sequence | In 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.. | Must | EN 301 549: 9.2.4.3, 11.2.4.3 |
| 66 | Navigation sequence | After 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. | Must | EN 301 549: 9.2.4.3, 11.2.4.3 |
| 67 | Navigation sequence | With 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. | Must | EN 301 549: 9.2.4.3, 11.2.4.3 |
| 68 | Navigation sequence | The 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. | Should | DIN EN ISO 9241-171: 9.3.18 |
| 69 | Web: Amount of navigation steps | It must be possible to skip areas of content that occur on several pages (see 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) |
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
You are welcome to send feedback by email about our handout!