Accessibility navigation

The accessibility navigation has to be placed right after the body tag. It is used to give quick access to pages and page areas. It is invisible, except when the link is focused.

Note: Depending on your browser, the accessibility links in the example are displayed after multiple tab presses only. This is due to the webguidelines page using an accessibility navigation itself.

<ul class="access-keys">
	<!-- Link to home page -->
	<li><a href="index.html" accesskey="0">Homepage</a></li>
	<!-- Link to main navigation -->
	<li><a href="#main-navigation" accesskey="1">Main navigation</a></li>
	<!-- Link to page content -->
	<li><a href="#content" accesskey="2">Content</a></li>
	<!-- Link to contact page -->
	<li><a href="contact.html" accesskey="3">Contact page</a></li>
	<!-- Link to sitemap page or page area -->
	<li><a href="sitemap.html" accesskey="4">Sitemap</a></li>
	<!-- Link to search field -->
	<li><a href="#search-field" accesskey="5">Search</a></li>
	<!-- Other smart links can be added for main website functionalities -->

Service navigation


The service navigation is positioned at the top right of the header next to the language selection. It contains links that are of overriding importance (e.g. Contact, Jobs, Media and Contact). Ideally, there should be three, but in no case should there be more than five links in the service navigation.

On mobile devices the links in the service navigation are moved to the footer.

The languages available are shown as links, placed side by side, at the top right of the header. For this purpose their two-digit abbreviations as per ISO 639-2 are used (e.g. German: DE, French: FR, Italian: IT, Romansh: RM, English: EN).

The information and services of the Federal Administration in the web are provided in at least the three official Swiss languages: German, French, and Italian. Romansh, English and other languages are optional and dependent on the requirements of the individual organizational unit and its target groups.

The following rules apply for the language navigation:

  • German, French and Italian are mandatory. Therefore the abbrevations DE, FR and IT have to be present on each page.
  • The active language is indicated with a light grey background.
  • Inactive languages are indicated as disabled with a light-grey text colour.
  • The abbrevations for Romansh (RM) and English (EN) are shown only when the corresponding content is available.
  • Pages which are not translated can either be omitted or shown as available in the other languages, as in Swiss Embassies (German, French, Italian).

These rules apply for smartphones as well.

On smartphones the language selection is always included in a drawer section above the header. This section is hidden automatically as soon as the user scrolls down. If the user scrolls back all the way to the top, the drawer with the language selection reappears.

Topics A-Z


The topics A-Z search function is an alternative means of accessing the contents of the website. The sub-topics of website can be selected from an alphabetical catalog.

The topics A-Z section is positioned on the right-hand side of the header. When it is clicked on, a flyout opens which contains an A-Z tab navigation. The topics can also be grouped in other tabs, e.g. according to organizational unit.

On smartphones, the A-Z navigation is accessed via an icon together with the search function.

The treecrumb navigation shows the position of the current website within the context of all the websites of the Federal Administration. It also serves as an efficient means of accessing information across departments.

When closed, the treecrumb navigation presents the hierarchical organization of the Federal Administration as a path. When a hierarchical level is clicked on, a menu opens with a collection of links pertinent to the selected hierarchical level.

On smartphones, the treecrumb navigation is omitted.