Logo with link to home page

CD

3.0.0

Add a container with clearfix class around logo component

The Confederation logo with the coat of arms and the four-language wordmark as well as the name of the organizational unit (department, public office, agency, or mission, or, alternatively, the title of the website) together form the designation of the website. The complete designation contains a link which takes the user back to the home page from any page of the website.

Department of the Environment, Transport, Energy and Communications

<header>
	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a></header>
<nav class="nav-main"></nav>

Accessibility navigation

2.1.8

added .access-keys for better accessibility
added #content to main page content
added #main-navigation to main page 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 -->
</ul>

Service navigation

CD

2.1.2

added h2.sr-only for more screen reader clarity

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.

Department of the Environment, Transport, Energy and Communications

<header>
	<section class="nav-services clearfix">
		<h2 class="sr-only">Services navigation</h2>
		<nav class="nav-service">
			<ul>
				<li><a href="#">Emergencies</a></li>
				<li><a href="#">Jobs</a></li>
				<li><a href="#">Media</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</section>

	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a></header>
<nav class="nav-main"></nav>

Site search

CD

2.1.2

added h2.sr-only for more screen reader clarity
added label before input for screen readers

The global search function allows the user to search the entire website. When the search box is clicked on, the element is enlarged to give the user more space to enter the search text.

On smartphones, the search function can be accessed via an icon in the Header.

Department of the Environment, Transport, Energy and Communications

<header>
	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a>
	<div class="mod mod-searchfield global-search global-search-standard">
		<form class="form-horizontal form-search pull-right">
			<h2 class="sr-only">Search</h2>
			<label for="search-field" class="sr-only">Search:</label>
			<input id="search-field" class="form-control search-field" type="text" placeholder="Search">
			<button class="icon icon--close icon--after search-reset" tabindex="0" role="button">
        <span class="sr-only">Clear</span>
      </button>
			<span class="icon icon--search"><span class="sr-only">Search</span></span>
			<div class="search-results">
				<div class="search-results-list"></div>
			</div>
		</form>
	</div>
</header>
<nav class="nav-main"></nav>

// You have to store all your data inside `searchData` and define it globaly
var searchData = ["Aargau", "Appenzell A. Rh.", "Appenzell I. Rh.",
  "Basel-Landschaft", "Basel-Stadt", "Bern", "Fribourg", "Genève",
  "Glarus", "Graubünden", "Jura", "Lucerne", "Neuchâtel", "Nidwalden",
  "Obwalden", "Schaffhausen", "Schwyz", "Solothurn", "St. Gallen",
  "Thurgau", "Ticino", "Uri", "Valais", "Vaud", "Zug", "Zurich"
];

Language Selection via a Link List

CD

3.0.0

added lang, title and aria-label attributes for accessibility
moved language states (active, disabled) to the link title and aria-label

2.5.0

added <span class="sr-only">disabled</span> for disabled accessibility

2.1.8

added <span class="sr-only">selected</span> for active accessibility

2.1.2

added h2.sr-only for more screen reader clarity

2.1.0

wrapped .nav-lang and .nav-service in <section class="nav-services clearfix"></section>

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.

Department of the Environment, Transport, Energy and Communications

<header>
	<section class="nav-services clearfix">
		<h2 class="sr-only">Language selection</h2>
		<nav class="nav-lang">
			<ul>
				<li><a href="#" lang="de" title="Deutsch" aria-label="Deutsch">DE</a></li>
				<li><a href="#" lang="fr" title="Français sélectionné" aria-label="Français sélectionné" class="active">FR</a></li>
				<li><a href="#" lang="it" title="Italiano" aria-label="Italiano">IT</a></li>
				<li><a href="#" lang="rm" title="Rumantsch" aria-label="Rumantsch">RM</a></li>
				<li><a href="#" lang="en" title="English disabled" aria-label="English disabled" class="disabled">EN</a></li>
			</ul>
		</nav>
	</section>

	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a></header>
<nav class="nav-main"></nav>

Topics A-Z

CD

2.1.2

added h2.sr-only for more screen reader clarity

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.

Department of the Environment, Transport, Energy and Communications

Themes A-Z
- Close
  - EDA
  - DEZA
  A
  
  B
  
  C
  
  D
  
  E
  
  F
  
  G
  
  H
  
  I
  
  J
  
  K
  
  L
  
  M
  
  N
  
  O
  
  P
  
  Q
  
  R
  
  S
  
  T
  
  U
  
  V
  
  W
  
  X
  
  Y
  
  Z
  
  a. Some content...
  
  b. Some content...
  
  c. Some content...
  
  d. Some content...
  
  e. Some content...
  
  f. Some content...
  
  g. Some content...
  
  h. Some content...
  
  i. Some content...
  
  j. Some content...
  
  k. Some content...
  
  l. Some content...
  
  m. Some content...
  
  n. Some content...
  
  o. Some content...
  
  p. Some content...
  
  q. Some content...
  
  r. Some content...
  
  s. Some content...
  
  t. Some content...
  
  u. Some content...
  
  v. Some content...
  
  w. Some content...
  
  x. Some content...
  
  y. Some content...
  
  z. Some content...
  Same as previous

