This chapter contains general information about the application window layout, navigation between its various parts and advice for using the user interface efficiently. It is important mainly for the users of assistive technologies because it clarifies the meaning and relation of different page parts and navigation between them.

The application window consists of the main content, which is unique for every page/screen of the website/application and surrounding parts which typically repeat unchanged on all pages or screens.

The main content is always marked by the first level heading. Thus screen reader users can always get back to the beginning of the main content using the shortcut for this heading. There is no other first level heading on the page.

The cursor is always moved to the beginning of the main content after the page is loaded. So this is the starting point of navigation. The user will get to the main content of the current page by moving the cursor forward or to the controls such as menus or top bar by moving backward.

Apart from using headings to distinguish different parts of the page, some areas are also marked by so called ARIA landmarks, so modern assistive technologies will also allow navigation by these landmarks more comfortably.

The top bar is the narrow stripe by the top edge of the page. The bar contains the website title on its left side and some important control elements on its right side.

The available controls on the right side may depend on the currently logged in user and his/her privileges or on some other state of the application. However, normally it contains:

Screen reader users may get to the top bar most easily by jumping to the very top of the screen and then navigating by the TAB key through its items. Because all control elements in the top bar are represented by buttons (which usually have a dropdown menu) it is also possible to use screen reader button navigation shortcut (typically „b”).

There is also a keyboard shortcut to get to the first top bar control (usually the login control) from anywhere on the page. The shortcut is Ctrl-Shift-arrow up, but it doesn't seem to work on all systems because of conflicts with other browser/screen reader shortcuts. It was, however, verified to work well with Firefox/Orca and Safari/Voice Over. If it works in your case, it may be a faster alternative for top bar access.

The following sections describe different controls of the top bar.

If the site permits users logging in, the top bar will include the login control. The control is visually indicated by an icon of a human head.

If the user is currently logged in, the user's login name is displayed right from the icon. If not logged in, there is a button labeled “Log in”.

In both cases there is a dropdown menu control indicated by an icon of a small triangular arrow pointing down. Screen readers will announce the drop down menu control as “User actions” when logged in or „Login and registration” in the other case not. Pushing the button will open the drop down menu. If the user is logged in, the menu contains items for updating user's profile, changing the password and logging out. If not logged in, there are items to log in with an existing account, register a new user to create a new account and to renew a forgotten password.

The “Log in” button may be hidden on smaller displays to save space in which case the same action can be invoked from the dropdown menu. The same applies for the login name displayed at the control – if it is hidden, it can be found after opening the dropdown.

If there are multiple language variants of the current page, the top bar will also include a language selection control at its right edge. It allows switching between different language versions of the current page. The control is again created as a button with a drop down menu. The current language is indicated as the label of the button and activation of the button will open a drop down menu with all available language variants where each item switches to given language.

When visiting a multilingual page for the first time, the language is selected automatically according to user's browser settings. When the language is switched, however, the preferred language is remembered by the browser (in so called cookies).

Hierarchical menus are used as the primary means of navigation within a web site or application. The items at the top level of the hierarchy are presented as a set of horizontal tabs. Each tab may have a subordinate hierarchy of items, which is presented as a dropdown menu. Tabs which have a submenu can be recognized by an icon of a small triangular arrow pointing down. When such tab is pushed, the submenu opens.

The submenu of the currently active tab is displayed on the left side of the page, so it can be seen and accessed directly, without going through the dropdown. This is, however not possible on small screens where there is not enough space on the left side. Thus portable devices will not display the submenu this way and will display it as dropdown even for the current tab of the main menu.

The keyboard shortcut Ctrl-Shift-m will move the cursor to the menu, starting at the item corresponding to the currently displayed page. Alternatively the menu can be located by jumping to the top of the page and tabbing through the top bar down to the menu. From there on, menus can be efficiently navigated using just arrow keys.

The tabs of the top level menu can be navigated using left and right arrows. If the item has a submenu, the submenu can be entered by arrow down and further navigated up and down. If the submenu contains items of lower hierarchy levels, these subordinate levels can be arranged into a foldable tree. A foldable item can be unfolded by arrow right or folded by arrow left. Enter invokes the current menu item.

Complete overview of menu keyboard shortcuts:

  • arrow down - Move to the next visible item.
  • arrow up - Move to the previous visible item.
  • arrow right - If there is a folded submenu, unfold it. If already unfolded, jump to its first item.
  • arrow left - If there is an unfolded submenu, fold it (hide). If already folded, jump to the parent item in the hierarchy.
  • Shift + arrow down - Move to the next item of the same level (don't dive to submenus even if unfolded).
  • Shift + arrow up - Move to the previous item of the same level (don't dive to submenus even if unfolded).
  • Enter - Invoke the current item.
  • Escape - Jump out of the menu to the main content of the page.

Note for VoiceOver users: These shortcuts work correctly in VoiceOver only when the quick navigation mode is off. Quick navigation can be switched on and of by pressing left and right arrow keys at the same time.

Note for JAWS users: Before pressing Ctrl-Shift-m it is necessary to press the so called Pass Key Through shortcut - JAWS key + 3 (JAWS key is usually Insert or CapsLock).

If your system supports ARIA accessibility standards, it will automatically announce the position in the hierarchy and the available keyboard commands. If you are using older technologies, folding/unfolding menus may not work correctly. In this case it is possible to navigate the menus using the TAB key. If you need to get into folded areas, you may use the button labeled “Fold/unfold complete menu hierarchy” to make all items accessible by tabbing. Navigation is then less convenient, but at least possible. You will find this button as the last element in tabbing order at the very end of the menu.

Some sites may contain several complementary “windows” with additional information permanently displayed at every page in a form of so called panels. Panels are normally displayed on the right side of the window next to the main content on desktop computers (with larger displays) or at the bottom of every page below the main content on mobile devices with smaller screens.

In any case the panels follow after the main content in the order of page navigation for screen reader users. Each panel is marked by a heading of level three. Thus jumping to the end of the screen and navigating backwards by third level headings is an easy way to get directly to panels.

Panels are also marked by ARIA landmarks as so called „complementary content”. These landmarks can also be used for efficient navigation with some screen readers.