Logo mit Link auf die Startseite

CD

3.0.0

Add a container with clearfix class around logo component

Das Bundeslogo mit Wappen und viersprachiger Wortmarke, sowie die Bezeichnung der Organisationseinheit (Departement, Amt, Direktion oder Vertretung) bilden die Kennzeichnung einer Website. Die gesamte Kennzeichnung ist mit einem Link hinterlegt, der den Anwender von jeder Seite der Website zurück auf die Startseite bringt.

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>

Barrierefreie Navigation

2.1.8

added .access-keys for better accessibility
added #content to main page content
added #main-navigation to main page navigation

Die barrierefreie Navigation wird direkt nach dem body-Tag platziert. Sie wird benötigt, um den Usern mittels Access-Keys rasch Zugang zu bestimmten Services oder zu geben. Die barrierefreie Navigation ist nicht sichtbar solange kein Link fokussiert ist.

Hinweis: Je nach Browser werden die Links im Beispiel erst nach mehrmaligem Tab-Drücken sichtbar. Dies liegt daran, dass die Webguidlines-Seite selber eine barrierefreie Navigation verwendet.

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

Servicenavigation

CD

2.1.2

added h2.sr-only for more screen reader clarity

Die Service-Navigation ist oben rechts im Header neben der Sprachwahl platziert und beinhaltet Links, die von übergeordneter Bedeutung sind (z.B. Kontakt, Jobs, Medien und Kontakt). Es sollten idealerweise drei aber auf keinen Fall mehr als fünf Links in der Service-Navigation angeboten werden.

Auf Smartphones wird die Service-Navigation in den Footer verschoben.

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"
];

Sprachwahl

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>

Mittels Sprachwahl kann die Sprache der aktuellen Website gewechselt werden. Sie zeigt alle verfügbaren Sprachen mit zweistelligen Abkürzungen nach ISO 639-2/3 (z.B. Deutsch = DE, Französisch = FR usw.) oben rechts im Header an.

Regeln für die Sprachnavigation:

Die Sprachen DE, FR und IT sind obligatorisch. Sie werden auf allen Seiten angezeigt. Dies auch dann, wenn ein Inhalt in nur einer dieser Sprachen vorhanden ist.
Die Sprache RM und EN werden nur angezeigt, wenn es Inhalte in diesen Sprachen gibt.
Die aktive Sprache wird mit einem hellgrauen Hintergrund gekennzeichnet.
Inaktive Sprachen erscheinen in hellgrauer Schrift
Die Kürzel werden auf allen Ausgabegeräten im Header nebeneinander platziert.
Die Platzierung der Sprachwahl in einem Dropdown-Menu ist untersagt.
Seiten, die nicht übersetzt sind, können als in einer andern Sprache verfügbar angezeigt werden.

Diese Regeln gelten auch für Smartphones.

Auf Smartphones wird die Sprachwahl in einem Bereich oberhalb des Headers eingebunden. Sobald nach unten gescrollt wird, wird dieser Bereich ausgeblendet. Wird ganz nach oben gescrollt, erscheint der Bereich mit der Sprachwahl wieder.

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>

Themen A-Z

CD

2.1.2

added h2.sr-only for more screen reader clarity

Das Themen A-Z stellt ein alternativer Zugang zu den Inhalten der Website dar. Die Unterthemen der Website können aus einem alphabetisch geordneten Katalog ausgewählt werden.

Das Themen A-Z ist im rechten Bereich des Headers platziert. Bei einem Klick darauf öffnet sich ein Flyout, das eine A-Z-Tab- Navigation enthält. Die Themen können in weiteren Tabs, z.B. nach Organisationseinheiten, gruppiert werden.

Auf Smartphones wird die A-Z-Navigation zusammen mit der Suche über ein Icon im Header aufgerufen. Die Unterteilung eines Themen A-Z in Bereiche, die über eine Reiternavigation erschlossen werden, ist unerwünscht.

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 Bundesverwaltung

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

Die Treecrumb-Navigation ordnet die aktuelle Website in den Kontext aller Websites der Bundesverwaltung ein. Zudem dient sie der effizienten departementsübergreifenden Erschliessung. Die Treecrumb-Navigation beginnt mit „Der Bundesrat".

Im geschlossenen Zustand stellt sie die Einordnung der Site in die Organisation der Bundesverwaltung als Pfad dar. Durch Klicken auf eine der Hierarchiestufen öffnet sich ein Menü, welches eine Linksammlung im Kontext der gewählten Hierarchiestufe auflistet.

Auf Smartphones fällt die Treecrumb-Navigation weg.

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>

Richtlinien für das Webdesign Bund

Richtlinien für das Webdesign Bund

Kopfbereich

Logo mit Link auf die Startseite

Department of the Environment, Transport, Energy and Communications

Barrierefreie Navigation

Servicenavigation

Department of the Environment, Transport, Energy and Communications

Site search

Department of the Environment, Transport, Energy and Communications

Sprachwahl

Department of the Environment, Transport, Energy and Communications

Themen A-Z

Department of the Environment, Transport, Energy and Communications

Treecrumb Bundesverwaltung

Department of the Environment, Transport, Energy and Communications