<header>
	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a>
	<!-- Standard Bootstrap `navbar` structure with the `yamm` mega-menu library -->
	<nav class="navbar yamm yamm--select">
		<h2 class="sr-only">By Topics</h2>
		<ul>
			<!-- Init dropdown with the `pull-right` class if you want to have your Topics select on the right -->
			<li class="dropdown pull-right">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes A-Z <span class="icon icon--bottom"></span></a>
				<ul class="dropdown-menu">
					<!-- The `li` presence heritated from the classic dropdown structure, only one in that case -->
					<li>
						<!-- The `yamm-content` can contain any kind of content like tab, table, list, article... -->
						<div class="yamm-content container-fluid">

							<!-- The `yamm-close` should always be inside the `yamm-content` to close the mega-menu -->
							<div class="row">
								<div class="col-sm-12"><a href="#" class="yamm-close icon icon--after icon--close pull-right">Close</a></div>
							</div>

							<!-- The tab navigation -->
							<ul class="nav nav-tabs">
								<li class="active"><a href="#eda" data-toggle="tab">EDA</a></li>
								<li><a href="#deza" data-toggle="tab">DEZA</a></li>
							</ul>

							<!-- The tab content -->
							<div class="tab-content">

								<div class="tab-pane active" id="eda">

									<!-- The inside-tab navigation -->
									<ul class="nav nav-tabs nav-tabs-alphabet">
										<li class="active"><a href="#eda-tab-a" data-toggle="tab">A</a></li>
										<li><a href="#eda-tab-b" data-toggle="tab">B</a></li>
										<li><a href="#eda-tab-c" data-toggle="tab">C</a></li>
										<li><a href="#eda-tab-d" data-toggle="tab">D</a></li>
										<li><a href="#eda-tab-e" data-toggle="tab">E</a></li>
										<li><a href="#eda-tab-f" data-toggle="tab">F</a></li>
										<li><a href="#eda-tab-g" data-toggle="tab">G</a></li>
										<li><a href="#eda-tab-h" data-toggle="tab">H</a></li>
										<li><a href="#eda-tab-i" data-toggle="tab">I</a></li>
										<li><a href="#eda-tab-j" data-toggle="tab">J</a></li>
										<li><a href="#eda-tab-k" data-toggle="tab">K</a></li>
										<li><a href="#eda-tab-l" data-toggle="tab">L</a></li>
										<li><a href="#eda-tab-m" data-toggle="tab">M</a></li>
										<li><a href="#eda-tab-n" data-toggle="tab">N</a></li>
										<li><a href="#eda-tab-o" data-toggle="tab">O</a></li>
										<li><a href="#eda-tab-p" data-toggle="tab">P</a></li>
										<li><a href="#eda-tab-q" data-toggle="tab">Q</a></li>
										<li><a href="#eda-tab-r" data-toggle="tab">R</a></li>
										<li><a href="#eda-tab-s" data-toggle="tab">S</a></li>
										<li><a href="#eda-tab-t" data-toggle="tab">T</a></li>
										<li><a href="#eda-tab-u" data-toggle="tab">U</a></li>
										<li><a href="#eda-tab-v" data-toggle="tab">V</a></li>
										<li><a href="#eda-tab-w" data-toggle="tab">W</a></li>
										<li><a href="#eda-tab-x" data-toggle="tab">X</a></li>
										<li><a href="#eda-tab-y" data-toggle="tab">Y</a></li>
										<li><a href="#eda-tab-z" data-toggle="tab">Z</a></li>
									</ul>

									<!-- The inside-tab content -->
									<div class="tab-content">
										<!-- All `tab-pane` can contain any kind of content like table, list, article... -->
										<div class="tab-pane active" id="eda-tab-a">a. Some content...</div>
										<div class="tab-pane" id="eda-tab-b">b. Some content...</div>
										<div class="tab-pane" id="eda-tab-c">c. Some content...</div>
										<div class="tab-pane" id="eda-tab-d">d. Some content...</div>
										<div class="tab-pane" id="eda-tab-e">e. Some content...</div>
										<div class="tab-pane" id="eda-tab-f">f. Some content...</div>
										<div class="tab-pane" id="eda-tab-g">g. Some content...</div>
										<div class="tab-pane" id="eda-tab-h">h. Some content...</div>
										<div class="tab-pane" id="eda-tab-i">i. Some content...</div>
										<div class="tab-pane" id="eda-tab-j">j. Some content...</div>
										<div class="tab-pane" id="eda-tab-k">k. Some content...</div>
										<div class="tab-pane" id="eda-tab-l">l. Some content...</div>
										<div class="tab-pane" id="eda-tab-m">m. Some content...</div>
										<div class="tab-pane" id="eda-tab-n">n. Some content...</div>
										<div class="tab-pane" id="eda-tab-o">o. Some content...</div>
										<div class="tab-pane" id="eda-tab-p">p. Some content...</div>
										<div class="tab-pane" id="eda-tab-q">q. Some content...</div>
										<div class="tab-pane" id="eda-tab-r">r. Some content...</div>
										<div class="tab-pane" id="eda-tab-s">s. Some content...</div>
										<div class="tab-pane" id="eda-tab-t">t. Some content...</div>
										<div class="tab-pane" id="eda-tab-u">u. Some content...</div>
										<div class="tab-pane" id="eda-tab-v">v. Some content...</div>
										<div class="tab-pane" id="eda-tab-w">w. Some content...</div>
										<div class="tab-pane" id="eda-tab-x">x. Some content...</div>
										<div class="tab-pane" id="eda-tab-y">y. Some content...</div>
										<div class="tab-pane" id="eda-tab-z">z. Some content...</div>
									</div>
								</div>

								<div class="tab-pane" id="deza">
									<p>Same as previous</p>
								</div>

							</div>
							<!-- Main tab content end -->

						</div>
						<!-- `yamm-content` end -->
					</li>
					<!-- Dropdown `li` end -->
				</ul>
				<!-- Dropdown `ul` end -->
			</li>
			<!-- Navbar item end -->
		</ul>
		<!-- Navbar list end -->
	</nav>
	<!-- Navbar end -->

</header>
<nav class="nav-main"></nav>

Treecrumb Federal Administration

CD

2.5.0

modified markup of dropdown list. Please refer to how it is in the example below

2.1.2

added h2.sr-only for more screen reader clarity

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.

Department of the Environment, Transport, Energy and Communications

<header>
	<div class="clearfix">
		<!-- Standard Bootstrap `navbar` structure with the `treecrumb` class -->
		<nav class="navbar treecrumb pull-left">
			<h2 class="sr-only">Orientation in the website</h2>
			<ul class="nav navbar-nav">
				<!-- Treecrumb dropdown element -->
				<li class="dropdown">
					<!-- Dropdown label -->
					<a id="admin-dropdown" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="icon icon--right"></span>The federal Council</a>
					<!-- Dropdown list element -->
					<ul class="dropdown-menu" role="menu" aria-labelledby="admin-dropdown">
						<!-- Dropdown title, can ben place anywhere in the list -->
						<li class="dropdown-header">
							<a href="#">The federal Council</a>
							<ul>
								<li><a href="#">BK: Schweizerische Bundeskanzlei</a></li>
								<li><a href="#">EDA: Eidgenössisches Departement für auswärtige Angelegenheiten</a></li>
								<li><a href="#">EDI: Eidgenössisches Department des Innern</a></li>
								<li><a href="#"><strong>EJPD: Eidgenössisches Justiz- und Polizeidepartment</strong></a></li>
								<li><a href="#">VBS: Eidgenössisches Department für Verteidigung, Bevölkerungsschutz und Sport</a></li>
								<li><a href="#">EVD: Eidgenössisches Volkswirtschaftsdepartement</a></li>
								<li><a href="#">UVEK: Eidgenössisches Department für Umwelt, Verkehr, Energie und Kommunikation</a></li>
							</ul>
						</li>
					</ul>
				</li>

				<li class="dropdown">
					<a href="#" id="service-dropdown" class="dropdown-toggle" data-toggle="dropdown"><span class="icon icon--right"></span> Departement: EDI</a>
					<ul class="dropdown-menu" role="menu" aria-labelledby="service-dropdown">
						<li class="dropdown-header">
							<a href="#">Departement: EDI</a>
							<ul>
								<li><a href="#">DEZA: Direktion für Entwicklung und Zusammenarbeit</a></li>
								<li><a href="#">Schweizer Beitrag an die erweiterte EU</a></li>
								<li><a href="#">Integrationsbüros</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>

	<a href="#" class="brand hidden-xs" title="Back to home">
    <img src="../img/logo-CH.svg" onerror="this.onerror=null; this.src='../img/logo-CH.png'" alt="Back to home" />
    <h1>Department of the Environment, Transport, Energy and Communications</h1>
  </a></header>
<nav class="nav-main"></nav>

Swiss Confederation Web Guidelines

Swiss Confederation Web Guidelines

Header

Logo with link to home page

Department of the Environment, Transport, Energy and Communications

Accessibility navigation

Service navigation

Department of the Environment, Transport, Energy and Communications

Site search

Department of the Environment, Transport, Energy and Communications

Language Selection via a Link List

Department of the Environment, Transport, Energy and Communications

Topics A-Z

Department of the Environment, Transport, Energy and Communications

Treecrumb Federal Administration

Department of the Environment, Transport, Energy and Communications

Navigation

Search

Header