Sie sind auf Seite 1von 68

Einführung

Die Bundesregierung wird in ihrer Gesamtheit wahrgenommen.


Deshalb tritt sie mit ihren Ressorts visuell einheitlich und geschlossen auf –
unabhängig vom Medium. Dieser Styleguide beinhaltet die Übertragung
der für den Printbereich vereinbarten Gestaltungsrichtlinien auf die Online-
Auftritte der Bundesregierung und ihrer Ressorts. Ziel ist die einheitliche
und benutzerfreundliche Gestaltung der Internetpräsenzen und Online-
Medien der Bundesregierung, ohne individuelle Gestaltungsmöglichkeiten
zu sehr einzuschränken.
Der Online-Styleguide der Bundesregierung gilt für das Bundes-
kanzleramt, das Presse- und Informationsamt der Bundesregierung und die
Bundesministerien. Die Ministerien entscheiden, welche nachgeordneten
Behörden den Styleguide anwenden müssen bzw. können. Der Styleguide
richtet sich an Mediendesign-Agenturen.
Das Corporate Design der Bundesregierung hat feststehende Basis-
elemente, die unabhängig vom jeweiligen Medium gelten und in den Online-
Auftritten an technische Gegebenheiten angepasst sind:
die stets oben links positionierte Bildwortmarke, ein nach Primär-
und Sekundärfarben gestuftes Farbspektrum und einheitliche Schriften.
Die Basiselemente werden einheitlich auf den Websites der
Bundesregierung eingesetzt und tragen so zu einem gemeinsamen „Look
and Feel“ der Online-Medien bei. Daneben gibt es einen Spielraum, der den
Anforderungen der unterschiedlichen Medien in ihrer Nutzung und Hand-
habung Rechnung trägt.
Die Gestaltungsfläche ist in einen Logo-, Identitäts-, Service-, Navi-
gations- und einen Contentbereich aufgeteilt, deren Anordnung durch den
Styleguide definiert ist.
Die im Corporate Design der Bundesregierung verwendeten und
mit ihren Positionen definierten Gestaltungselemente erleichtern die Hand-
habung und Orientierung auf den einzelnen Websites.
Die Farbwahl einer Internetpräsenz orientiert sich in ihrer Anmu-
tung an der Thematik und ihren Inhalten. Die Farben sind einerseits dem
Corporate Design unterworfen, bieten aber zusammen mit der Bildwahl, z. B.
im Identitätsbereich, genügend Spielraum für die individuelle Gestaltung
des Betreibers.
Als Maßeinheiten für die Positionierung und die Größenangaben
von Layoutelementen werden die relativen Einheiten Pixel (px), M-höhe (em)
und Prozent (%) verwendet. Die Angaben sind für eine Bildschirmauflösung
1024 px x 768 px optimiert.
Das Informationsangebot der Bundesregierung und ihrer Ressorts
im Internet ist gemäß dem Gleichstellungsgesetz vom 01. 05. 2002 spätestens
ab dem 31.12. 2005 behindertengerecht, also barrierefrei zugänglich anzu-
bieten.
Online-Medien unterliegen einem rasanten technischen Fort-
schritt. Auch für den Online-Styleguide der Bundesregierung sind deshalb
kurzfristige Änderungen im Detail nicht ausgeschlossen. Im Internet unter
http://styleguide.bundesregierung.de/ kann stets die aktuelle Version eingese-
hen werden.
Grundlagen
6 Grundlagen

Grundlagen
Die folgenden Gestaltungsvorgaben wurden entwickelt, um ein
optimales Erscheinungsbild bei einer Bildschirmauflösung von 1024 px x 768 px
zu gewährleisten.
Hierbei wird davon ausgegangen, dass das Browserfenster im Bild-
schirm füllend dargestellt und keine so genannten Y Sidebars (zusätzliche,
senkrechte Browserleisten, z. B. „Favoriten“ beim Internet Explorer) geöffnet
sind.
Eine Umsetzung von parallelen Versionen eines Angebots für ver-
schiedene Auflösungen ist nicht notwendig.
Im Kapitel „Anwendungsbeispiele“ wird der gestalterische Spiel-
raum der Corporate-Design-Richtlinien anhand beispielhafter Screenshots
visualisiert.

Gestaltungsfläche
Die Gestaltungsfläche ist in ein Grundraster mit Rastereinheiten
(RE) von jeweils 28 px x 20 px (Breite x Höhe) unterteilt. Gestalterisch wird
hier, auf Basis der empfohlenen Bildschirmauflösung von 1024 px x 768 px,
von einer inneren Browserfenster-Breite von 952 px ausgegangen.
Gemäß den Vorgaben zur Barrierefreiheit sollte bei der Gestaltung
und Programmierung eines Online-Angebotes aber darauf geachtet werden,
dass die Webseiten unabhängig von Bildschirmauflösungen, Browserfenster-
Größen oder eingestellter Schriftgröße eines Nutzers gut funktionieren und
ansprechend aussehen.

Der Styleguide für Online-Medien der Bundesregierung ist im Internet unter


http://styleguide.bundesregierung.de zu erreichen
Dies bedeutet, dass sich die Breite der Gestaltungsfläche prinzipiell
nach der Browserfenster-Größe des Nutzers richtet. Die Browserfenster-Größe
muss von der tatsächlichen Bildschirmauflösung unterschieden werden, da
der Nutzer die Größe seines Browserfensters unabhängig von der Bildschirm-
auflösung seines Monitors individuell bestimmen kann. Im Übrigen ist zu be-
rücksichtigen, dass viele Nutzer noch über Bildschirme von nur 800 px Breite
verfügen.
Bei der Seitenprogrammierung sollte daher darauf geachtet wer-
den, dass horizontale Bildlaufleisten, sog. Y Scrollbars, erst dann erscheinen,
wenn die äußere Browserfensterbreite kleiner als 800 px ist. Es kann zudem
eine Maximalbreite angegeben werden, um eine Zeilenlänge von mehr als
70 Zeichen in Fließtexten zu vermeiden.
Eine vertikale Begrenzung ist nicht definiert, da die Anordnung
und Länge der Seiten von der Struktur und Darstellungsweise ihrer Inhalte
abhängt.
Geht die Gestaltung in der Vertikalen stark über den sichtbaren Be-
reich hinaus, sollten die Inhalte durch Y Sprungmarken angemessen geglie-
dert werden.

Die Breite der Gestaltungsfläche, ausgehend von einem 1024 px breiten Browserfenster
Anmerkung: Für die Texte in allen schematischen Darstellungen wurde die Schrift Verdana verwen-
det. Sie wurde dem Online-Einsatz entsprechend nicht geglättet.
8 Grundlagen

Raster
Der Raster wird immer, beginnend an der linken oberen Ecke, von
oben nach unten und von links nach rechts aufgebaut.
Anmerkung: Da in den Illustrationen die Vermaßungslinie 1 px
misst, wird die linke und obere Linie einbezogen. Die rechte untere Linie
liegt außerhalb der zu vermaßenden Fläche.

Grundraster
Für die Online-Medien der Bundesregierung
wurde der Raster, dem Pixelmaß entspre-
chend, modifiziert. Die Abstände der hori-
zontal verlaufenden Rasterlinien betragen
1,75 em (28 px), die der vertikalen 1,25 em (20
px). Der Raster richtet sich an der oberen lin-
ken Ecke der Gestaltungsfläche aus. Eine Ra-
stereinheit wird nachfolgend RE genannt.
Der Grundraster dient als Grundlage zur Aus-
richtung der unflexiblen Bereiche und Farb-
flächen.

Empfehlungen für Spaltenraster zur Ausrich-


tung von Bild und Text finden Sie im Kapitel
„Contentbereich“.

Der Grundraster wird aus Rastereinheiten (RE) von 1,75 em x 1,25 em (28 px x 20 px) gebildet.

Ausrichtungsraster
Für die Anordnung feiner und detaillierter
Gestaltungselemente wird der Grundraster
durch einen zusätzlichen Ausrichtungsraster
ergänzt. Er beträgt 4 px x 4 px und beginnt
deckungsgleich mit dem Grundraster links
oben.

Zur feinen Abstufung dient ein Ausrichtungsraster von 0,25 em x 0,25 em (4 px x 4 px).
Screen-Aufteilung
Die Gestaltungsfläche wird in fünf konsistent platzierte und in ih-
ren Funktionen einheitliche Bereiche aufgeteilt. Dies erleichtert die Orien-
tierung in den unterschiedlichen Präsenzen der Bundesregierung und trägt
zu ihrer Wiedererkennung in erheblichem Maße bei. Die fünf Bereiche sind:
- der Logobereich für die Bildwortmarke
- der Identitätsbereich, ggf. mit der obersten Navigationsebene
- der Navigationsbereich mit den Navigationsebenen, ggf. auch den
hierarchisch tieferen Ebenen
- der Servicebereich mit Servicefunktionen der Internetpräsenz
- der Contentbereich für die Text- und Bildinhalte.

Beispiele für die Aufteilung der Gestaltungs-


fläche (siehe auch Kapitel „Anwendungsbei-
spiele“)

Detaillierte Angaben über die Gestaltung


und Funktion dieser Bereiche folgen in den
Kapiteln „Seitenaufbau“ und „Zusatzinfor-
mationen“ (Frames, Auffindbarkeit von Web-
Inhalten).

Die Aufteilung der Gestaltungsfläche in Bereiche


10 Grundlagen

Farben
Ein wesentliches Basiselement des Corporate Designs ist das Farb-
klima. Ein ausgewähltes Farbklima ist eine Farbkombination, die zur unver-
wechselbaren Gesamtwirkung innerhalb des Corporate Designs beiträgt.
Dabei steht keine Farbe für sich allein, sondern ist immer von einer anderen
Farbe umgeben.
Das Corporate Design verfügt über mehrere Farbklimata für
unterschiedliche Einsatzgebiete. Für jedes Farbklima gilt, dass für Akzentuie-
rungen innerhalb der Internetpräsenz reine und klare Farben gewählt
werden. Farbflächen sind aus den gedeckten Farbtönen eines Klimas gewählt.
Die Verknüpfung des Identitäts- und des Navigationsbereiches
wird durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visua-
lisiert. Der Contentbereich, Träger der Hauptinformationen, wird von den
Farbflächen gehalten und hebt sich durch helle oder weiße Hintergrund-
farben ab.
Die Farbwahl einer Internetpräsenz orientiert sich in ihrer Anmu-
tung an der Thematik und ihren Inhalten.
Grundsätzlich sollte die Gestaltungsfläche mittig oder linksbündig
auf einer mit Weiß definierten Hintergrundfläche stehen. Durch die weiße
Hintergrundfarbe entsteht eine Verbindung mit der Bildwortmarke bzw.
eine Abgrenzung von den Navigations- und Informationsebenen.
Informationen zum Umgang mit Farben unter dem Gesichtspunkt
der Barrierefreiheit sind dem Kapitel „Zusatzinformationen“ zu entnehmen.
Ein wesentlicher Bestandteil der Farbwirkung ist, dass die Farben
der Staatsfahne vorzugsweise auf einem weißen Hintergrund stehen.
Für die Online-Anwendungen werden die Primärfarben um alle
reinen Grautöne, d. h. alle Hexadezimalzahlen mit sechs gleichen Stellen
(zum Beispiel #DDDDDD), erweitert.

0|0|0|25 0|100|100|0 0|5|30|5 CMYK-Wert


#999999 #FF0000 #F0ECDD Hexadezimalwert

Primärfarben
Die Primärfarben Schwarz, Rot und Gelb sind
aus der Staatsfahne der Bundesrepublik
Deutschland abgeleitet. Sie benötigen des-
0|0|0|50 0|100|100|25 0|12|100|5
halb einen besonderen Umgang und dürfen
#666666 #990000 #FFCC00
nur gezielt, sparsam und wirkungsvoll einge-
setzt werden.

0|0|0|100 0|100|100|45 0|20|100|15


#000000 #660000 #CC9900

Die Primärfarben mit ihren Hexadezimalzahlen


Sekundärfarbspektrum

CMYK-Wert 0|40|100|0 80 % 60 % 40 % 20 % 0|70|100|0 80 % 60 % 40 % 20 %

Hexadezimalwert #FF9900 #FFB340 #FFCC80 #FFE0B2 #FFF5E5 #FF6600 #FF8C40 #FFB280 #FFD1B2 #FFF0E5

0|40|100|20 80 % 60 % 40 % 20 % 0|70|100|20 80 % 60 % 40 % 20 %

#CC7A00 #CC8F33 #D9A962 #E3C18F #E8D9C5 #D95700 #D9712B #D98B57 #E5AE8A #EDD4C2

0|40|100|40 80 % 60 % 40 % 20 % 0|70|100|40 80 % 60 % 40 % 20 %

#B36B00 #B37D2D #BA8D4A #C7A573 #D1C0A7 #B34700 #BF5E1D #BF7543 #CC9570 #D9B9A3

0|40|100|60 80 % 60 % 40 % 20 % 0|70|100|60 80 % 60 % 40 % 20 %

#8C5400 #996B26 #A1783B #B09061 #B3A289 #993D00 #A65119 #AB6537 #B8815C #BF9F8C

0|40|100|80 80 % 60 % 40 % 20 % 0|70|100|80 80 % 60 % 40 % 20 %

#6B4000 #805516 #8F672C #997C51 #998A73 #803300 #8C4515 #99592E #A66F4B #AD8F79

50|0|100|0 80 % 60 % 40 % 20 % 100|0|90|0 80 % 60 % 40 % 20 %

#ABBA00 #BDC936 #D0D96C #E0E5A1 #EBEDD5 #007744 #2C9458 #65B876 #95CC95 #CAEOCA

50|0|100|20 80 % 60 % 40 % 20 % 100|0|90|20 80 % 60 % 40 % 20 %

#8C9900 #A2AD28 #B6BF56 #C7CC85 #D6D9B8 #006633 #1F8248 #4DA15C #7DB87D #ADCCAD

50|0|100|40 80 % 60 % 40 % 20 % 100|0|90|40 80 % 60 % 40 % 20 %

#758000 #8F9926 #9EA64B #AEB374 #BDBFA3 #005229 #166B37 #388547 #65A165 #95BA95

50|0|100|60 80 % 60 % 40 % 20 % 100|0|90|60 80 % 60 % 40 % 20 %

#5E6600 #788020 #888F40 #9A9E67 #A4A68D #004015 #105728 #287036 #508A50 #7FA37F

50|0|100|80 80 % 60 % 40 % 20 % 100|0|90|80 80 % 60 % 40 % 20 %

#464D00 #60661A #777D38 #888C5B #979982 #003300 #0E4721 #245E2E #457A45 #6F946F

100|10|0|0 80 % 60 % 40 % 20 % 100|60|0|0 80 % 60 % 40 % 20 %

#2DC7E5 #64D6ED #91E3F2 #C2EAF2 #E6F0F2 #1144AA #446EC4 #76A4D7 #9BBDDE #CFDCE5

100|10|0|20 80 % 60 % 40 % 20 % 100|60|0|20 80 % 60 % 40 % 20 %

#26A6BF #4EB9CF #7ACDDE #ACDBE3 #CFE2E5 #003399 #2656AB #517EBD #81A6CC #B8CBD9

100|10|0|40 80 % 60 % 40 % 20 % 100|60|0|40 80 % 60 % 40 % 20 %

#2190A6 #46A5B8 #70BDCC #98CAD4 #BCD1D6 #002A80 #1F4991 #42699E #7091B3 #9FB6C7

100|10|0|60 80 % 60 % 40 % 20 % 100|60|0|60 80 % 60 % 40 % 20 %

#1B7385 #388FA1 #59A4B3 #84B6BF #A9C2C7 #002266 #1A3B75 #385885 #5D7C9C #879EAD

100|10|0|80 80 % 60 % 40 % 20 % 100|60|0|80 80 % 60 % 40 % 20 %

#145866 #307B8A #4C8C99 #6F9FA8 #97B2B8 #001A4D #142E5C #2D476B #4A6580 #738A99
12 Grundlagen

Corporate-Design-Schriften Informationen zu „Barrierefreiheit und Schrif-


Das Corporate Design der Bundesregierung verwendet die Schrif- ten“ sind dem Kapitel „Zusatzinformationen“
zu entnehmen. Dort ist auch eine Umrech-
ten Neue Demos und Neue Praxis als Hausschriften. Sie wurden für die
nungstabelle für Schriftgrößen beigefügt.
Bundesregierung überarbeitet und sind sowohl typografische Basis als auch
integraler Bestandteil in den Printmedien der Bundesregierung.
In Online-Medien können diese Schriften nur in Bildelementen
Verwendung finden (z. B. Texte in Bildern und Grafiken, Überschriften als
Bilder).
Als Y Systemschrift wird für die Online-Medien der Bundesregie-
rung die Verdana festgelegt.
Da nicht davon ausgegangen werden kann, dass die Verdana auf
allen verwendeten Betriebssystemen der Nutzer installiert ist, wird eine Fol-
ge von Alternativschriften angegeben. Sie lautet: Helvetica, Arial, Tahoma,
Sans Serif.
Durch die Angabe der Schriftgrößen in der absoluten Maßeinheit
px (Pixel) in den Y CSS wird die Vergrößerung der Schriften durch den Be-
nutzer unterdrückt. Die Angabe der Schriftgrößen sollte für einen barriere-
freien Zugang in relativen Prozentangaben bzw. em-Werten erfolgen.
Der Einsatz von Systemschriften erfordert keinen Erwerb von Nut-
zungsrechten und ist somit kostenfrei.

Neue Demos

ABCDEFGHIJKLMNOPQRSTUVWXYZÄËÖÜÁÇÔØ
abcdefghijklmnopqrstuvwxyzäöüáô1234567890
[{}(,.;:!?€&ß-*@)] 1234567890ƒ

Neue Praxis

ABCDEFGHIJKLMNOPQRSTUVWXYZÄËÖÜÁÇÔØ
abcdefghijklmnopqrstuvwxyzäöüáôçø
1234567890 [{}(,.;:!?€&ß-*@)] ƒ
Verdana

ABCDEFGHIJKLMNOPQRSTUVWXYZÄËÖÜ
abcdefghijklmnopqrstuvwxyzäöüáôçø
1234567890 [{}(,.;:!?&ß-*@)]
Die Corporate-Design-Schriften der Bundesregierung für den Online-Bereich
Bild- und Formensprache
Die klare und eindeutige Bildsprache bedient sich der journalisti-
schen und dokumentarischen Farb- oder Schwarz-Weiß-Fotografie. Sie ver-
meidet Metaphern, Inszenierungen und Collagen ebenso wie grafische Nach-
bearbeitungen, zum Beispiel Verläufe, Filter oder andere Verfremdungen.
Die grafischen Elemente für die Internetpräsenzen der Bundesre-
gierung basieren auf den Formen Quadrat, Rechteck und Linie. Sie werden
zur Gliederung der Y Navigationsebenen oder zur strukturierten Darstellung
der Inhalte verwendet. Eine Kombination unterschiedlicher Elemente ist
ebenso zu vermeiden wie die Verwendung von Kreisen, Ovalen, abgerunde-
ten Ecken sowie grafischen 3D-Effekten. Der Radius, mit dem die linke obere
Ecke des Identitätsbereiches abschließt, stellt als ein tragendes Element des
Erscheinungsbildes eine Ausnahme dar. Die einzelnen Elemente werden wie
folgt definiert:
- Für Linienstärken gilt: 1 px, 2 px, 4 px, 8 px, 16 px oder 20 px.
- Für Quadrate und Rechtecke gilt: Ihre Seitenlängen müssen durch 4
teilbar sein und sich am Ausrichtungsraster orientieren.
- Für Dreiecke gilt: Es sind nur rechtwinklige Dreiecke oder im Schrift-
satz vorhandene Winkel zugelassen.
- Für Pfeile gilt: Die Pfeilspitze soll einen rechten Winkel bilden.

Umsetzung des Corporate Designs auf der Website der Bundesregierung


Seitenaufbau
16 Seitenaufbau

Seitenaufbau
Die Bundesregierung tritt durch ihre Ressorts mit verschiedenen
Internetpräsenzen an die Öffentlichkeit. Aufgrund der stark unterschied-
lichen Inhalte ist die visuelle Homogenität von großer Bedeutung für die
Identifikation und Wiedererkennung. Zudem erleichtert eine einheitliche
Screen-Aufteilung (vgl. Kapitel „Screen-Aufteilung“) in Bereiche den Benut-
zern die Navigation auf den verschiedenen Internetpräsenzen.

Logobereich
Im Logobereich wird ausschließlich die Bildwortmarke des jeweili- Der Logobereich

gen Ressorts positioniert. Der Logobereich befindet sich auf der Gestaltungs-
fläche in der linken oberen Ecke.
Die Breite des Logobereiches ergibt sich aus der Breite der Y Bild-
wortmarke des jeweiligen Ressorts. Diese wurden einschließlich ihrer
Y Schutzzone auf zwei Breiten vereinheitlicht: entweder schmal (kürzerer
Bildwortmarke
Ressortname) oder breit (längerer Ressortname). Die Bildwortmarke der Bundesregierung und
Bei schmalen Bildwortmarken nimmt der Logobereich eine Breite ihrer Ressorts besteht aus drei korrespondie-
von 7 RE (= 196 px) ein und bei breiten Bildwortmarken eine Breite von 9 RE renden Elementen: dem Bundesadler, dem
dreifarbigen Säulenelement und dem vom
(= 252 px). Die Höhe des Logobereiches ist einheitlich mit 5 RE (= 100 px) defi-
Ressort abhängigen Text. Diese Elemente ste-
niert. hen in einem durch den Raster fest definier-
Für die Umsetzung in relativen Schriftgrößen-Einheiten wird aus- ten Verhältnis zueinander und dürfen weder
gehend von einer 16 px Standard-Schriftgröße eine Breite von 196 px in 12,25 em verändert noch skaliert werden.

und eine Breite von 252 px in 15,75 em umgewandelt.


Die Bildwortmarke hat vier unterschiedliche
Der Hintergrund des gesamten Logobereiches ist weiß. Größen: S, M, L und XL. Für die Online-Medien
werden ausschließlich farbige GIF-Dateien
der Größe M verwendet. Die Bildwortmarken
sind in deutsch- und englischsprachigen Ver-
sionen für die Bereiche Office, Internet und
Print auf den CD-ROMs der Corporate-Design-
Manuals zu finden. Die Corporate-Design-Ma-
nuals können unter

http://styleguide.bundesregierung.de

direkt aus dem Internet heruntergeladen


oder bestellt werden beim
Die
Bundesregierung
Presse- und Informationsamt der
Bundesregierung,
Dorotheenstraße 84,
10117 Berlin,
E-Mail: Corporate-Design@bpa.bund.de.

Bundesministerium für
wirtschaftliche Zusammenarbeit
und Entwicklung

Die Bildwortmarke in zwei Breiten mit jeweiliger Schutzzone


Die Farben der Bildwortmarke entsprechen
den Primärfarben der Bundesregierung. Die
Bildwortmarke steht grundsätzlich auf einer
weißen Fläche. Andere Platzierungen auf
Schwarz- oder Farbflächen sowie auf Bildern
sind unzulässig.

Die Bildwortmarke braucht, um repräsenta-


tiv wirken zu können, einen Freiraum: die
Schutzzone. Die einzelnen Schutzzonen-
Module entsprechen in der Größe den Raster-
einheiten von 28 px x 20 px. In der Vertikalen
wird die Schutzzone durch Module begrenzt,
die ober- und unterhalb des
Y Säulenelements stehen. Die linke Begren-
zung bildet ein Modul, dessen rechte Kante
sich mit der Mittelachse des Bundesadlers
deckt. Rechts wird das Modul an den letzten
Buchstaben des Textes gehängt. Empfeh-
lung: Der Weißraum wird über den Identi-
tätsbereich hinaus fortgeführt.
Die durch Rastereinheiten/Schutzzonen-Module definierte Schutzzone der Bildwortmarke

Die Bildwortmarke schließt oben, inklusive


ihrer Schutzzone, bündig mit der Gestal-
tungsfläche ab. Links wird die Schutzzone
der Bildwortmarke mit 12 px Abstand zum lin-
ken Rand der Gestaltungsfläche gesetzt.

An der Bildwortmarke darf ausschließlich


Text ausgerichtet werden, der wiederum
bündig mit dem Text der Bildwortmarke
steht. Weitere Gestaltungselemente dürfen
sich nicht auf die Bildwortmarke beziehen.

Empfehlung: Die Bildwortmarke ist mit ei-


nem Link zur Homepage belegt, so dass die
Homepage immer mit einem Klick erreichbar
ist. Die Bildwortmarke darf dabei nicht durch
Animation verändert werden.

Die Platzierung der Bildwortmarke im Logobereich


18 Seitenaufbau

Identitätsbereich Sprachregelungen
Durch eine aussagekräftige Gestaltung des Identitätsbereichs wird Einheitliche Sprachregelungen und Benennun-
gen in den unterschiedlichen Internetpräsen-
die Bundesregierung oder das jeweilige Ressort als Betreiber der Internet-
zen und Online-Medien erleichtern den Besu-
präsenz deutlich gekennzeichnet. Der Identitätsbereich dient der Wieder- chern die Orientierung und Navigation. Aus
erkennung und als Orientierungshilfe für die Besucher der Websites und diesem Grund wird die Benennung von zwei
muss auf allen Seiten eingesetzt werden. Punkten der obersten Navigationsebene vor-
gegeben:
Der Identitätsbereich kann die oberste Ebene der Navigation, das
Hauptmenü, beinhalten. Es wird empfohlen, nicht mehr als sechs Punkte im - „Ministerium“ (bzw. „Bundesregierung“,
Hauptmenü zu platzieren. „Bundeskanzler“)
Ob das Hauptmenü im Identitätsbereich steht oder ob alle Ebenen anstelle vager oder wechselnder Bezeich-
nungen wie: Das Ministerium, Wir über uns,
im Navigationsbereich angesiedelt werden, muss aufgrund der Komplexität
Über uns, Behörden und Einrichtungen, Die
und Tiefe der Navigationsstruktur individuell entschieden werden. Ministerien, Die Staatssekretäre etc.
Die Platzierung anderer Navigationselemente im Identitätsbereich
ist nicht gestattet. Eine Ausnahme bildet die Positionierung des Servicebe- - „Themen“
anstelle vager oder wechselnder Bezeich-
reichs (vgl. Kapitel „Servicebereich“) im Identitätsbereich.
nungen wie: Schwerpunkte, Sachgebiete,
Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen Fachabteilungen, Arbeitsfelder etc.
Navigations- und einem Contentbereich wird durch eine Farbkodierung dar-
gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereichs wird Die Benennung aller weiteren Menüpunkte im
Identitätsbereich bleibt den einzelnen Ressorts
durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.
überlassen. Empfehlung: Folgende Bezeichnun-
Der Contentbereich, Träger der Hauptinformationen, wird von den Farbflä- gen werden weiterhin eingesetzt:
chen gehalten und hebt sich durch helle oder weiße Hintergrundfarben ab.
Der Akzentuierung dienen klare, reine und helle Farben aus einem der defi- - „Aktuelles“
für aktuelle Nachrichten und Themen.
nierten Farbklimata.
Empfehlung: Über die weitere Ausgestaltung durch Verwendung - „Publikationen“
zusätzlicher Gestaltungselemente, zum Beispiel Farbflächen oder Bilder, ent- für Veröffentlichungen, Broschüren, Maga-
scheidet das jeweilige Ressort. Es ist darauf zu achten, dass eine gestalteri- zine und Medien aller Art.

sche Verbindung zum Navigationsbereich gewahrt bleibt und der Logobe-


- „Presse“
reich optisch nicht beeinträchtigt wird. für Presseforum, Interviews, Mitteilungen
Der Identitätsbereich schließt mit seiner Oberkante bündig mit der und Reden.
Gestaltungsfläche ab. Links wird er durch den Logobereich begrenzt. In der
Im Übrigen sind hierzu die Informationen zu
Breite nimmt er den gesamten verbleibenden Raum rechts des Logobereichs
„Barrierefreiheit und Sprache“ im Kapitel
ein. Die Höhe beträgt 100 px. Bei Schriftvergrößerung durch den Nutzer be- „Zusatzinformationen“ zu beachten.
legt er gegebenenfalls mehr Raum in der Höhe.
Um der Bildwortmarke einen repräsentativen Wirkungsraum zu
geben, sollten auch außerhalb der Schutzzone großzügig weiße Flächen
stehen. Um eine optische Verbindung zwischen der Hintergrundfläche und
der Schutzzone zu schaffen, wird empfohlen, die oberen 20 px des Identitäts-
bereichs mit einer weißen Fläche zu unterlegen.
Schriften
Die Navigation im Identitätsbereich wird in
der Systemschrift Verdana in einer Schriftgrö-
ße von 0,7 em oder 0,75 em in Bold gesetzt.
Die Reihenfolge der Alternativschriften ist
Verdana, Helvetica, Arial, Tahoma, Sans Serif.
Im Übrigen ist hierzu die „Umrechnungsta-
belle Schriftgrößen“ im Kapitel „Zusatzinfor-
mationen“ zu beachten.

Interaktives Verhalten
Es ist möglich, die Buttons des Hauptmenüs
mit einer Klickfunktion oder einem Y Drop-
down-Menü zu belegen, wenn der Naviga-
tionsbereich weitere Navigationsebenen
beinhaltet. Hinweis: Da Drop-down-Menüs
bisher nicht geräteunabhängig zu bedienen
sind, muss jedoch parallel ein geräteunab-
hängiger Zugang zu den Informationen an-
geboten werden.

Die beiden Größen des Identitätsbereichs Es wird empfohlen, zwischen Y Active,


Y Hover-/Focus-, Y Visited und Y Unvisited
Links zu differenzieren. Grafische Spielformen
wie Blinkeffekte oder Ähnliches sind auszu-
schließen.

Das Bildelement des Identitätsbereiches kann an der oberen linken


Ecke mit einem auszeichnenden Gestaltungselement der Internetpräsenzen
versehen werden: einem Radius. Dieser entspricht einem geglätteten Vier-
telkreis mit einem Durchmesser von 24 px.

Anwendungsbeispiel für einen Identitätsbereich auf einer Website des Presse- und Informations- Die beiden Schriftarten und -größen des
amtes der Bundesregierung Identitätsbereichs
20 Seitenaufbau

Navigationsbereich
Der Navigationsbereich nimmt entweder alle Y Navigationsebenen
oder die Navigation unterhalb der ersten Ebene auf. Bei nur zwei Naviga-
tionsebenen wird empfohlen, diese vollständig in den Navigationsbereich
zu integrieren. Bei komplexeren Seitenstrukturen ist es ratsam, die oberste
Navigationsebene im Identitätsbereich zu platzieren.
Dabei ist allgemein darauf zu achten, dass die Farben und Schriften
im Navigations- und im Identitätsbereich übereinstimmen. Durch diese ge-
stalterische Verbindung beider Bereiche darf der Logobereich optisch nicht Der Navigationsbereich
beeinträchtigt werden.
Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen
Navigations- und einen Contentbereich wird durch eine Farbkodierung dar- Sprachregelungen
gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereiches wird Einheitliche Sprachregelungen und Benen-
nungen in den unterschiedlichen Internet-
durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.
präsenzen und Online-Medien erleichtern
Der Contentbereich, Träger der Hauptinformationen, wird von den Farbflä- den Besuchern die Orientierung und Naviga-
chen gehalten und hebt sich durch helle oder weiße Hintergrundfarben ab. tion. Aus diesem Grund wird die Benennung
Der Akzentuierung dienen klare, reine und helle Farben aus einem der defi- von zwei Punkten der obersten Navigations-
ebene vorgegeben:
nierten Farbklimata.
Grafische Gestaltungselemente wie Farbflächen und ggf. verwen- - „Ministerium“ (bzw. „Bundesregierung“,
dete Schriften sollten mit dem Identitätsbereich korrespondieren. Die Ver- „Bundeskanzler“)
wendung von Fotos und Y Grafikelementen oder weiteren funktionalen Ele- anstelle vager oder wechselnder Bezeichnun-
gen wie: Das Ministerium, Wir über uns, Über
menten ist im Navigationsbereich nicht gestattet.
uns, Behörden und Einrichtungen, Die Mini-
Der Navigationsbereich ist entweder 7 RE (= 196 px = 12,25 em) oder sterien, Die Staatssekretäre etc.
9 RE (= 252 px = 15,75 em) breit, abhängig von der Breite des Logobereichs
und den geplanten Wortlängen der Navigationsbegriffe. Wird die Schrift- - „Themen“
anstelle vager oder wechselnder Bezeich-
größen-Einstellung vom Nutzer erhöht, wächst auch die Breite.
nungen wie: Schwerpunkte, Sachgebiete,
Der Navigationsbereich beginnt am linken Rand der Gestaltungs- Fachabteilungen, Arbeitsfelder etc.
fläche. Er schließt mit der Oberkante unmittelbar an den Logobereich an.
Am linken Rand des Navigationsbereichs ist ein vertikaler Streifen von 12 px Die Benennung aller weiteren Menüpunkte im
Identitätsbereich bleibt den einzelnen Ressorts
Breite weiß definiert.
überlassen. Empfehlung: Folgende Bezeichnun-
Innerhalb des Navigationsbereichs werden die einzelnen Elemente gen werden weiterhin eingesetzt:
entsprechend dem Ausrichtungsraster positioniert.
- „Aktuelles“
für aktuelle Nachrichten und Themen.

- „Publikationen“
für Veröffentlichungen, Broschüren, Maga-
zine und Medien aller Art.

- „Presse“
für Presseforum, Interviews, Mitteilungen
und Reden.

Im Übrigen sind hierzu die Informationen zu


„Barrierefreiheit und Sprache“ im Kapitel
„Zusatzinformationen“ zu beachten.

Beispiele für die Benennung der ersten Navigationsebene auf der Website des Bundesministeriums für
Familie, Senioren, Frauen und Jugend
Schriften
Im Sinne eines einheitlichen Erscheinungsbil-
des ist für die Navigation ein einheitlicher
Schrifttyp zu verwenden: Die Reihenfolge
der Alternativschriften ist Verdana, Helvetica,
Arial, Tahoma, Sans Serif.

Im Übrigen ist hierzu die „Umrechnungstabelle


Schriftgrößen“ im Kapitel „Zusatzinformatio-
nen“ zu beachten.

Interaktives Verhalten
Wurde bei der Navigation im Identitätsbe-
reich ein Y Drop-down-Menü verwendet,
steht die zweite Ebene der Navigation in die-
sem Menü. Auf Y Mouse-down eines Menü-
punktes wird eine weitere Navigationsebene
in den Navigationsbereich geladen. Der aus
dem Drop-down-Menü gewählte Menüpunkt
steht – grafisch hervorgehoben – am Kopf
der Liste im Navigationsbereich. Darunter
Die beiden Größen des Navigationsbereichs folgt die weitere Ebene der Navigation.

Existiert im Identitätsbereich kein Drop-


down-Menü, kann die zweite Ebene der Navi-
gation bei Mouse-down als Liste in den Navi-
gationsbereich geladen werden. Die weite-
ren Ebenen können – wie bei einer Ordner-
struktur – unterhalb des gewählten Naviga-
tionspunktes „ausklappen“.

Findet die Navigation ausschließlich im Navi-


gationsbereich statt, so werden die Menü-
punkte als Liste dargestellt. Bei Mouse-down
können – wie bei einer Ordnerstruktur –
unterhalb des gewählten Navigationspunkts
die weiteren Ebenen der Navigation „aus-
klappen“.

Bei einer Positionierung der Navigationsebe-


nen im Identitäts- und dem Navigationsbe-
reich muss ein deutlicher, visueller Zusammen-
hang geschaffen werden.

Es wird empfohlen, zwischen Y Active,


Y Hover-/Focus-, Y Visited und Y Unvisited
Links zu differenzieren.

Die Schriftarten und -größen im Identitäts-


und Navigationsbereich
22 Seitenaufbau

Servicebereich Sprachregelungen
Der Servicebereich dient der Aufnahme ständig sichtbarer Service- Einheitliche Sprachregelungen und Benen-
funktionen der gesamten Internetpräsenz. Seine Gestaltung ist dem Iden- nungen erleichtern den Besuchern das
schnelle Finden von Service-Inhalten, zum
titäts- und Navigationsbereich untergeordnet. Für den Servicebereich sind
Beispiel Suchfunktionen oder Kontaktmög-
zwei alternative Positionierungen möglich: lichkeiten. Aus diesem Grund werden drei
Servicepunkte auch mit ihrer Benennung vor-
- Innerhalb des Identitätsbereichs: gegeben:

Der Servicebereich kann oberhalb des Identitätsbereiches positioniert


- „Home“
werden. In diesem Fall nimmt er in der Vertikalen einen Raum von mini- Der direkte Link zur Startseite. Er ist parallel
mal (bei Grundeinstellung der Schriftgröße) 20 px (= 1,25 em) ein. zur Verlinkung über die Bildwortmarke zu
Empfehlung: Um die durch Weißraum gebildete visuelle Klammer der berücksichtigen.

Internetpräsenzen zu verstärken, steht ein im Identitätsbereich positio-


- „Kontakt“
nierter Servicebereich auf einem weißen Hintergrund. Die Möglichkeit, über einen Link E-Mails an
die Betreiber der Website zu versenden,
Korrespondenz- oder Ortsangaben zu er-
halten.

- „Suche“
Der Aufruf der Suchfunktion innerhalb der
Internetpräsenz. Es ist möglich, einen
Suchbegriff direkt in ein Feld einzugeben
oder alternativ die Suchfunktion über ei-
nen Link einzuleiten.

Empfehlung: Neben den verbindlichen Be-


nennungen innerhalb des Servicebereiches
werden folgende Begriffe eingesetzt:

- „Sitemap“
Als Bezeichnung für die verlinkte Struktur-
übersicht der Internetpräsenz.

- „Hilfe“
Die Benennung der Bedienungshilfe inner-
halb der Website.

Die Position und Größe des Servicebereichs im Identitätsbereich


- Unterhalb des Navigationsbereichs: - „E-Mail“
Der Servicebereich kann unterhalb des Navigationsbereiches positioniert Bezeichnung für eine formlose E-Mail-Funk-
werden. Zur besseren Differenzierung ist zwischen den Bereichen ein tion oder ein E-Mail-Formular direkt an den
Website-Betreiber.
Abstand zu halten: Der Servicebereich beginnt mindestens 2 RE (= 40 px
= 2,5 em) unterhalb des letzten Menüpunktes der Navigation. - „Textversion“
Ein Link, der die Nur-Text-Version der Inter-
Aufgrund seiner Funktion sollte der Servicebereich so platziert netpräsenz aufruft. (Falls trotz aller Bemü-
hungen keine barrierefreie Umsetzung
werden, dass er ohne vertikales oder horizontales Scrollen im sichtbaren Be-
möglich ist, muss zumindest eine barriere-
reich des Browsers liegt. Eine inhaltliche Festlegung oder Begrenzung kann freie Textversion angeboten werden).
ein eventuelles Wegscrollen verhindern.
Im Übrigen sind hierzu die Informationen zu „Barrierefreiheit und - „Kontakt“
Bezeichnung für ein E-Mail-Formular, das
Frames“ im Kapitel „Zusatzinformationen“ zu beachten.
Antworten oder Reaktionen auf eine spezi-
fische Frage an den Betreiber der Website
übermittelt.

- „Download“
Die Bezeichnung für den Download-Be-
reich, aus dem Dateien auf den Computer
des Anwenders geladen werden können.

- „Newsletter“
Benennung für ein An- bzw. Abmeldefor-
mular für den Bezug eines Newsletters des
Betreibers der Internetpräsenz.

- „Linkliste oder Links“


Als Bezeichnung für eine Liste verlinkter,
weiterer Websites.

- „Glossar“
Die Benennung für ein alphabetisch geord-
netes, erläuterndes Stichwortverzeichnis.

Position und Breiten des Servicebereichs im Navigationsbereich


24 Seitenaufbau

- „English |Français| Español“


Bezeichnungen für die Auswahl fremd-
sprachlicher Versionen der Internetprä-
senz. Die Darstellung von Flaggen für die
Sprachauswahl ist unzulässig, da unkorrek-
te Aussagen möglich sind: So wird Englisch
auch außerhalb Großbritanniens und Spa-
nisch auch außerhalb Spaniens gespro-
chen.

- „Impressum“
Die Bezeichnung für die Nennung der pres-
serechtlich Verantwortlichen der Internet-
präsenz, der Gestalter und Umsetzer der
Website sowie eventuelle rechtliche Hin-
weise.

Zur besseren Übersicht sollten innerhalb des


Servicebereichs nicht mehr als acht Begriffe
verwendet werden. Im Übrigen sind hierzu
die Informationen zu „Barrierefreiheit und
Sprache“ im Kapitel „Zusatzinformationen“
Beispiel für einen Servicebereich im Navigationsbereich auf der Website Medienmonitoring (eine zu beachten.
Intranetanwendung in Entwicklung des Presse- und Informationsamtes der Bundesregierung)

Beispiel für einen Servicebereich im Identitätsbereich auf einer Website des Bundesministeriums für
Verkehr, Bau- und Wohnungswesen
Buttons, Piktogramme
Im Servicebereich können entweder Textlinks
oder Text in Form von Y Grafikelementen als
Buttons verwendet werden. Diese sind
gegenüber den Elementen der Navigation im
Identitäts- und Navigationsbereich zurück-
haltender gestaltet.

Wird der Servicebereich im Navigationsbe-


reich unterhalb der Menüpunkte angeord-
net, so richtet sich seine Größe und Ausrich-
tung nach der dort gewählten Spaltenbreite.

Im Übrigen sind hierzu die Informationen zu


„Barrierefreiheit und Sprache“ im Kapitel
„Zusatzinformationen“ zu beachten.

Schriften
Die Navigation wird in der Systemschrift Ver-
dana regular gesetzt, die Schriftgröße be-
trägt 0,7 em. Die Reihenfolge der Alternativ-
Beispiel für die Benennung der Servicepunkte auf der Website des Bundesministeriums für Wirtschaft schriften ist Verdana, Helvetica, Arial, Taho-
und Arbeit (Ausschnitt) ma, Sans Serif. Text-Links bzw. Text-Buttons
werden als Liste gesetzt oder durch druckba-
re Schriftzeichen (zum Beispiel | oder o) von-
einander getrennt, die von Leerzeichen um-
geben sind.

Interaktives Verhalten
Es wird empfohlen, zwischen Y Active,
Y Hover-/Focus-, Y Visited und Y Unvisited
Links zu differenzieren.

Die Schriftarten und -größen im Servicebereich


26 Seitenaufbau

Contentbereich Spaltenraster
Der Contentbereich beinhaltet die redaktionellen Inhalte der Empfehlung: Texte, Tabellen und Formulare
Internetpräsenz. Diese können, der Komplexität einer Regierung entspre- können im Sinne eines Satzspiegels in Spal-
ten angeordnet werden. Die folgenden Emp-
chend, sehr unterschiedlich sein: Text- und Bildinformationen, Listen, Links,
fehlungen dienen der Orientierung und kön-
Banner, Datenbankanbindungen und Download-Bereiche etc. nen flexibel angewandt werden.
Die Gestaltung des Contentbereichs transportiert die visuelle Kultur
der Bundesregierung in besonderem Maße, da hier die wechselnden Bilder Zur Auswahl stehen folgende Spaltenraster,
jeweils mit schmalem oder breitem Naviga-
und Texte die Aufmerksamkeit besonders in Anspruch nehmen.
tionsbereich:
Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen
Navigations- und einen Contentbereich wird durch eine Farbkodierung dar- - Einspaltiger Raster mit Marginalspalte
gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereichs wird - Zweispaltiger Raster mit Marginalspalte
- Zweispaltiger Raster ohne Marginalspalte.
durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.
Der Contentbereich wird von den Farbflächen gehalten und hebt sich durch Für Überschriften, größere Abbildungen etc.
helle oder weiße Hintergrundfarben ab. Der Akzentuierung dienen klare, rei- können mehrere Spalten zusammengefasst
ne und helle Farben aus einem der definierten Farbklimata. werden. Ebenso ist es möglich, die vordefi-
nierten Spalten für Tabellen etc. weitere
Für gestalterisch hier nicht definierte Funktionen und Anwendun-
Male zu unterteilen.
gen wird empfohlen, sich an den vorliegenden, allgemeinen Richtlinien zu
orientieren. Die Marginalspalte enthält Text- und Bild-
Der Contentbereich beginnt mit seiner linken Seite direkt am Navi- informationen, die einen nebenstehenden
Inhalt ergänzen. Dies kann eine Auflistung
gationsbereich. Oben schließt der Contentbereich an der Unterkante des
weiterführender Links, die direkte Verbin-
Identitätsbereiches an. dung zu Sonderseiten und -themen oder
Die Breite des Contentbereichs nimmt den gesamten restlichen auch die Abbildung von Bannern der Bundes-
Raum ein. Auf der rechten Seite bleibt ein Streifen von 12 px als Abstand zum regierung sein.

inneren Browserrand geschützt.


Genaue Maßangaben für die Spaltenraster
finden sich im Kapitel „Seitenvermaßungen“.
Im Übrigen sind hierzu die Informationen zu
„Barrierefreiheit und Spalten“ im Kapitel „Zu-
satzinformationen“ zu beachten.

Die beiden Breiten des Contentbereichs


Die drei empfohlenen Spaltenraster des Contentbereichs, jeweils mit schmalem und breitem
Navigationsbereich
28 Seitenaufbau

Buttons, Piktogramme
Im Contentbereich können sowohl Textlinks
als auch Text in Form von Y Grafikelementen
als Buttons verwendet werden. Werden im
Contentbereich Piktogramme eingesetzt,
müssen diese mit der Gesamterscheinung
korrespondieren. Der Piktogrammstil muss
dem Erscheinungsbild der Internetpräsenz
bzw. der Bundesregierung entsprechen und
sich an den Vorgaben für die Formensprache
orientieren (vgl. Kapitel „Bild- und Formen-
sprache“).

Kommen Programm-Icons, zum Beispiel im


Download-Bereich, zum Einsatz, werden sie
der verfügbaren Datei vorangestellt.

Innerhalb des Contentbereiches gibt es


unterschiedliche Möglichkeiten, Links anzu-
legen:

- Funktionen, zum Beispiel für den Druck,


Bestellungen oder Download von Dateien.
- Text-Links als Inhaltsverzeichnis, die direkt
zu den entsprechenden Positionen im glei-
chen Contentbereich führen.
- Sprungmarken, die zur inhaltlichen Gliede-
rung innerhalb des Contentbereiches, zum
Beispiel als Rücksprung zum Seitenanfang,
verwendet werden.
- Textlinks, die zu anderen Seiten innerhalb
der eigenen Internetpräsenz führen, zum
Beispiel zur Fortsetzung eines Textanrisses.
- Links zu externen Internetadressen.

Links, welche die eigene Internetpräsenz ver-


lassen, sollen immer in einem weiteren, sepa-
raten Browserfenster geöffnet werden.

Empfehlung: Die Wortwahl der Links kann je-


der Betreiber frei wählen. Es werden im Sinne
der Einheitlichkeit folgende Vorschläge ge-
macht:

- Die Benennung sollte eindeutig und kurz


sein.
- Die Bezeichnungen sollen dem allgemei-
nen deutschen Sprachgebrauch entspre-
chen. Abkürzungen sowie so genanntes
„Amts- bzw. Behördendeutsch“ sind zu ver-
meiden.
- Behördeninterne Dateinamen dürfen nicht
Anwendungsbeispiele des Corporate Designs im Contentbereich: Text- und Tabellendarstellung verwendet werden.
Funktionen werden in einer einfachen Form
benannt:

- „Drucken“ anstelle von „Print-Version“ und


Ähnlichem (Die Anzeige einer Druckversion
auf dem Bildschirm ist bei Einsatz eines ent-
sprechenden CSS nicht notwendig)
- „Bestellen“ anstelle von „Broschüre bestel-
len“ etc.
- „Download“ oder „PDF-Download“ anstelle
von „Herunterladen“ und Ähnlichem.

Sprungmarken, die zur inhaltlichen Gliede-


rung verwendet werden, tragen folgende
Bezeichnungen:

- „Zum Seitenanfang“
- „Nach oben“
- „Artikelanfang“.

Verweise, die der Fortsetzung von Textanris-


sen dienen, tragen Bezeichnungen, aus de-
nen eindeutig der Inhalt der Zielseite hervor-
geht. Die gleich lautende mehrfache Ver-
wendung von „mehr“ oder „weiter“ auf einer
Seite ist zu vermeiden.

Im Übrigen sind hierzu die Informationen zu


„Barrierefreiheit und Bilder“ im Kapitel „Zu-
satzinformationen“ zu beachten.

Anwendungsbeispiele des Corporate Designs im Contentbereich: Formular, Sitemap


30 Seitenaufbau

Schriften
Im Contentbereich kann sowohl die Neue
Demos und Neue Praxis als auch die System-
schrift Verdana verwendet werden.

Überschrift Empfehlung: Wenn Überschriften, Themen-


titel oder Ähnliches als Grafiken gesetzt wer-
den, ist darauf zu achten, dass die Zugäng-
Überschrift lichkeit des Textes und die semantische Aus-
zeichnung mit entsprechenden HTML-Tags
(h1, h2, caption, legend, u. Ä.) gewährleistet
ist. Dies ist zur Gewährleistung der Barriere-
freiheit wie zur Optimierung einer Seite für
Suchmaschinen unerlässlich.

Überschriften werden in der Verdana bold in


90 % oder 100 % Größe als Systemschrift an-
gegeben oder als Neue Demos mit 18 px oder
20 px Größe und einer Spationierung von
0,04 Y Geviert mit Schriftenglättung als Bild
eingesetzt.

Untertitel und Tabellenüberschriften, sowie


Zusammenfassungen eines Artikels werden
in Verdana bold in 70 % Größe angegeben.

Mengentexte werden in Verdana regular in


70 % Größe als Systemschrift gesetzt. Hervor-
hebungen im Mengentext stehen in der glei-
chen Größe, aber in Verdana bold.

Thementitel können in Verdana bold in 70 %


Größe oder in der Neuen Demos SC OsF in
Thementitel 13 px Größe und einer Spationierung von
0,04 Y Geviert mit Schriftenglättung als Bild
eingesetzt werden.

Bildunterschriften werden in der Verdana


regular in 65 % Größe als Systemschrift an-
gegeben.

Wird ein Copyright am Textende verwendet,


wird es in Verdana regular in 70 % Größe als
Systemschrift angegeben.

Die Reihenfolge der Alternativschriften ist Ver-


Die Schriftarten, -schnitte und -größen im Contentbereich
dana, Helvetica, Arial, Tahoma, Sans Serif.

Empfehlung: Als Schriftfarbe wird die Farbe


mit der Hexadezimalzahl #333333 anstelle
von hundertprozentigem Schwarz empfoh-
len.

Im Übrigen sind die Umrechnungstabelle


Schriftgrößen und die Informationen zum
Thema „Barrierefreiheit und Schriften“ im Ka-
pitel „Zusatzinformationen“ zu beachten.
Interaktives Verhalten
Links innerhalb von Texten werden durch
Unterstreichungen und/oder farbliche Kenn-
zeichnung hervorgehoben.

Wird die Systemschrift Verdana gewählt,


empfiehlt es sich, zwischen Y Active, Y Hover-/
Focus-, Y Visited und Y Unvisited Links zu diffe-
renzieren.

Anwendungsbeispiel des Corporate Designs: Suche mit Suchergebnis auf einer Website des Presse-
und Informationsamtes der Bundesregierung
32 Seitenaufbau

Abbildungen
Bilder innerhalb des Contentbereichs werden
in ihren Formaten und Größen anhand des
Ausrichtungsrasters von 4 px x 4 px linksbün-
dig in den Spalten platziert. Empfehlung:
Werden Bilder von einem Text umflossen,
wird zwischen dem Text und dem Bild ein
Mindestabstand von 16 px eingehalten. Bei-
spiele für den Umgang mit Abbildungen fin-
den sich im Kapitel „Anwendungsbeispiele“.
Im Übrigen sind die Informationen zu „Barrie-
refreiheit und Bilder“ im Kapitel „Zusatzinfor-
mationen“ zu beachten.

Beispiel für die Positionierung von Abbildungen im Contentbereich

Empfohlener Mindestabstand von 16 px zwischen Bild und Text


Seitenvermaßungen
Die Vermaßung definiert die Größen der einzelnen Flächen und ih-
rer Position auf der Gestaltungsfläche. Sie beginnt immer an der linken obe-
ren Flächenbegrenzung.

Seitenvermaßung für einen Contentbereich mit einem einspaltigen Raster, einer Marginalspalte
und schmalem Navigationsbereich

Seitenvermaßung für einen Contentbereich mit einem zweispaltigen Raster, einer Marginalspalte
und schmalem Navigationsbereich
34 Seitenaufbau

Seitenvermaßung für einen Contentbereich mit einem zweispaltigen Raster und schmalem Naviga-
tionsbereich

Seitenvermaßung für einen Contentbereich mit einem einspaltigen Raster, einer Marginalspalte und
breitem Navigationsbereich
Seitenvermaßung für einen Contentbereich mit einem zweispaltigen Raster, einer Marginalspalte
und breitem Navigationsbereich

Seitenvermaßung für einen Contentbereich mit einem zweispaltigen Raster und breitem Naviga-
tionsbereich
Anwendungsbeispiele
38 Anwendungsbeispiele

Anwendungsbeispiele
Die folgenden Anwendungsbeispiele von aktuellen Internet-Auf-
tritten der Ministerien veranschaulichen die Corporate-Design-Richtlinien der
Bundesregierung und visualisieren den gestalterischen Spielraum innerhalb
der Vorgaben und Empfehlungen.

Homepages und Folgeseiten


In den Anwendungsbeispielen für Homepages und Folgeseiten
kommen unterschiedliche Farben, Formen und grafische Auszeichnungs-
elemente zum Einsatz.

Anwendungsbeispiele für Homepage und Folgeseiten auf der Website der Bundesregierung
Anwendungsbeispiele für Homepage und Folgeseiten auf der Website des Bundesministeriums für
Wirtschaft und Arbeit
40 Anwendungsbeispiele

Formular

Anwendungsbeispiel für die Gestaltung von Formularen auf der Website des Bundesministeriums für
Verkehr, Bau- und Wohnungswesen

Tabelle

Anwendungsbeispiel für die Gestaltung von Tabellen auf der Website der Bundesregierung
Suche

Anwendungsbeispiel für die Gestaltung von Suchmasken und Suchergebnislisten auf einer Website
des Presse- und Informationsamtes der Bundesregierung

Sitemap

Anwendungsbeispiel für die Gestaltung einer Sitemap auf der Website des Bundesumweltministeriums.
Zu beachten ist, dass das Logo gemäß Styleguide-Vorgaben auf weißem Grund stehen müsste.
Zusatzinformationen
44 Zusatzinformationen

Zusatzinformationen
Nachfolgend werden Basisinformationen zu den technischen
Standards des World Wide Web, zur Sicherheit und zur Auffindbarkeit von
Web-Inhalten gegeben. Außerdem werden die Richtlinien für die Erstellung
barrierefrei zugänglicher Online-Medien erläutert.

Technische Standards
Im Rahmen der Initiative BundOnline 2005 werden technische
Standards im Internet – vom Bundesministeriums des Innern initiiert –
diskutiert und im SAGA-Dokument (Standards und Architekturen für
E-Government-Anwendungen) vorgestellt. Diese Diskussion und das fort-
laufend aktualisierte SAGA-Dokument sind unter http://wwwbund.de
veröffentlicht. Empfehlungen für Standards, Methoden und Produkte gelten
gleichlautend in der jeweils aktuellen Fassung für die Internetpräsenzen der
Bundesregierung.

Sicherheit von Internetpräsenzen


Das Thema IT-Sicherheit wird im Rahmen der Initiative Bund-
Online 2005 im E-Government-Handbuch im Modul „IT und IT-Sicherheit“
für E-Government-Anwendungen beschrieben und steht in der Online-
Version des E-Government-Handbuchs
(http://www.bsi.bund.de/fachthem/egov/HYPERLINK) als PDF-Datei zur Verfü-
gung. Die dort niedergelegten Sicherheitskonzepte sind in der jeweils ak-
tuellen Fassung für Internetpräsenzen der Bundesregierung anzuwenden.

Auffindbarkeit von Web-Inhalten


Um die Auffindbarkeit der eingestellten Informationen der Inter-
netpräsenzen der Bundesregierung möglichst erfolgreich zu planen und
umzusetzen, müssen sowohl technische als auch redaktionelle Dinge beach-
tet werden. Hinweise zu diesem Thema werden im Rahmen der Initiative
BundOnline 2005 im E-Government-Handbuch im Abschnitt „Auffindbar-
keit von Web-Inhalten“ beschrieben und stehen in der Online-Version des
E-Government-Handbuchs (http://www.bsi.bund.de/fachthem/egov/) als PDF-
Datei zur Verfügung. Sie sind in der jeweils aktuellen Fassung für Internet-
präsenzen der Bundesregierung zu berücksichtigen.
Barrierefreier Zugang
Barrierefreier Zugang zum Internet bedeutet, dass Internet-
anwendungen so entwickelt und technisch umgesetzt werden, dass ein
größtmöglicher Nutzerkreis mit unterschiedlichsten Hard- und Software-
voraussetzungen oder speziellen Hilfsmitteln die Inhalte erreichen kann.
Dies ist durch die konsequente Entwicklung gemäß den allgemeinen Spe-
zifikationen und Empfehlungen des W3-Konsortiums /W3C) und den 14
Richtlinien der Arbeitsgruppe WAI (Web Accessibility Initiative, Initiative
für barrierefrei zugängliches Internet) möglich.Gemäß BITV (Barrierefreie
Informationstechnik-Verordnung) müssen bis 31. 12. 2005 alle öffentlich zu-
gänglichen Internetauftritte und -angebote sowie Intranetauftritte und
-angebote der Behörden der Bundesverwaltung barrierefrei umgesetzt werden.

Barrierefreiheit und Endnutzer


Computer und elektronische Netzwerke geben vielen Menschen,
gesunden ebenso wie körperlich und geistig Behinderten, neue Chancen
und Möglichkeiten, zum Beispiel eine wachsende intellektuelle und wirt-
schaftliche Unabhängigkeit.
Einige Anwender benötigen technische Hilfsmittel, die Standards
der gängigen Internet-Interpretatoren überbrücken, damit sie angebotene
Informationen abrufen können. Die Auswahl spezifischer Hilfsmittel für
unterschiedliche Behinderungen ist groß, zum Beispiel Screenreader für
Menschen mit Sehschwäche oder Zusatzsoftware für die Stimmsteuerung
von Computern. Organisationen arbeiten weltweit an der Aufgabe, die Ent-
wicklung dieser Hilfsmittel auf die Codierungsmethoden des W3C zu opti-
mieren.
Gleichzeitig ist Koordinierungsarbeit bei den so genannten Stan-
dardtechnologien zu leisten. Einige Nutzergruppen, zum Beispiel Menschen
in ländlichen Gegenden oder mit eingeschränkten wirtschaftlichen Mög-
lichkeiten, dürfen von der Aufnahme und dem Austausch von Informatio-
nen nicht ausgeschlossen werden. Daher sind spezielle Angebote, die ihnen
einen großen Vorteil bringen (zum Beispiel das E-Government), so zu ent-
wickeln, dass sie auch bei einem Einsatz älterer Hard- und Software oder bei
langsameren Übertragungsraten nutzbar sind.
Neue Internettechnologien sind für eine große Anzahl potenziel-
ler, aber auf Hilfsmittel angewiesener Nutzer nur eingeschränkt oder nicht
zugänglich. Die Ursache kann sein, dass die Hilfsmittel die neu eingesetzten
Technologien nicht interpretieren können oder dass bei der Entwicklung der
Websites nicht an einen barrierefreien Zugang gedacht wurde.
Die folgenden Richtlinien wenden sich an professionelle Entwick-
ler und Programmierer von Websites. Durch die Einhaltung dieser Tipps und
Techniken kann ein wichtiger und letztlich notwendiger Beitrag geleistet
werden, um größere Teile des World Wide Web barrierefrei zugänglich zu
machen.

Barrieren und Hilfsmittel


Circa 20 % der Internetnutzer (nicht eingerechnet sind Nutzer, die
auf sehr langsame Übertragungsraten oder ältere Hard- und Software ange-
wiesen sind) weichen vom so genannten Standardnutzer ab. Sie leben mit
körperlichen Einschränkungen, die es ihnen nur mit Hilfe von Zusatzsoft-
46 Zusatzinformationen

oder Hardware erlauben, Inhalte aus dem Internet zu erschließen. Auch


geistige Einschränkungen sind möglich, aufgrund derer Nutzer auf klare
und einfache Strukturen sowie Inhalte angewiesen sind.

Sehbehinderte oder Blinde greifen auf Hilfsmittel zurück, die ihnen


die Texte von Websites entweder durch einen so genannten Screenreader in
synthetischer Sprache oder als Braille-Zeile an ein Zusatzgerät mit Spezialtas-
tatur wiedergeben. Auch so genannte Audio-Browser können die Texte von
Internetseiten als Toninformationen ausgeben. Jegliche Bildinformation in-
klusive Video und Animationen bleiben diesen Nutzern verschlossen.

Für Fehlsichtige ist eine Vergrößerungs-Software hilfreich, die Teile


des Bildschirmes stark vergrößert darstellt. Problematisch dabei ist das Bewah-
ren eines „Überblicks”, da nur ein Ausschnitt der gesamten Seite sichtbar ist.

Es ist möglich, die Darstellung durch Änderung der System- bzw.


Browsereinstellungen an individuelle Bedürfnisse anzupassen. Schriften
können vergrößert, der Kontrast erhöht oder die Schriftfarben verändert
werden. Dieser Eingriff ist jedoch nur möglich, wenn im Quellcode der jewei-
ligen Website die Farben und Größen nicht als absolute Einheiten angege-
ben werden.

Motorische Störungen sind eine weitere Ursache für den Einsatz


von Hilfsmitteln bei der Nutzung des Internets. So müssen alternative Einga-
bemedien wie Tastatur, Mund- und Kopfstab oder Sprachsteuerung die Ein-
gabe durch die Maus ersetzen können.

Menschen, die schlecht oder gar nicht hören können, nicht oder
nur undeutlich sprechen, müssen bisher relativ wenig Hürden im Internet
überbrücken. Mit der Weiterentwicklung der Technologien wird das Inter-
net jedoch stärker als bisher akustische Ein- und Ausgabemöglichkeiten inte-
grieren. Für diese Interaktionsformen und Informationsmedien müssen bar-
rierefreie Zugänge entwickelt und berücksichtigt werden.

Personen mit eingeschränktem Konzentrationsvermögen oder


kognitiven Störungen bedürfen einer logisch aufgebauten und klar struktu-
rierten Navigation (die auch allen anderen Nutzern einer Site zugute
kommt).

Das Gleichstellungsgesetz
Mit der E-Government-Initiative BundOnline 2005 hat sich die
Bundesregierung verpflichtet, alle internetfähigen Dienstleistungen der
Bundesverwaltung bis zum Jahr 2005 online bereitzustellen. BundOnline
2005 wird dafür sorgen, dass Bürger und Wirtschaft die Dienstleistungen
der Bundesverwaltung einfacher, schneller und kostengünstiger in An-
spruch nehmen können (http://www.bundonline2005.de).
Für öffentlich zugängliche Angebote von Behörden der Bundesver-
waltung gilt die BITV (http://www.bmi.bund.de/dokumente/Artikel/ix_90156.htm).
Die Anzahl der Bürger, die diese Dienste online in Anspruch nehmen
können, wächst stetig. Jeder Bürger hat das Recht, Zugang zu Diensten und
Informationen der Bundesregierung zu erhalten. Mit dem Erlass des Gleich-
stellungsgesetzes vom 1. Mai 2002 (http://www.behindertenbeauftragter.de/) ist
es Pflicht der Bundesregierung und ihrer Ressorts, diesen Zugang zu ermög-
lichen.
Die Umsetzung dieser Online-Dienste gemäß den vorliegenden
Richtlinien stellt sicher, dass die Dienstleistungen der Bundesverwaltung ei-
nem größtmöglichem Personenkreis zur Verfügung stehen. Zugleich wird
die Entwicklung klar strukturierter, leicht verständlicher und kostengünsti-
ger Websites unterstützt.

Richtlinien zur Barrierefreiheit


Die folgende Zusammenfassung der Richtlinien beruht auf den
WAI-Richtlinien des W3C
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/ sowie auf den An-
forderungen der BITV (Abkürzung für Barrierefreie Informationstechnik-
Verordnung, http://www.bmi.bund.de/dokumente/Artikel/ix_90156.htm). Die
BITV beschreibt die Anforderungen in Bezug auf Barrierefreiheit für alle öf-
fentlich zugänglichen Internetauftritte und -angebote sowie Intranetauftritte
und -angebote der Behörden der Bundesverwaltung. Diese Anforderungen
müssen bis spätestens 31.12.2005 umgesetzt sein.
Die aktuelle Version der BITV entspricht in Priorität 1 im Wesent-
lichen den Vorgaben von WAI AA, in Priorität 2 im Wesentlichen der
WAI AAA.
Die jeweils in Klammern angegebene Nummer verweist auf die
entsprechende WAI-Richtlinie bzw. BITV-Anforderung.
Der Einsatz von HTML 4.0 und CSS 2 wird vom W3C (World Wide
Web Consortium, http://www.w3.org) als Grundlage für die Umsetzung all-
gemein zugänglicher Websites gesetzt. Informationen zum fachgerechten
Einsatz der neuesten Elemente von HTML 4.0 und CSS 2 sind in den entspre-
chenden technischen Standards und Spezifikationen des W3-Konsortiums
zu finden: http://www.w3.org/TR/.
Die Erstellung von Internetdokumenten, die den dort veröffent-
lichten Standards entsprechen, ist eine zu befolgende Richtlinie (WAI 3.2,
BITV 3.2).
Der Schlüssel zu einer allgemein zugänglichen Internetanwendung
liegt in der klaren Trennung von Inhalt und Layout: In der HTML-Codierung
dürfen zu Layoutzwecken keine Strukturelemente und keinerlei Layoutele-
mente zur strukturellen Auszeichnung verwendet werden (BITV 3.5).
Dies erfordert den syntaktischen und formal korrekten Einsatz von
HTML gemäß den W3C-Spezifikationen für den Grundaufbau und die Struk-
tur einer Website sowie die Verwendung von Stylesheets für alle Layout- und
Präsentationsbelange.
Der Aufbau von Seiten ist so zu gestalten, dass sie auch ohne
Stylesheets lesbar sind. Ist der Inhalt logisch aufgebaut, wird er auch dann in
einer sinnvollen Reihenfolge dargestellt, wenn die Stylesheets abgeschaltet
sind oder nicht unterstützt werden (WAI 6.1, BITV 6.1 ).
48 Zusatzinformationen

Für eine barrierefreie Gestaltung ist die Bereitstellung so genann-


ter Textäquivalente für alle akustischen und visuellen Inhalte wichtig. Das
bedeutet, dass für visuelle und/oder akustische Informationen, die für blinde
oder taube Menschen unzugänglich sind, entsprechende Textbeschreibun-
gen bereitgestellt werden (BITV 1.1 –1.44).
Ebenso wird mit aktiven Inhalten wie Applets und Scripts verfahren.
Die Inhalte müssen auch zugänglich sein, wenn diese Technologien nicht
unterstützt werden oder ausgeschaltet sind (WAI 6.3, BITV 6.3). Dies bedeu-
tet, dass sie mit entsprechenden Textalternativen hinterlegt oder nach barrie-
refrei zugänglichen Standards programmiert werden (WAI 8.1, BITV 8.1).
Die Navigation muss geräteunabhängig bedienbar sein, zum Bei-
spiel ohne den Gebrauch einer Maus. Eingabefunktionen, die allein über die
Tastatur erreichbar sind, können im Allgemeinen über alternative Eingabe-
medien wie Spracheingabe oder eine Kommandozeilen-Schnittstelle be-
dient werden.
Es wird empfohlen, die neuesten Versionen von W3C-Technologien
zu verwenden (WAI 11.1 BITV 11.1), veraltete Funktionen hingegen (zum Beispiel
das veraltete <FONT>-Element, WAI 11.2, BITV 11.2) sind zu vermeiden.
Sollten diese Anforderungen nicht umsetzbar sein, wird das paral-
lele Angebot einer mit W3C-Technologien erstellten, barrierefrei zugäng-
lichen „Nur-Text-Version”, mit äquivalenten Inhalten angeraten (WAI 11.4,
BITV 11.3). Dabei ist sicherzustellen, dass diese immer dem Aktualitätsgrad
der Hauptseite entspricht (WAI 6.2, BITV 6.2).

Barrierefreiheit und Seitenaufbau/Layout Checkliste Seitenaufbau/Layout:


Ein durchgängiges Layout erleichtert die Orientierung für alle Nut- - Einheitliches Layout für die gesamte
Internetpräsenz
zer und erhöht die Wiedererkennung einer Internetpräsenz. Einer guten
- Konsistente Verwendung der Naviga-
und verständlichen Benutzerführung liegt die konsistente Verwendung von tionsmechanismen
Funktionsbereichen und Navigationslisten zugrunde.

Barrierefreiheit und Buttons in Forms


Buttons in Formularen können per CSS gestaltet werden. Die Be-
schriftungen sollten selbsterklärend die interaktive Funktion des Buttons be-
schreiben. Wird, etwa aus gestalterischen Gründen, ein von Screenreadern
nicht sinnvoll erfassbares Symbol (z. B. „>>“) oder ein fremdsprachiger Be-
griff (z.B. „Go“ oder „OK“) verwendet, muss ein aussagekräftiges <title>-At-
tribut eingesetzt werden.

Barrierefreiheit und Tabellen Checkliste Layouttabellen:


Layouttabellen: Vom Einsatz von Tabellen für den Grundaufbau - Seitenlayout mit Stylesheets, nicht mit
Tabellen formatieren
eines Seitenlayouts wird abgeraten (WAI 5.3, BITV 5.3). Hilfsmittel wie
- Tabellen für Layoutzwecke nur dann ein-
Screenreader interpretieren die Seiten in Zeilen linear von links nach rechts. setzen, wenn eine lineare Bearbeitung
Sie geben im Falle einer Layouttabelle deren Inhalte nur dann sinnvoll wie- der Seite ihrem Sinn entspricht
der, wenn die Seite diesem linearen Aufbau entsprechend strukturiert ist. - Wenn Tabellen zu Layoutzwecken ver-
wendet werden, kein zusätzliches struk-
Wird dennoch eine Tabelle zu Layoutzwecken verwendet, darf
turelles HTML-Markup für Textauszeich-
kein weiteres strukturelles HTML-Markup zur Textauszeichnung verwendet nungen einsetzen
werden; hierfür sind Stylesheets einzusetzen (WAI 5.4, BITV 5.4).
Allgemein sollte das Layout der Seite allein durch den Einsatz von
Stylesheets formatiert werden. Das HTML-Dokument muss gelesen werden
können, wenn alle zugeordneten Stylesheets abgeschaltet wurden.
Datentabellen: Da Hilfsmittel wie Screenreader die vorliegenden
Informationen linear in Zeilen bearbeiten, führt eine Datentabelle schnell
zur Verwirrung, wenn sie nicht mit den korrekten TABLE-Attributen ausge-
zeichnet – und damit als Tabelle erkennbar – gemacht wurde.
Um eine Tabelle auch für Menschen mit Hilfsmitteln lesbar und
verständlich darzustellen, sind die Zeilen- und Spaltenüberschriften klar zu
kennzeichnen. Dazu müssen die HTML-TABLE-Elemente TR, TD, TH und CAP-
TION verwendet werden (WAI 5.1, BITV 5.1).
Bei einer Tabelle mit zwei oder mehr logischen Ebenen von Zeilen- Checkliste Datentabellen:
und Spaltenüberschriften müssen die Daten- und Überschriftenzellen einan- - Zeilen- und Spaltenüberschriften kenn-
zeichnen
der klar zugeordnet werden. Dies geschieht mittels Einsatz von THEAD, TFOOT
- Bei zwei und mehr logischen Ebenen von
und TBODY, um Zeilen zu gruppieren, COL und COLGROUP, um Spalten zu Zeilen- und Spaltenüberschriften sollen
gruppieren, und mit „axis“-, „scope“- und „headers“-Attributen, um komplexe- Daten- und Überschriftenzellen klar zu-
re Zusammenhänge zwischen Daten zu beschreiben (WAI 5.2). geordnet werden

Barrierefreiheit und Spalten Checkliste: Spalten


In einem Layout sollte die Erstellung von Textspalten ausschließ- - Textspalten nur mittels Stylesheets for-
matieren
lich über Stylesheets (CSS 2) erfolgen. Dies ermöglicht dem Nutzer das Aus-
- Keine Frames für ein Spaltenlayout ein-
schalten der Textspalten, um einen für ältere Screenreader lesbaren Text- setzen
block zu erhalten.
Die Erstellung von Textspalten mit Hilfe von Frames ist nicht zu
empfehlen, da dies leicht zu Verwirrungen führen kann und der Einsatz von
Frames zusätzliche Probleme birgt (siehe Abschnitt „Barrierefreiheit und
Frames“).

Barrierefreiheit und Listen Checkliste Listen:


Um eine korrekte Interpretation von Listen durch Screenreader zu - Für Listen das korrekte HTML-Markup ver-
wenden
ermöglichen, müssen diese mit dem entsprechenden HTML-Markup ausge-
- Keine HTML-Listenelemente für Textein-
zeichnet werden. HTML-Elemente wie LI, OL, UL und DL markieren Listenele- züge verwenden
mente entsprechend der Listennatur und dürfen auch nur für Listen und - Aufzählungszeichen aus Bildelementen
nicht für Texteinzüge im Fließtext etc. verwendet werden (WAI 3.6, BITV 3.6). mit entsprechenden Namen und <alt>-
Texten versehen
Werden Bildelemente als Aufzählungszeichen verwendet, so müs-
sen diese mit einem eindeutigen Namen benannt und ggf. mit <alt>-Text
versehen werden.

Barrierefreiheit und Frames Checkliste Frames:


Blinde Nutzer navigieren mit der Tastatur und ohne Maus auf - Nach Möglichkeit keine Frames verwen-
den
Internetseiten. Dabei bleiben Screenreader häufig in einzelnen Frames hän-
- Wenn Frames, mit <NOFRAMES>-Version
gen und erreichen nicht alle Informationen. Deswegen sollte auf den Einsatz hinterlegen
von Frames verzichten werden. - Frames eindeutig mit Ortsbezeichnung
Werden Frames eingesetzt, so muss jeder Frame eindeutig mit der An- und Funktion benennen
- Jeden Frame mit einem Namen versehen
gabe des zugewiesenen Bildschirmbereichs und seiner Funktion (zum Beispiel
oben rechts Logo-Frame, oben Mitte Identitäts-Frame usw.) (WAI 12.2, BITV 12.2)
und über das <title>-Attribut im FRAME-Element mit einem schlüssigen Namen
versehen werden (zum Beispiel Logo, Identität usw.) (WAI 12.1, BITV 12.1).
Die einzelnen Seiten und Frames müssen mit Hilfe der Tastatur
navigierbar sein.
50 Zusatzinformationen

Eine Unterlegung der Frameversion mit einer No-Frame-Version


erleichtert die Lesbarkeit der Website mit Screenreadern und älteren Brow-
sern, die keine Frames unterstützen. Was zwischen <NOFRAMES> und
</NOFRAMES> steht, wird auf Browsern angezeigt, die keine Frames beherr-
schen, und von framefähigen Browsern als Tag erkannt und ignoriert.
Mit der Hinterlegung einer <NOFRAMES>-Version ist auch die An-
forderung gewährleistet, dynamische Inhalte zugänglich zu halten (WAI
6.5, BITV 6.5).

Barrierefreiheit und Schriften Checkliste Schriften:


Der Einsatz unterschiedlicher Schriftarten soll sich auf ein Mini- - Schriftart, -größe und -farben mit CSS
formatieren
mum beschränken.
- Für Schriftarten, -größen und -farben kei-
Um sehbehinderten Menschen die Möglichkeit zu geben, die Dar- ne <FONT>-Tags verwenden
stellung der Schriftgröße individuell in ihrem Browser einzustellen, sollen - Schriftart und -größe nicht in absoluten
die Schriftformate nie in absoluten Einheiten (WAI 3.4) und nicht mit dem Einheiten angeben
- HTML-Elemente und -Attribute korrekt
<FONT>-Tag in HTML, sondern mit der „font”-Property in CSS angegeben
einsetzen (zwischen Struktur und Präsen-
werden (WAI 3.3, BITV 3.4). tation trennen)
Als Mindestgröße wird eine Schriftgröße empfohlen, die der Größe - Schriftarten ohne Serifen verwenden
von 11 pt entspricht. Der Standardabstand zwischen den Buchstaben darf zu- - Unterschiedliche Schriftarten sparsam
einsetzen
gunsten der Lesbarkeit nicht verringert werden.
- Schriftgröße entsprechend 11 pt ange-
Die Angabe mehrerer alternativer Fonts im Quelltext (zum Beispiel ben
Verdana, Helvetica, Arial, Sans Serif) erhöht die Wahrscheinlichkeit, dass ei- - Standardabstand zwischen den Buchsta-
ne der angegebenen Schriften auf dem System des Nutzers verfügbar ist. ben nicht verringern
- Keine <BLINK>-Tags verwenden
Auf den Einsatz eines <BLINK>-Tags ist zu verzichten, da Blink-
effekte nicht mit dem Einsatz von Vergrößerungs-Software kompatibel sind
und allgemein desorientierend wirken können (BITV 7.2).
Strukturelle HTML-Elemente (wie H1, H2 usw.) dürfen nur für Funk-
tionen eingesetzt werden, für die sie vorgesehenen sind (WAI 3.5, BITV 3.5).
Sie dürfen nicht für rein grafische Zwecke eingesetzt werden, da Hilfssoft-
ware die strukturelle Auszeichnung für die richtige Interpretation der Inhalte
benötigt. Das heißt zum Beispiel, wenn ein Wort im Fließtext mit dem Struk-
turelement H3 ausgezeichnet wurde, um es fett hervorzuheben, anstelle der
hierfür vorgesehenen Präsentationsauszeichnung „bold“, wird ein Screen-
reader dieses Wort durch Pause und Betonung missverständlich als Über-
schrift vorlesen.
Umrechnungstabelle für Schriftgrößen
Nachfolgende Tabelle zeigt die Umrechnung der Schriftgrößen
zwischen den gängigsten Layoutprogrammen und Browsertypen.
52 Zusatzinformationen

Barrierefreiheit und Farben Checkliste Farben:


Ein bewusster Einsatz von Farben steigert die Klarheit und Lesbar- - Auf ausreichenden Kontrast zwischen
Text- und Hintergrundfarbe achten
keit einer Internetpräsenz. Dem ausreichenden Kontrast zwischen den Text-
- Keine Rot-Grün-Kontraste einsetzen
und Hintergrundfarben ist eine besondere Aufmerksamkeit zu schenken, so - Informationen nicht allein durch Farben
dass auch Nutzer mit schwarz-weißen Bildschirmen oder Farbenfehlsichtig- vermitteln
keit die Inhalte ohne Schwierigkeiten erkennen können (WAI 2.2, BITV 2.2/1). - Farben in Zahlen und mit CSS formatieren

Der Einsatz von Rot und Grün als Kontrastfarben ist zu vermeiden,
da die Rot-Grün-Schwäche eine der am häufigsten verbreiteten Farbenfehl-
sichtigkeiten ist.
Eingesetzte Grafiken müssen verständlich sein, wenn sie ohne Far-
ben betrachtet werden, d. h., Informationen dürfen nicht ausschließlich
über Farbe vermittelt werden. Der Hinweis „Klick den grünen Button!” zum
Beispiel ist nicht sinnvoll (WAI 2.1, (BITV 2.1)).
Farben sollen immer in Zahlen (RGB oder Hexadezimal) und über
Stylesheets angegeben werden, so dass die endgültige Farbwahl dem Nutzer
durch Einstellungen im Browser vorbehalten bleiben.

Barrierefreiheit und Bilder, Fotos und Grafikelemente Checkliste Fotos und Grafikelemente:
Bilder, Grafiken und Symbole – alle reinen Bild-Informationen also – - Angabe eines Textäquivalents (<alt>-
Text) für jedes Bildelement
haben nur für Sehende einen Wert. Von Hilfsmitteln wie Screenreadern
- Einfügen eines Links, der auf eine genauere
können sie nicht erkannt und vermittelt werden. Auch Nutzer, die die Bild- Beschreibung des Bildes verweist
darstellung ausgeschaltet haben (zum Beispiel wegen zu langsamer Über- - Bei Bilder-Links: Eindeutige Beschrei-
tragungsrate), erhalten keine Informationen über die als Bild dargestellten bung des Ziels im <alt>-Text
- Wenn möglich, HTML-Markup (zum Bei-
Grafiken und als Bilder angelegten Links.
spiel MathML) für Grafiken verwenden
Bildelemente einer Seite können nur von Sehenden und visuellen - Typografie-Elemente und Texte als Bild
Browsern als solche wahrgenommen werden. Blinde Nutzer beispielsweise, (.jpg oder .gif) vermeiden
aber auch Suchmaschinen sind darauf angewiesen, dass die Informationen,
die Bild, Symbol oder Grafik beinhalten, in Textform hinterlegt werden, um
einen Zugang zum Bildinhalt zu erhalten. Dies kann durch den Einsatz eines
aussagekräftigen Textes im <alt>-Attribut des IMG-Elementes für jedes Bild-
element erreicht werden. Gegebenenfalls ist über die Verwendung einer
<longdesc> nachzudenken. (WAI 1.1, BITV 1.1).
So genannte Spacer oder unsichtbare Platzhalter benötigen zwar
keinen <alt>-Text, sollen aber klar als Layoutelement benannt sein.
Falls ein Bildelement einen Link aufruft, sollte der Anlass und das
genaue Ziel des Links im <alt>- oder im <title>-Text bezeichnet werden.
Bilder und Grafiken sollen reduziert und gezielt zum Einsatz kom-
men. Dies kommt allen Nutzern des Internets zugute, zumal die Ladezeiten
verringert werden.
Besteht für eine Grafik, zum Beispiel eine mathematische Glei-
chung (MathML-Element), die Möglichkeit, diese durch HTML-Markup dar-
zustellen, ist diese Methode zu bevorzugen (WAI 3.1, BITV 3.1).
Wenn der Inhalt einer komplexeren Grafik (zum Beispiel einem Checkliste Diagramme:
Diagramm) nicht in einem kurzen <alt>-Text wiedergegeben werden kann, - Angabe einer kurzen Textbeschreibung
(<alt>-Text)
gibt es die Möglichkeit, die Grafik mit einem Link zu einer Unterseite mit ei-
- Einfügen eines Links, der auf eine genauere
ner ausführlichen Beschreibung zu versehen. Beschreibung des Bildes verweist
Bei Image-Maps ist eine alternative Bildbeschreibung (WAI 1.1) Checkliste Image-Maps:
ebenso notwendig wie die Angabe von Anzahl und Ziel enthaltener Links. - Angabe eines Textäquivalents für das Ge-
samtbild
Besonders wichtig ist die eindeutige und klare Benennung angebotener
- Angabe einer Liste mit Übersicht, Anzahl
Links. und Ziel aller enthaltenen Links
Image-Maps sollen immer clientseitig eingerichtet werden, da sie - Möglichst nur clientseitige Image-Maps
nur dann mit der Tastatur (ohne Maus) angesteuert werden können (WAI bereitstellen
- Bei serverseitigen Image-Maps redun-
9.1). Kann aus bestimmten Gründen nur eine serverseitige Image-Map ein-
dante Textlinks anbieten
gerichtet werden, so ist diese unbedingt mit redundanten Text-Links auszu-
statten (WAI 1.2, BITV 1.2).

Barrierefreiheit und Multimedia Checkliste Multimedia:


Grundsätzlich gelten für Bewegtbilder wie Video und Animatio- - Hinterlegung eines Textäquivalents für
nen die gleichen Richtlinien wie für stehende Bilder. die visuellen Inhalte von Bewegtbildern
- Textbeschreibung der visuellen Inhalte
Um die Bewegtbild-Informationen für Blinde zugänglich zu ma-
(bei größerem Umfang sollte auf eine se-
chen, müssen Video und Animationen mit einem Textäquivalent hinterlegt parate Seite mit Beschreibung verlinkt
werden (WAI 1.1). Beim Einsatz von Video und Animationen ist es nahe lie- werden)
gend, die visuellen Inhalte auf einer Extraseite als Text ausführlich zu be- - Audiobeschreibung der visuellen Inhalte
- Textbeschreibung aller Audio-Inhalte, bei
schreiben und auf diese einen Link zu legen.
Video in Form von Untertiteln
Eine Audio-Beschreibung der visuellen Information des Videos - Keine Blink- und Flackereffekte auf dem
oder der Animation ist vorgeschrieben (WAI 1.3, BITV 1.3). Für Hörgeschädig- gesamten Bildschirm einsetzen
te ist eine visuelle Übersetzung der Audio-Informationen notwendig. So - Blinkenden Text nur über Stylesheets ein-
setzen
muss die Sprachspur des Videos oder der Animation als Untertitel synchron
zum Ablauf sichtbar sein (WAI 1.4, BITV 1.4).
Alle zeitgesteuerten Medien müssen durch den Nutzer unterbro-
chen oder angehalten werden können (WAI 7.3, BITV 7.3). Dabei sind auch
die Eingabearten über Tastatur, Stimme und Mund- oder Kopfstab zu berück-
sichtigen (WAI 9.3, BITV 9.3). Kann eine Unterbrechung oder das Anhalten
durch den Nutzer nicht gewährleistet werden, ist auf die Verwendung von
sich bewegenden Inhalten ganz zu verzichten.
Auch Y Animated GIFs müssen mit einem Alternativtext hinterlegt
werden.
Auf den Einsatz von Blink- und Flackereffekten des gesamten Bild-
schirms ist vollkommen zu verzichten (WAI 7.1, BITV 7.1), da dies für Men-
schen mit fotosensitiver Epilepsie schwere Folgen haben kann: Im Bereich
von 4 bis 59 Hertz oder bei einem schnellen Wechsel von Dunkel nach Hell
kann die Betrachtung dieser Effekte einen Anfall auslösen.
Blinkender Text stellt für viele Hilfsmittel ein Hindernis dar, da sie
über keine Übersetzungsmöglichkeiten verfügen. Daher sollen diese Effekte
ausschaltbar sein (WAI 7.2, BITV 7.2). Bei Einsatz des HTML-Elements BLINK
ist eine Nutzersteuerung nicht möglich. Werden Text-Blinkeffekte über das
CSS-Attribut style=„text-decoration:blink“ zugewiesen, kann der Nutzer die-
sen Effekt über seinen Browser abschalten.
54 Zusatzinformationen

Barrierefreiheit und Formulare Checkliste Formulare:


Formulare werden besser barrierefrei zugänglich, wenn die Zuord- - Formularbeschriftung immer direkt vor
dem Formularfeld positionieren
nung zwischen dem Namen des Formularfeldes und dem Feld selbst eindeu-
- Formlose Anfrage anbieten
tig ist. Dies wird durch eine Positionierung des Feldnamens direkt vor dem - Bedienung mit Tastatureingabe ermög-
dazugehörigen Formularfeld erzielt. Die Verbindung zwischen Beschriftung lichen
und Formularfeld darf nicht unterbrochen werden (WAI 10.2, BITV 10.2). - Logische Tab-Reihenfolge anlegen

Zu beachten ist die logische Reihenfolge der Formularbearbeitung


mit der Tastatur (Tab-Sprünge).
Es ist sinnvoll, mittels eines direkten E-Mail-Links zur entsprechen-
den Adresse eine formlose Variante des Formulars anzubieten. Vor diesem
Link sollte eine kurze Beschreibung der benötigten Daten stehen.

Barrierefreiheit und Applets/Scripts Checkliste Applets/Scripte:


- Applets und Scripts direkt zugänglich
Applets und Scripts (zum Beispiel eingebettete Java-Applikationen)
programmieren
sind eigenständige kleine Programme, die automatisch auf dem Rechner des - Nicht zugängliche Applets und Skripte
Nutzers ablaufen, wenn dieser eine Internetseite mit Applets besucht. Dieser mit Alternativinformationen hinterlegen
Vorgang kann in den Browservoreinstellungen unterdrückt werden, da Applets - Bereitstellung einer alternativen, barrie-
refrei zugänglichen Seite
immer ein gewisses Sicherheitsrisiko bedeuten.
- Die Alternativinformationen müssen
Manche Browser und Hilfsmittel für Behinderte unterstützen keine über Tastatur zugänglich sein
Applets (zum Beispiel der DOS-Browser Lynx). Daher sollen Applets nur dann - Nur logische, geräteunabhängige Ereig-
eingesetzt werden, wenn gleichzeitig eine Alternative hinterlegt wird. Es nishändler einsetzen

muss darauf geachtet werden, dass die Seite ihren vollen Informationswert
behält, selbst wenn Applets und Scripts nicht unterstützt oder absichtlich ab-
geschaltet werden (WAI 6.3, BITV 7.3).
Beim Einsatz von Applets und Scripten muss sichergestellt sein,
dass unabhängig vom Eingabegerät navigiert werden kann. So dürfen keine
gerätespezifischen Event-Handler (Ereignishändler) eingesetzt werden, son-
dern ausschließlich logische, geräteunabhängige (wie zum Beispiel onFocus,
onBlur) (WAI 9.2 und 9.3, BITV 6.4, 9.2, 9.3).
Eine weitere Option ist die Erstellung barrierefrei zugänglicher Ap-
plets und Scripts, da sie unabhängig von Browser und Hilfssoftware
abgespielt werden können. Anbieter von entsprechenden Produkten publi-
zieren Hinweise zur barrierefreien Anwendung ihrer Programme auf folgen-
den Websites:

Java Accessibility (Trace R&D Center)


http://trace.wisc.edu/world/java/java.htm

Active Accessibility (Microsoft Corporation)


http://www.msdn.microsoft.com/library/default.asp?url=/nhp/
Default.asp?contentid=28000544

http://www.microsoft.com/enable/default.htm.
Barrierefreiheit und Struktur/Orientierung Checkliste Struktur/Orientierung:
Jede Website muss inhaltlich klar und einfach strukturiert sein. - Seiteninhalte klar und verständlich struk-
turieren
Über die Struktur sollen Informationen bereitstehen, zum Beispiel in Form
- Leicht zu handhabende, kleine Informa-
einer Sitemap oder eines Inhaltsverzeichnisses (WAI 13.3, BITV 13.3). Diese tionsblöcke bilden
Übersichten sind am zugänglichsten, wenn sie in einer einspaltigen Liste an- - Einspaltige Sitemaps oder Inhaltsver-
geordnet sind. zeichnisse anbieten

Große Informationsblöcke sollen nach Möglichkeit in leicht hand-


habbare Gruppen unterteilt werden (WAI 12.3, BITV 13.3).

Barrierefreiheit und Navigation Checkliste Links:


Navigationsmechanismen sind in konsistenter Weise zu verwen- - Durchgängig gleiche Positionierung der
Funktions-Links auf der gesamten Website
den (WAI 13.4, BITV 13.4). Zudem sind Navigationsleisten bereitzustellen, die
- Links mit inhaltlich eindeutiger Beschrif-
den Navigationsmechanismus hervorheben (WAI 13.5, BITV 13.5, zum Bei- tung
spiel Haupt- und Untermenü). Dadurch wird die Navigationsstruktur ver- - Links zu Unterkapiteln mit einer Kurzbe-
ständlicher und der Zugriff auf sie erleichtert. schreibung versehen
- Eine horizontale Aufreihung von Links im-
Eine Website wird allgemein benutzerfreundlicher durch die
mer mit ausreichendem Abstand oder
gleich bleibende Position funktionaler Links über die gesamte Site und die Sonderzeichen voneinander trennen
Platzierung wichtiger Navigationselemente direkt am Seitenbeginn. Nutzer, - Alle Links für die Tab-Taste ansteuerbar
die mit ihrem Screenreader die Seite nach Links abtasten, benötigen eindeu- anlegen
- Grafische Schaltflächen ausreichend
tige Link-Benennungen, die in wenigen Worten deutlich sagen, zu welchen
groß gestalten
Informationen die Verknüpfungen führen (WAI 13.1, BITV 13.1). Eine Verlin-
kung mit dem Hinweis „Klicken Sie hier!” bietet einem blinden Nutzer keine
weiterführenden Informationen.
Horizontal nebeneinander angelegte Links benötigen genügend
Abstand oder ein Sonderzeichen als Trennelement. Andernfalls können
Screenreader Schwierigkeiten bei der Erkennung der Links bekommen. Eine
vertikale Anordnung ist zu bevorzugen.
Alle Links müssen über die Tastatur ansteuerbar sein.
Bildgrafiken als Links müssen mit einem <alt>-Text hinterlegt wer-
den, der klar den Sinn und das Ziel der Verlinkung nennt. Dies ist bei exter-
nen Links, die auf eine andere Domain verweisen, besonders wichtig.
Links, die auf Unterkapitel verweisen, sollen eine kurze Inhaltsbe-
schreibung beinhalten.
Bildelemente und Schaltflächen, die mit einer Verlinkung verse-
hen sind, sollen groß genug sein, dass sie von Menschen mit motorischen
Einschränkungen auch mit der Maus angewählt werden können.
Metadaten, die semantische Informationen über Webseiten anbie-
ten (Autor, Typ des Inhalts usw.) (WAI 13.2, BITV 13.2), sind bereitzustellen.
Dies sollte nach den Spezifikationen von RDF geschehen (Resource Descrip-
tion Framework), wie unter http://www.w3.org/RDF/ beschrieben.
Pop-ups: Die Hilfssoftware hat Schwierigkeiten, Inhalte in einem Checkliste Pop-ups:
neuen Fenster zu verlinken oder das aktuelle Fenster zu wechseln. Die Funk- Keine Pop-up-Fenster einbinden

tion von Pop-ups ist zu vermeiden, bis sie von Nutzerseite aus unterbunden
werden kann (WAI 10.1, BITV 10.1).
56 Zusatzinformationen

Barrierefreiheit und Aktualisierung Checkliste dynamische Inhalte:


Bei dynamischen Inhalten muss sichergestellt sein, dass die zur Alle Alternativen für dynamische Inhalte
müssen parallel zu den dynamischen In-
Verfügung gestellten Alternativen dem Aktualitätsgrad der dynamischen
halten aktualisiert werden.
Inhalte entsprechen. Automatische Weiterleitung und Aktualisierung der
Seiten sind zu vermeiden, da diese Funktionen mit den gängigen Hilfsmitteln
nicht kompatibel sind (BITV 10.1).
Aufgrund der Tatsache, dass für eine barrierefreie Zugänglichkeit
der Web-Inhalte in vielen Fällen mit Textäquivalenten oder komplett alter-
nativen Seiten gearbeitet werden muss, ist die Aktualisierung aller dynami-
schen Inhalte eine vorrangige Richtlinie für den barrierefreien Zugang. Erst
wenn alle Nutzer an die gleichen, aktuellen Inhalte gelangen, ist der gefor-
derte universelle Zugriff möglich (BITV 6.2).
Weiterleitung: Screenreader haben Schwierigkeiten mit der auto- Checkliste Weiterleitung:
matischen Aktualisierung von Seiteninhalten. Mindestanforderung ist, dem - Hinweis auf automatischen Neuaufruf
der Seite geben
Nutzer einen Hinweis auf diese Funktion zu geben und ihn entscheiden zu
- Keine Verwendung des Refresh-Befehls
lassen, ob die Seite aktualisiert werden soll. Bis zur browserseitigen Unter- - Serverseitige automatische Weiterlei-
stützung dieser Funktionswahl sollte der Refresh-Befehl nicht verwendet tung einsetzen, andernfalls einen norma-
werden (WAI 7.4, BITV 7.4). len Link verwenden

Auch eine automatische Weiterleitung auf andere Seiten verur-


sacht Hilfssoftware-Schwierigkeiten. Deshalb ist auf eine automatische
Weiterleitung zu verzichten (WAI 7.5, BITV 7.5). Nur eine serverseitig einge-
richtete Weiterleitung ist unproblematisch.
Barrierefreiheit und Download-Dateien Checkliste Download-Dateien:
PDF ist ein offenes, weit verbreitetes und plattformunabhängiges - Auf den Einsatz von PDF-Dokumenten
hinweisen
Dateiformat, das von Adobe Systems entwickelt wurde. Durch dieses, im
- Links zu den entsprechenden Websites
Internet für Downloads eingesetzte Dateiformat ist es möglich, Dokumente von Adobe Systems anbieten
gleichen Inhalts sowohl für den Bildschirm als auch für den Druck zu gene- - Dokumente in unterschiedlichen Datei-
rieren. Um eine PDF-Datei zu öffnen, ist die Zusatzsoftware Acrobat Reader formaten anbieten (PDF, RTF, TXT)
- MS-DOS-Konventionen für Dateibenen-
notwendig, die von Adobe Systems frei zur Verfügung gestellt wird.
nungen einhalten
Da es sich um ein grafisches Format handelt, sind PDF-Dateien in
der Regel nicht zugänglich für Nutzer von Screenreadern und nicht grafi-
schen Browsern.
Deshalb hat Adobe Systems einen Service eingerichtet, der PDF-Da-
teien in ASCII-Text oder ein HTML-Dokument übersetzt. Informationen und
Anweisungen können auf der folgenden Website eingesehen werden:
http://access.adobe.com.
Allerdings liefert die Konvertierung komplexer, grafischer PDF-Do-
kumente nicht unbedingt ein annehmbares Ergebnis. Vor dem Einsatz eines
PDF-Dokumentes sollte der Nutzer informiert werden, dass dieses Format
zum Einsatz kommt, dass eine Zusatzsoftware notwendig ist und wo diese
erhältlich ist: http://www.adobe.com/products/acrobat/main.html.
Eine weitere Möglichkeit ist, das Angebot um mehrere, unter-
schiedliche Dateiformate zu erweitern, darunter Standardformate wie RTF
und TXT.
Bei allen Dateien sollen die MS-DOS-Konventionen für Namens-
benennung der Dateien eingehalten werden: maximal 8 Zeichen, einen
Trennpunkt und eine Dateiformat-Erweiterung aus 3 Zeichen. 12345678.123
58 Zusatzinformationen

Barrierefreiheit und Sprache Checkliste Sprache:


Es ist auf einen allgemein verständlichen Sprachgebrauch mit ein- - Einfache und verständliche Sprache ver-
wenden
fachen und gebräuchlichen Begriffen zu achten (WAI 14.1, BITV 14.1).
- Fachausdrücke in einem Glossar erläu-
Es ist ratsam, sich knapp, aber klar und verständlich auszudrücken. tern
Lesbarkeitsstatistiken, die in einigen Programmen zur Textverar- - Sprachwechsel kennzeichnen
beitung verfügbar sind, können brauchbare Indikatoren für die Klarheit und - Zitate kennzeichnen
- Fachausdrücke und Abkürzungen kenn-
Einfachheit eines Textes sein. Es ist besser, einen professionellen Korrektor zu
zeichnen
bitten, den Inhalt auf seine Klarheit zu überprüfen. Zu prüfen sind unter an- - Professionelle Korrektoren einsetzen
derem Fremdwörter oder Fachausdrücke.
Jeder Text sollte vor seiner Einstellung ins Internet eine Recht-
schreibprüfung durchlaufen. Personen, die eine Seite mit einem sprachge-
nerierenden Browser lesen, sind möglicherweise nicht in der Lage, falsch ge-
schriebene Wörter zu verstehen.
Sind Fachausdrücke unvermeidlich, sollen diese an geeigneter
Stelle mit Hilfe eines Glossars erläutert werden.
Für Screenreader sind Sprachwechsel, Fachtermini und Abkürzun-
gen oft ein Hindernis. Daher sollen Wechsel in der natürlichen Sprache (WAI
4.1, BITV 4.1), Fachausdrücke und Abkürzungen mit einem entsprechendem
MARKUP (dem <lang>-Attribut) ausgezeichnet werden.
Um Zitate korrekt zu interpretieren, benötigt gängige Hilfssoft-
ware die dafür vorgesehenen HTML-Elemente <BLOCKQUOTE> oder
<Q> (WAI 3.7). Ist ein Textabschnitt dementsprechend markiert, wird er
als Zitat ausgegeben oder vorgelesen.

Überprüfung der Barrierefreiheit Wichtige Überprüfungsmethoden auf


Die Überprüfung der barrierefreien Zugänglichkeit einer Internet- Barrierefreiheit:
- Überprüfung durch ein automatisches
präsenz sollte sowohl mit automatischen Tools als auch von Personen durch-
Tool (zum Beispiel http://bobby.cast.org/)
geführt werden. Automatisierte Methoden sind im Allgemeinen schnell und - Überprüfung der Syntax (zum Beispiel
bequem, können aber nicht alle Zugänglichkeitsprobleme erkennen. Eine HTML, XML usw.)
Überprüfung durch Personen mit unterschiedlichen Qualifikationen ist hilf- - Überprüfung von Stylesheets (zum Bei-
spiel CSS)
reich, um eine klare Sprache und einfache Navigation sicherzustellen.
- Test auf einem Text-Browser
Es ist sinnvoll, die Überprüfungen in den frühesten Stufen der Ent- - Test auf einem Grafik-Browser:
wicklung zu beginnen, da zeitig erkannte Zugänglichkeitsprobleme einfa- - mit Ton und Grafik aktiviert,
cher zu korrigieren und zu vermeiden sind. - ohne Grafiken,
- ohne Ton,
Ein weiterer empfohlener Standard der WAI ist, jede Seite nach ih-
- ohne Maus (wichtig bei Einsatz von Lay-
rer Überprüfung mit einer Dokumententyp-Erklärung (DTD) am Anfang der outtabellen und Frames)
Seite auszustatten (WAI 3.2). Dies dient der Erkennung des Zugänglichkeits- - mit deaktivierten Frames, Scripten,
levels sowie weiterer überprüfter und eingehaltener Standards. Stylesheets und Applets
- Test auf mehreren, neueren und älteren
Browserversionen
- Einsatz einer Rechtschreib- und Gram-
matikprüfung
- Überprüfung auf Klarheit und Einfachheit
durch Personen
- Direkte Überprüfung durch behinderte
Menschen (Anfänger und Fortgeschritte-
ne) kann ein wertvolles Feedback über
Probleme der Zugänglichkeit oder Ver-
wendbarkeit und deren Umfang liefern.
Linkliste zum Thema „Barrierefreier Zugang“
Die offiziellen Richtlinien für barrierefreien Zugang zu Internet-
inhalten der Web-Accessibility-Initiative des W3-Konsortiums sind unter
folgender Adresse im Internet zu finden:

- http://www.w3.org/WAI (englisch)
- http://www.w3.org/WAI/Resources/#ts (Übersetzungen)
- http://www.w3.org/WAI/wcag-curric (Curriculum, englisch)

Die Vorgaben der Barrierefreie-Informationstechnik-Verordnung


für öffentlich zugängliche Angebote von Behörden der Bundesverwaltung
können hier nachgelesen werden:

http://www.bmi.bund.de/dokumente/Artikel/ix_90156.htm

Das E-Government-Handbuch des Bundesamtes für Sicherheit in


der Informationstechnik (BSI) gibt Empfehlungen zur Organisation und zum
IT-Einsatz im E-Government:
http://www.bsi.bund.de/fachthem/egov/6.htm

Im deutschsprachigen Internet bieten darüber hinaus die Web-


sites folgender Initiativen Informationen und Materialien zum Thema
barrierefreier Zugang an:

- http://www.barrierefreies-webdesign.de
- http://www.einfach-fuer-alle.de
- http://selfaktuell.teamone.de/artikel/design/barrierefrei

Für die Überprüfung von Websites auf ihre barrierefreie Zugänglich-


keit bieten folgende Adressen hilfreiche Informationen und Werkzeuge:

- http://www.w3.org/WAI/eval (englisch)
- http://www.w3.org/WAI/ER/existingtools.html (englisch)
- http://bobby.cast.org (englisch)
- http://www.accessibilitymonitor.com (englisch)
Glossar
62 Glossar

Glossar
Nachstehend werden allgemeine Begriffe Attachment Baud
aus Grafik- und Screendesign und Begriffe, Eine beliebige Datei, die als Anlage mit einer Nach Emile Baudot benannte Maßeinheit für
die im vorliegenden Styleguide eingeführt E-Mail versandt wird, zum Beispiel Textda- die Geschwindigkeit einer Datenübertra-
wurden, alphabetisch aufgelistet und erläu- teien und Bilder. gung, zum Beispiel durch ein Modem. 28.800
tert. Technische Begriffe aus dem Internet Baud entsprechen der Übertragung von
werden im Nachschlagewerk der Initiative 28.800 Bit/Sekunde.
BundOnline 2005 Auflösung
(http://www.bund.de/BundOnline- Die Wiedergabefeinheit von Elementen bei
2005/SAGA/Glossar-.6343.htm) erläutert. ihrer Zusammensetzung zu Bildern. Je höher Bildschirmauflösung
die Auflösung eines Bildes, desto detailrei- Die durch ihre Pixelanzahl definierte Wieder-
cher ist seine Darstellung bzw. die Möglich- gabefeinheit von Monitoren.

A keit seiner Vergrößerung. Die Auflösung wird


je nach Anwendung und Verfahren in dpi
Bildsprache
(Dots per Inch), ppi (Points per Inch) oder lpi
Die durch ihren Stil hervorgerufene Anmu-
(Lines per Inch) gemessen.
Active Link tung von Abbildungen.
Engl. für „betätigter Verweis“. Visuelle Aus-
zeichnung eines Text-Hyperlinks während Ausrichtungsraster
Bildunterschrift
des Mausklicks. Beispielweise kann die Farbe Die feinste Unterteilung einerY Rastereinheit.
Der einem Bild zugeordnete, den Bildinhalt
oder Unterstreichung eines Links während Der Ausrichtungsraster dient der einheit-
beschreibende oder interpretierende Text.
des Klicks wechseln. Diese Auszeichnung sig- lichen Anordnung detaillierter Gestaltungs-
nalisiert dem Nutzer, dass soeben eine Inter- elemente in einem Y Grundraster.
aktion aufgerufen wurde. Bildwortmarke
(Y Hyperlink) Eine gestaltete Kombination von einer Abbil-
Auszeichnung
dung mit einem Schriftzug. Die auch als Logo
Das Hervorheben einzelner Textteile durch
bezeichnete Bildwortmarke drückt die Iden-
Additives Farbsystem Varianten der Grundschrift, zum Beispiel kur-
tität von Institutionen, Firmen, Marken oder
System zur Farbdarstellung auf Bildschirmen. sive oder fette Schnitte. Weitere Auszeich-
Veranstaltungen visuell aus.
Aus den Y RGB-Farben Rot, Grün und Blau las- nungsmöglichkeiten sind Kapitälchen oder
sen sich alle weiteren, am Bildschirm sichtba- Großbuchstaben, das Unterstreichen oder
ren Farben mischen. Zu gleichen Anteilen ge- farbliche Hervorstellen von Texten. Bit
mischt, ergeben sich je nach Farbintensität Die Abkürzung für „Binary Digit“. Ein Bit ist
Weiß bis Schwarz. die kleinste, einer Speicherzelle entsprechen-
B de Informationseinheit im binären Zahlensy-
stem. Ein Bit kann entweder den Wert 0 oder
Animation
1 annehmen; 8 Bit werden zu einem Byte zu-
Die Darstellung von sich bewegenden Bild-, Banner sammengefasst.
Text- oder Grafikelementen, so dass zum Bei- Eine kleine Werbefläche auf einer Internetsei-
spiel ein kleiner Film entsteht. te, die den Betrachter durch Anklicken mit
dem Web-Server des Werbenden verbindet. BITV
Abkürzung für „Barrierefreie-Informations-
Animated GIF
technik-Verordnung“: Verordnung zur Schaf-
Ein Dateiformat, das die Möglichkeit bietet, Barrierefreiheit (oder fung barrierefreier Informationstechnik nach
mehrere Grafiken in einer einzigen Grafikda-
barrierefreier Zugang) dem Behindertengleichstellungsgesetz,
tei so zu speichern, dass die einzelnen Grafi-
Barrierefreier Zugang zum Internet bedeu- nach deren Vorgaben alle öffentlich zugäng-
ken zeitlich steuerbar sind. Dadurch wird die
tet, dass Internetanwendungen so entwick- lichen Internetauftritte und -angebote sowie
Darstellung kleiner, aus GIF-Grafiken beste-
elt und technisch umgesetzt werden, dass Intranetauftritte und -angebote der Behör-
hender Filmsequenzen ermöglicht.
ein größtmöglicher Nutzerkreis mit unter- den der Bundesverwaltung bis zum
schiedlichsten Hard- und Software-Voraus- 31.12.2005 umgesetzt werden müssen (vgl.
Anti-Aliasing setzungen oder speziellen Hilfsmitteln die In- „Zusatzinformationen“).
Ein Algorithmus für Pixelgrafiken, der in Grafi- halte erreichen kann. Im Abschnitt „Barriere-
ken an harten Kanten oder Farbübergängen freier Zugang“ des Kapitels „Zusatzinforma- Braille
sichtbare Treppeneffekte ausgleicht. tionen“ werden dafür benötigte Richtlinien Eine nach ihrem Erfinder Louis Braille be-
zusammengefasst und nach Themen geglie- nannte Blindenschrift, die einzelne Buchsta-
Applet dert wiedergegeben. ben als eine Kombination aus sechs fühlbaren
Ein kleines, aus dem Internet ladbares, in der Punkten darstellt.
Programmiersprache Java erstelltes Pro- Basiselemente
gramm. Die essenziellen Grundelemente eines Cor- Browser
porate Designs, wie z. B. das Logo, Schriften Auch: Web-Browser. Die vom englischen „to
ASP und Farben. browse“ (durchblättern, sich umsehen) ab-
Die Abkürzung für „Active Server Pages“. ASP geleitete Bezeichnung für ein Programm zur
führt auf einem Server Scripte (*.asp) für dy- Darstellung von HTML-Dokumenten im Inter-
namisch generierte Internetseiten aus.. net. Daneben werden über den Browser die
Befehle zur Navigation auf den Websites im Chat Dithering
Internet gegeben. Bekannte Browser sind der Ein Chat ist eine Internetanwendung – eine Ein Verfahren, bei dem den Pixeln eines Bildes
„Internet Explorer“ von Microsoft oder der Plattform zur direkten Kommunikation ver- bei einer Interpolation weitere „Zwischenfar-
„Navigator“ von Netscape. schiedener Nutzer auf der Basis von Text- ben“ zugeordnet werden.
nachrichten.
Browserfenster Content Dokumentvorlage
Innerhalb eines Y Browsers der Bereich, in Der im Y Browserfenster sichtbare Inhalt einer Eine Y Musterdatei, in der bestimmte Gestal-
dem HTML-Dokumente dargestellt werden, Internetpräsenz, zum Beispiel Text- und Bild- tungsparameter wie Schriften oder Farben
wird auch Viewport genannt. Gemäß der Vor- informationen, Datenbankanbindungen zur späteren Nutzung vorbereitet wurden.
gaben des Styleguides der Bundesregierung oder Download-Bereiche etc.
werden alle Webseiten auf Basis der empfoh-
lenen Bildschirmauflösung von 1024 x 768 px Domain
für eine innere Browserfensterbreite von 952 Content-Pages Eine Domain ist eine Verwaltungseinheit in
px optimiert. Die Summe aller Y HTML-Seiten abzüglich Computernetzwerken, durch die eine Auftei-
interaktiver Angebote wie Y Chats oder Da- lung in verschiedene logische oder geografi-
tenbanken. sche Segmente ermöglicht wird. Im Internet
Browseroptimierung werden Computer, die zu einer Domain ge-
Alle Internetpräsenzen und Online-Medien hören, über Suffixe zusammengefasst, z.B.:
der Bundesregierung sowie ihre Ressorts Corporate Design
.com, .org, .de.
müssen dem HTML 4.1 Standard entsprechen Das visuelle Erscheinungsbild einer Institu-
und mittels Y CSS (Abkürzung für Casca- tion oder eines Unternehmens. Wichtige Ba-
ding Stylesheets) Level 2 formatiert sein. Da- siselemente des Corporate Designs sind das Download
bei sollte auf die Darstellungseigenheiten ak- Firmenzeichen, die Schriften und Farben so- Der Datentransfer von einem Server, zum Bei-
tueller Versionen von populären Browsern, wie die Bildsprache. Das Corporate Design ist spiel das Abrufen von Programmen, Bildern
(z. B. Microsoft Internet Explorer ab Version 5 der sichtbare Teil der Corporate Identity. oder Texten auf den eigenen Rechner.
und Netscape-Gecko-Browser ab Version 6)
Rücksicht genommen werden. Besondere CSS Drop-down-Menü
Beachtung muss der Interpretierbarkeit Die Abkürzung für „Cascading Style Sheets“. Liste zum Auswählen eines Untermenüs, das
durch Eingabe- und Ausgabegeräte für Kör- CSS sind Stilvorlagen, die es ermöglichen, das sich beim Klick auf das Hauptmenü „aus-
perbehinderte (Braille-Ausgabe, Screenrea- Layout, die Schriften, Farben etc. von HTML- klappt“.
der), bei veränderten Benutzereinstellungen Seiten zu definieren. Bei der Programmie-
(Farben, Schriften, Schriftgröße) und ohne dpi
rung von CSS muss auf die Darstellungseigen-
Zusatztechnologien (Plug-ins, Java, Java- Die Abkürzung für „Dots per Inch“, die die
heiten aktueller Versionen von populären
Script, CSS) finden. Eine Umsetzung einer ge- Wiedergabefeinheit (Y Bildschirmauflösung)
Y Browsern, (z.B. Microsoft Internet Explorer
sonderten Textversion wird dadurch in der von Monitoren bezeichnet.
ab Version 5 und Netscape-Gecko-Browser ab
Regel unnötig. Version 6) Rücksicht genommen werden. Z. B.
wird die Einheit x-Höhe (ex) von populären
BundOnline 2005 Browsern nicht regelrecht interpretiert und E
Eine Initiative, mit der sich die Bundesregie- kann daher zur Zeit nicht eingesetzt werden.
rung verpflichtet, alle internetfähigen Die Interpretation durch Browser mit höhe- E-Government
Dienstleistungen der Bundesverwaltung bis rer Standardtreue (etwa Mozilla Firefox), so- Allgemeine Bezeichnung für den über Daten-
zum Jahr 2005 online bereitzustellen. Nach- wie die semantische und technische Validität netze abgewickelten Geschäftsverkehr von
zulesen unter http://www.bundonline2005.de. des Quelltextes und der CSS-Anweisungen Behörden. E-Government schließt die Kom-
darf dadurch jedoch nicht beeinträchtigt munikation zwischen Behörden und Bürgern
werden. Browser der vierten Generation kön- (G2C), Behörden und der Wirtschaft (G2B) so-
Button nen CSS-Anweisungen nicht interpretieren wie Behörden untereinander (G2G) ein.
Ein bildhaftes Bedienelement, das bei einem (z. B. Netscape Navigator 4.7). Bei diesen
Mausklick eine Funktion innerhalb des jewei- Browsern wird eine mit CSS programmierte
ligen Programmes bewirkt. Bei der Wahl des Seite ohne Designelemente dargestellt. So E-Mail
Buttontyps ist darauf zu achten, dass die But- lange die Funktionsfähigkeit der Seite ge- Die Abkürzung für „Electronic Mail“ (elektro-
tons syntaktisch und visuell miteinander kor- währleistet bleibt, sind aber die Anforderun- nische Post), ein Postdienst, der über einen
respondieren. gen der Barrierefreiheit erfüllt. Die Defizite in Internetanschluss zur Nachrichtenübermitt-
der Layoutdarstellung auf diesen Browsern lung dient.
werden daher in Kauf genommen.
C
CGI-Script D
Die Abkürzung für „Common Gateway Inter-
face“. Das CGI ist die Schnittstelle auf einem Dateiformat
Web-Server zum Programmaufruf über einen Ein Dateiformat ist ein Regelsatz zum struk-
Browser. Die bekannteste Programmierspra- turierten Aufbau von Dateien.
che für diese Schnittstelle ist Perl.
64 Glossar

Hover-Link
F G Engl. für „schwebender Verweis“. Visuelle
Auszeichnung eines Text-Hyperlinks
FAQ Geviert (Y Hyperlink) während des Y Mouse-over.
Die Abkürzung für „Frequently asked ques- Ein nicht druckendes „Leerzeichen“, dessen Beispielweise kann die Farbe oder Unterstrei-
tions“ (häufig gestellte Fragen). Eine in vielen Breite der Schriftgröße entspricht. Ein Ge- chung eines Links wechseln. Diese Auszeich-
Internetpräsenzen und News-Groups weit viert einer 12-Punkt-Schrift hat somit eine nung signalisiert dem Nutzer zusätzlich zur
verbreitete Online-Dienstleistung, bei der Breite von 12 Punkt (pt). Das Geviert wird zum üblichen Verwandlung des Mauszeigers zur
häufig gestellte Fragen beantwortet werden. Setzen von schriftgrößenabhängigen Ab- Hand, das eine Interaktion möglich ist.
ständen verwendet.

Farbklima HTML
Aufeinander abgestimmte, sich ergänzende GIF Die Abkürzung für „Hypertext Markup Lan-
Farbtöne, die am häufigsten mit speziellen Die Abkürzung für „Graphics Interchange For- guage“ (Y Hypertext), der Kennzeichnungs-
Wirkungen assoziiert werden. mat“, ein stark komprimierendes Dateiformat sprache zum Erstellen von Webseiten. Wurde
für Bilder und Grafiken. Das GIF-Format ist un- von Tim Berners-Lee entwickelt und mit dem
abhängig vom Betriebssystem. Boom des Internets innerhalb weniger Jahre
Farbtiefe
zur Sprache des Web. Standard des W3C, RFC
Eine in der Einheit Bit angegebene Wiederga-
1866, RFC 2854, W3C HTML 4.0, W3C XHTML
befeinheit von Farbtönen: Mit einer Farbtiefe Guided Tour
1.0. Siehe auch „Technische Standards“ im Ka-
von 1 Bit kann zwischen nur zwei Zuständen Eine vorbereitete, „geführte“ Tour, die den
pitel „Zusatzinformationen“.
unterschieden werden, i. d. R. schwarz und Benutzer durch fest definierte Bereiche
weiß. D. h., dass jedes Pixel wird entweder führt, zum Beispiel als Einführung in eine
schwarz oder weiß wiedergegeben. Bei einer neue Software. HTTP
Farbtiefe von 8 Bit können schon 256 ver- Die Abkürzung für „Hypertext Transfer Proto-
schiedene Farben dargestellt werden (zum col“, das Übertragungsprotokoll für HTML-
Grafikelement
Beispiel bei Y GIF-Dateien). Stehen für jeden Dokumente im World Wide Web.
Zusammenfassende Bezeichnung von Fotos,
Farbkanal (Rot, Grün und Blau) jeweils 8 Bit
Grafiken oder Text, die als Grafikformate
zur Verfügung, beträgt die Farbtiefe 24 Bit
(Y GIF, Y JPG etc.) in Online-Medien einge- Hyperlink
oder 16,7 Millionen Farben (zum Beispiel bei
setzt werden. Auch „Link“: Technologie, mit der auf Elemente
Y JPG-Dateien oder Y PNG-Dateien).
in anderen Webseiten verwiesen werden
kann. Durch Hyperlinks können verschiedene
Grundraster
Focus-Link HTML-Dokumente verbunden werden, so
Ein Gliederungs- und Anordnungssystem für
Engl. für „anvisierter Verweis“. Visuelle Aus- dass der Nutzer einem Interessenstrang über
Text- und Bildelemente in einem Y Layout. Es
zeichnung eines Text-Hyperlinks (Y Hyperlink) verschiedene Dokumente und Server hinweg
dient der stilistischen Stärkung und Verein-
während des Fokus auf denselben durch Ta- folgen kann (Y Active Link, Y Focus Link,
heitlichung des Designs und seiner schnellen
staturbedienung, üblicherweise bei Naviga- Y Hover Link, Y Visited und Unvisited Links).
und wirtschaftlichen Herstellung. Besonders
tion mit der Tabulator-Taste. Beispielweise
detaillierte Elemente können mit einem fei-
kann die Farbe oder Unterstreichung eines
neren Y Ausrichtungsraster exakt positioniert Hypertext
Link während des Fokus wechseln. Diese Aus-
werden. Kurzform für „Hypertext Markup Language“.
zeichnung signalisiert dem Nutzer, dass eine
Kennzeichnungssprache zum Erstellen von
Interaktion möglich ist. Die Formatierung
Webseiten. Wurde von Tim Berners-Lee ent-
entspricht idealerweise der des Y Hover-
Links. H wickelt und mit dem Boom des Internets
innerhalb weniger Jahre zur Sprache des Web.
Standard des W3C, RFC 1866, RFC 2854, W3C
Frame Hauptnavigation HTML 4.0, W3C XHTML 1.0.
Ein von Netscape entwickelter Standard für Die oberste Navigationsebene einer Internet-
ein Bildschirmelement, der eine Website in präsenz.
fest definierte, voneinander unabhängige I
Bereiche aufteilt. Diese können auch dann Hexadezimalwert
sichtbar bleiben, wenn andere Seiten derselben Eine Zahl, die einen Skalen-Farbton für die
Internetpräsenz aufgerufen werden. Frames Icon
Darstellung von Y RGB-Farben an Bildschir-
führen häufig zu Problemen beim Anlegen Ein Symbol eines Betriebssystems oder Pro-
men definiert.
von Favoriten/Bookmarks, beim Drucken, bei gramms, das nach einem Mausklick ein An-
der Indizierung durch Suchmaschinen und wendungsprogramm aufruft oder eine Funk-
beim manuellen Empfehlen einer Website. Homepage tion aktiviert.
Von der Verwendung ist daher im Allgemei- Start- oder Begrüßungsseite eines Internet-
nen abzuraten. angebots, von der aus auf weitere Untersei-
Image-Map
ten zugegriffen werden kann.
Eine sensitive Grafikdatei, die innerhalb eines
Bildes mit unterschiedlichen Aktionen, meist
Links, hinterlegt ist. Bei serverseitigen Image-
Maps wird die Grafikdatei an den Y Browser ge-
sandt; die Koordinaten des Mauszeigers veran- Intranet Look and Feel
lassen den Server, die entsprechenden Aktionen Ein institutions- oder firmeninternes Daten- Die atmosphärische Wirkung einer Internet-
im Browser auszuführen. Bei clientseitigen Ima- netz, das auf den Internettechnologien ba- präsenz. Sie entsteht durch die Homogenität
ge Maps sendet der Server außer der sensitiven siert. Ein Intranet kann mit oder ohne Inter- von Design, Bedienung und Benutzerfüh-
Grafik noch Aktionsanweisungen und evtl. Dar- netverbindung konzipiert sein. rung, evtl. auch Klangkomponenten. Das
stellungselemente zu den einzelnen Koordina- Look and Feel sollte einer stärkeren Wirkung
tenbereichen der Grafikdatei mit. halber in engem visuellem Zusammenhang
J mit dem Corporate Design stehen.
Inch
In angelsächsischen Ländern gebräuchliches
JPEG/JPG
Längenmaß, das u. a. als Bemaßungsgrundla-
Die Abkürzung für „Joint Photographic Ex-
M
ge für Computer verwendet wird, zum Bei-
perts Group“ (vereinigte Fotoexperten-Grup-
spiel Ausgangsmaß für die Auflösungsfein-
pe), ein Standard für die Kompression von di- Marginalspalte
heit von Monitoren und Druckern, für die
gitalen Bildern. Die Datenreduktion von JPEG Eine Spalte, die Text- und Bildinformationen
Darstellung von Schriften (72 Point = 1 Inch);
wird dadurch erreicht, dass sehr ähnliche Far- enthält, die einen nebenstehenden Inhalt er-
1 inch = 25,4 mm.
ben als ein Farbton abgespeichert werden. gänzen. Dies kann eine Auflistung weiter-
Dadurch bleibt der Qualitätsverlust bei Fotos führender Y Links, die direkte Verbindung zu
Interaktiv gering. Sonderseiten und -themen oder auch die Ab-
Die Möglichkeit, als Anwender in den vorge- bildung von Bannern sein.
gebenen Programmablauf eines Computers
einzugreifen und ihn zu steuern. K/L Markenzeichen
Ein gestaltetes Symbol, das als identitätsre-
Interaktives Verhalten Lauffähigkeit flektierendes bzw. -stiftendes Zeichen für In-
Aktionen (wie Roll-over, Button-down oder Die vom Betriebssystem abhängige Funk- stitutionen, Firmen, Marken oder Veranstal-
Pull-down), die durch das „Berühren“ tionsfähigkeit von Programmen. tungen dient. Es kann aus einer reinen Abbil-
und/oder „Anklicken“ von Bildschirmelemen- dung (Bildmarke oder Signet), einem Schrift-
ten durch den Nutzer ausgelöst werden. zug (Wortmarke oder Logotype) oder einer
Laufweite Kombination von beidem (Y Bildwortmarke)
Der generelle Abstand aller Buchstaben einer bestehen. Das Markenzeichen wird häufig als
Interface Schrift. Der Ausgleich von einzelnen Buchsta- Logo bezeichnet.
Die Schnittstelle zwischen zwei Teilen eines benpaaren wird als Kernen bezeichnet, das
Computersystems. Sie dient der Steuerung Ändern der Laufweite als Spationieren. Siehe
des Informationsaustausches und dem Aus- auch Y Spationierung. Maßeinheiten
gleichen bauartbedingter Unterschiede. Angaben für die Benennungen von gemesse-
nen Werten, zum Beispiel Längen- oder Flä-
Layout chendimensionen. Im Druck werden Raster-
Internet
Der Seitenaufbau eines Dokumentes mit sei- feinheiten, Schriftgrößen und Zeilenabstän-
Weltweites Computer-Netzwerk, das ur-
nen gestalterischen Basiselementen (Farben, de in Millimetern (mm) oder Punkt/Point (pt)
sprünglich als ARPA Net zu militärischen
Bildwortmarke, Typografie etc.) und deren angegeben. Für den Bildschirm stehen die
Zwecken aufgebaut wurde, aber über die in-
grundsätzlicher Anordnung. folgenden numerischen Angaben als Maß-
tensive Weiterentwicklung und Nutzung
einheiten zur Verfügung: mm (Millimeter),
durch Universitäten schnell an Beliebtheit
in (Inch), pt (Punkt/Point), px (Pixel), em (Em),
gewonnen hat. Mit der Entwicklung und Ein- Link ex (Ex), % (Prozent). Dabei sind absolute Anga-
führung des World Wide Web wurde das Engl. für „Verknüpfung, Verweis“. Das Kurz- ben (zum Beispiel Millimeter) und relative
Internet in rasantem Tempo zu einer univer- wort für einen Y Hyperlink. Man unterschei- Angaben (zum Beispiel Prozent gegenüber
sellen, internationalen Plattform zur Informa- det durch die visuelle Darstellung in Y Active, „normal“) möglich. Um Schriften durch den
tion und Kommunikation. Y Hover-/Focus-, Y Visited- und Unvisited-Links. Nutzer skalierbar darzustellen, werden % und
em für die Schriftformatierung verwendet.
Internetadresse Login Um das Layout an die Schriftgröße zu kop-
Die aufgrund ihrer Y URL eindeutige Identifi- Die Anmeldeprozedur auf einem Computer peln, wird für die meisten Breitenangaben
zierung eines Internetangebotes. oder einem Datennetz. Das Login benötigt und Abstände em verwendet. Prozentuale
meist ein Kennwort zur Nutzungs-Legitima- Breitenangaben oder Bereiche ohne Angabe
tion von Programmen, Datenbanken und On- einer Breite sind von der Breite des Y Brow-
Internet Explorer
line-Angeboten. serfensters (außerdem: Y Viewport) bzw. des
Ein von der Firma Microsoft entwickelter
Elternelements, abhängig.
Y Browser für die Navigation und Darstellung
von Inhalten im Internet. Logo
Das Kurzwort für ein Firmen- oder Y Marken- Meta-Tags
zeichen. Für die Erkennung durch Suchmaschinen not-
wendige, aber nicht dargestellte Informatio-
nen über eine Y HTML-Seite.
66 Glossar

Mouse-down Netscape Navigator PDF


Das Auslösen einer Funktion durch das Drük- Ein von der Firma Netscape entwickelter Die Abkürzung für „Portable Document For-
ken einer Maustaste auf einen fest definierten Y Browser für die Navigation und Darstellung mat“ , ein Dateiformat, das alle Eigenschaf-
Bereich. von Inhalten im Internet. ten eines gedruckten Dokumentes in elektro-
nischer Form beinhaltet. Zur Anzeige von
PDFs wird das Programm „Acrobat Reader“
Mouse-over Nutzungsrecht
benötigt, das für eine große Anzahl unter-
Das Auslösen einer Funktion durch das Eintre- Die von einem Urheber genehmigte Nutzung
schiedlicher Betriebssysteme zur Verfügung
ten des Cursors (Mauszeigers) in einen fest eines Werks. Die vom Nutzer (in der Regel
steht.
definierten Bereich. dem Auftraggeber) zu zahlende Vergütung
ist vom Grad der Nutzung abhängig: Die Nut-
zung (in der Regel eine Veröffentlichung) Pixel (px)
Mouse-out
kann pauschal und ausschließlich eingeräumt Das Kurzwort von „Picture Element“. Ein Pixel,
Das Auslösen einer Funktion durch das Verlas-
werden oder auf ein Medium, einen bestimm- häufig auch Bildpunkt genannt, ist das klein-
sen des Cursors (Mauszeigers) aus einem fest
ten Zweck oder Zeitraum beschränkt sein. ste grafische Element bei der Darstellung von
definierten Bereich.
Bitmap-Grafiken, zum Beispiel auf Monitoren
oder im Druck von Grafiken und Fotos.
Neuauftritt
MPEG
Die Gestaltung einer neuen Internetpräsenz.
Die Abkürzung für „Moving Picture Experts
Pixelorientierte Grafik
Group“ ist einerseits die Bezeichnung für ein
Eine aus Y Pixeln zusammengesetzte Grafik,
Standardisierungskomitee, steht anderer- Newsletter
bei der im Gegensatz zu Y Vektorgrafiken alle
seits als Sammelbegriff für eine Reihe von Ein Mitteilungsblatt einer Institution oder ei-
Bildpunkte nach einem festen Raster ange-
Standards zur Kodierung und Komprimie- nes Unternehmens, das über aktuelle Ent-
ordnet sind.
rung audiovisueller Daten. wicklungen und Produkte informiert. Der
elektronische Newsletter wird häufig als In-
strument des Web-Marketings per Y E-Mail Plug-in
Musterdatei
an die Empfänger versandt. Ein Plug-in ist ein Software-Baustein, der in
Eine mustergültige Satzdatei, die als Basis
bereits installierte Programme integriert
zur Erstellung von Entwürfen und Druckvorla-
wird, um deren Funktionalität zu erweitern.
gen dient. Sie enthält neben den Standanga-
ben in Form eines Layoutrasters alle typogra- O
fischen und farblichen Definitionen in Form PNG
von Stilvorlagen. Offline Die Abkürzung für „Portable Network Gra-
Die unterbrochene oder nicht existente Ver- phics“, ein lizenzfreies Grafikformat. Es unter-
bindung zu einem Netzwerk oder einem an- stützt die Darstellung von 16 Mio. Farben, die
N deren Computer. verlustfreie Kompression und eine inkremen-
telle Anzeige der Grafik (erst Grobstruktur, bis
Datei ganz übertragen ist). PNG ermöglicht
Navigation Online außerdem das Erkennen beschädigter Dateien.
Die Bedienung und Benutzerführung einer Die bestehende Verbindung zu einem Netz-
Internetpräsenz. Da die Benutzer mit der je- werk oder einem anderen Computer.
weiligen Website nicht vertraut sind, führt Primärfarben
eine gute Navigation direkt und einfach zu Im Y Corporate Design der Bundesregierung
Online-Medien werden als Primärfarben die aus der Staatsfah-
den angebotenen Inhalten. Dabei kann die
Zusammenfassender Begriff für Anwendun- ne der Bundesrepublik Deutschland abgeleite-
Navigation sowohl permanent sichtbare Ele-
gen auf der Basis von Internettechnologien ten Farben Schwarz, Rot und Gelb verstanden.
mente (Home-Button, Hauptnavigation, Ser-
(Internet, Intranet).
vicebereiche) als auch variable, dem verän-
dernden Inhalt angepasste Elemente auf- Printmedien
weisen.
P/Q Alle gedruckten Medien, unabhängig vom
angewendeten Druckverfahren.
Navigationsbereich
Der Bereich auf dem Screen innerhalb des PDA
Point oder Punkt (pt)
Y Browserfensters, der die Navigation bein- Die Abkürzung für „Personal Digital Assi-
Das standardisierte typografische Maß für
haltet. stant“, der digitale, mobile Endgeräte im
Schriftgrößen und Zeilenabstände. 1 Point =
„Westentaschenformat“ beschreibt. Neben
1/72 Inch = 0,353 mm.
elektronischen Organizern gibt es mittler-
Navigationsebenen weile eine Vielzahl von Kombinationen digi-
Die hierarchischen Ebenen einer Inhalts- bzw. taler Geräte, wie Handys mit erweiterten Pull-down
Navigationsstruktur einer Internetpräsenz. Multimedia-Funktionen oder „Pocket PCs“, Eine Variante der Präsentation von Naviga-
die unter die Kategorie PDA fallen. tionsmenüs, bei der eine Palette mit Menü-
punkten nach unten aus einem Navigations-
element im Identitätsbereich herausge-
klappt werden kann.
kürzen, werden Internetseiten häufig mit Sy- Screen-Aufteilung
R stemschriften gestaltet. Da nicht sicherge- Die Raumaufteilung einer Website, zum Bei-
stellt ist, dass alle Systemschriften auf dem spiel in Bereiche.
Rastereinheit (RE) Rechner des Nutzers installiert sind, müssen
Ein Element, Höhe x Breite, aus dem sich ein alternative Schriften bei der Programmie-
rung einer Internetpräsenz berücksichtigt Sekundärfarben
Raster aufbaut.
werden. Sollen Texte in einer Groteskschrift, Im Corporate Design der Bundesregierung
zum Beispiel der Verdana, angezeigt werden, wird unter den Sekundärfarben ein Farbklima
Readme-Datei so sollte der Wert der FONT-FAMILY-Anwei- verstanden, das die Y Primärfarben ergänzt.
Eine Textdatei mit wichtigen Informationen sung des Y CSS mehrere nachfolgende Die Sekundärfarben bestehen aus einem
über das Programm, seine Installation und Schriftarten berücksichtigen. Im Y Corporate Hauptfarbton in unterschiedlichen Sättigun-
die Nutzungsrechte. Die Readme-Datei sollte Design der Bundesregierung sind dies: Verda- gen und Abstufungen.
unbedingt vor dem ersten Programmstart na, Helvetica, Arial, Tahoma, Sans Serif (neu-
gelesen werden. trale Angabe für serifenlose Schriftarten). Ist Server
keine der definierten Schriftarten verfügbar, Ein Computer, der Clients in einem Netzwerk
Recommendations wird die jeweils eingestellte Standard- Daten zur Verfügung stellt. Im Internet wer-
Von den Gremien des W3-Konsortiums veröf- Schriftart in den Browservoreinstellungen den bestimmte Dienste durch spezielle Inter-
fentlichte technische Beschreibungen einzel- (Y Browser) angezeigt. Der Nutzer kann net-Server angeboten, zum Beispiel Web-Ser-
ner Web-Technologien wie Y HTML, Y CSS durch eigene Einstellungen die dargestellte ver, Mail-Server (POP3-Server/SMTP-Server)
oder XML. Diese Empfehlungen (Recommen- Schriftart und -größe verändern. oder News-Server (NNTP-Server).
dations) haben im Internet in Bezug auf ihre
Verbindlichkeit die höchste Priorität. Siehe Schriftgröße Sidebar
auch „Technische Standards“ im Kapitel „Zu- Die in Point/Punkt (1 Point (pt) = 0,353 mm) Engl. für „Seitenleiste“. In den meisten
satzinformationen“. gemessene Darstellungsgröße einer Schrift. Y Browsern verfügbare, optional neben dem
Bei den Internetpräsenzen und Online- Y Viewport einblendbare Seitenleiste, in der
RGB Anwendungen der Bundesregierung sind z. B. Favoriten, Verlauf, Downloads des Nut-
Die Abkürzung für die Grundfarben Rot, die Schriftgrößenangaben von Point und zers oder auch Y HTML-Dokumente angezeigt
Grün, Blau zur Farbdarstellung auf Monito- Pixel identisch: 1 Point/pt = 1 Pixel/px. werden.
ren. Aus diesen Farben lassen sich alle weite-
ren, am Bildschirm sichtbaren Farben mi- Schriftlizenz Site
schen. Siehe auch Y Additives Farbsystem. Das durch einen Kauf erworbene Nutzungs- Das Kurzwort für die Website, der Gesamt-
recht an einer Schrift. heit der Internetseiten eines Anbieters.

Röhrenmonitor
Bildschirme, bei denen eine aus Subpixeln in Schutzzone Sitemap
den drei Grundfarben Rot, Grün und Blau be- Ein definierter Freiraum um ein Markenzei- Der Aufbau und die Seitenstruktur einer
stehende Phosphorschicht durch drei chen, in dem weder Text noch weitere grafi- Internetpräsenz. Auf vielen Websites wird die
Elektronenstrahlen zum Leuchten angeregt sche Elemente (zum Beispiel Bilder oder Sitemap durch einen eigenen Menüpunkt
wird. Um einen Bildpunkt (Y Pixel) einer be- Fremdlogos) platziert werden dürfen. Die dargestellt.
stimmten Farbe zu erzeugen, werden die Schutzzone ermöglicht damit die repräsen-
drei Strahlen auf benachbarte Subpixel ge- tative Wirkung eines Zeichens. Die Y Bild-
wortmarke der Bundesregierung ist von einer Spalte
lenkt, wobei die Farbmischung durch die In-
Schutzzone umgeben, die in diesem Y Style- Ein vertikal angeordneter Bereich zur Auf-
tensität der Strahlen bestimmt wird.
guide näher festgelegt wird. nahme von Texten oder Bildern. Im Content-
bereich der Internetpräsenzen und Online-
Anwendungen der Bundesregierung sind
S Screen unterschiedliche Spaltenanordnungen/Spal-
Der sichtbare, die Inhalte darstellende Be- tenraster vorgesehen.
reich eines Monitors. Die Größe eines Screens
Säulenelement
wird nach seiner in Inch gemessenen Bild-
Das in den Farben der Staatsfahne oder in Spaltenbreite
schirmdiagonalen benannt (Y Bildschirmauf-
Graustufen umgesetzte Bildelement der Breite einer Text- oder Bildspalte.
lösung).
Y Bildwortmarke der Bundesregierung.

Scrollbar Spationieren/Spationierung
Schriftart Das Erweitern der Y Laufweite einer Schrift.
Engl. für „Bildlaufleiste“. Bedienelement der
Die Summe der Gemeinsamkeiten einer
Benutzeroberfläche eines Computerpro-
Schrift. Je nach Gruppierungsschema wird ei-
gramms, das den sichtbaren Bereich eines Sprungmarken
ne Schriftart nach Schriftgattung/-klassifika-
Fensters verschiebt. Besteht aus zwei Pfeilen Links, die die Navigation innerhalb einer
tion (Grotesk/serifenlos oder Antiqua/mit Se-
und einer so genannten Rollbox. Horizontale Website ermöglichen, zum Beispiel die Rück-
rifen), nach Schriftfamilie (Times New Roman
und vertikale Bildlaufleisten werden nach Be- kehr von einem Textende zum Seitenanfang.
oder Verdana) oder nach Schriftauszeich-
darf eingeblendet, wenn die darzustellende
nung (kursiv oder Kapitälchen) unterschie-
Seite die Größe des Y Viewports übersteigt.
den. Um die Ladezeiten des Browsers zu ver-
68 Glossar

Stilvorlagen TFT tuell eingeblendeten Y Scrollbars und Y Side-


In einer Y Musterdatei gespeicherte Angaben Die Abkürzung für „Thin Film Transistor“, ei- bars und Navigationsleisten des Browsers ab-
der benutzten Schriftschnitte und -größen ner Technik zum Ansteuern von LCDs. Dazu hängig. Durch Nutzung der Scrollbars kön-
sowie zu definierten Farben. Bei der Gestal- wird auf einer Glasscheibe des Displays für je- nen beschnittene Bereiche in den Viewport
tung von Websites können Y CSS (Cascading den Pixel ein eigener, einzeln ansteuerbarer geschoben werden.
Style Sheets) als Stilvorlagen verwendet wer- Transistor aufgebracht. Die Technik erlaubt
den. eine hohe kontrastreiche Darstellung und ei- Visited und Unvisited Links
ne geringere Trägheit der Anzeige. Engl. für „besuchte und unbesuchte Ver-
Styleguide weise“. Y HTML-Auszeichnung von Textlinks,
Auch: Corporate-Design-Manual. Ein Werk, Typografie durch die bereits „besuchte“ Links eine ande-
das alle Angaben zum Y Corporate Design Die Lehre von der funktionalen und ästheti- re Farbe erhalten als „unbesuchte“ (Y Hyper-
und dessen Umsetzung in allen relevanten schen Gestaltung von Schriften und ihrer An- link).
Printmedien und elektronischen Medien ver- wendung in Printmedien und elektronischen
mittelt. Medien. Im Y Corporate Design dient die Visits
Wahl und einheitliche Anwendung eines spe- Visits ist das englische Wort für Besuche. Ein
zifischen Schrifttyps (der Hausschrift) der Visit bezeichnet den Besuch auf einer Inter-
Subnavigation
Verbindung aller visuellen Auftritte. Daher netseite. Im Unterschied zur „Page Impres-
Die hierarchisch tieferen Ebenen der Naviga-
sollten auch die Internetauftritte der Bundes- sion“ wird hier nur der Besuch auf der Web-
tion.
regierung in der Typografie einander ange- seite gezählt und nicht das Anwählen der ein-
glichen werden. zelnen Seiten. Die Anzahl der Visits spielt ei-
Suchmaschine ne große Rolle bei der kommerziellen Ver-
Auch: Search-Engine. Ein Programm, das marktung von Online-Auftritten.
nach Eingabe von Suchbegriffen oder -kateg- U
orien das Internet nach relevanten Texten
und Bildern durchsucht. URL W/X/Y/Z
Die Abkürzung für „Uniform Resource Loca-
Symbolleiste tor“. Eine URL bezeichnet die Adresse einer W3C oder W3-Konsortium –
Eine Leiste mit Symbolen (Y Icons), die nach Ressource im Internet eindeutig. Dabei ist es
gleichgültig, ob es sich um ein Bild, eine Home- World-Wide-Web-Consortium
einem Mausklick fest definierte Funktionen in
page, ein Video oder einen Sound handelt. Das 1994 gegründete, internationale und un-
einem Programm oder Betriebssystem aus-
Um eine Ressource anzeigen zu lassen, wird abhängige Industriekonsortium ist mit der
führen. Einige Programme, zum Beispiel
die URL in das Adressfeld des Y Browsers ein- Weiterentwicklung von Standards und Nor-
Y Browser, verfügen über mehrere Symbol-
getragen. Die Adresse setzt sich aus mehre- mie-rungen im World Wide Web befasst. Vom
leisten, die nach Bedarf aktiviert oder ver-
ren standardisierten Bestandteilen zusam- W3-Konsortium herausgegebene Recom-
deckt werden können.
men: Protokoll, Server-Name, Länderkürzel, mendations (Empfehlungen) sind Dokumen-
Verzeichnis und Dateiname. Die Reihenfolge te mit der höchsten im Web gültigen Ver-
Systemschrift der Bestandteile ist verbindlich festgelegt. bindlichkeit, zum Beispiel Beschreibungen
Eine im Betriebssystem installierte und von einzelner Web-Technologien wie Y HTML,
ihm zur Darstellung benötigte Schrift, zum Y CSS oder XML. Die Empfehlungen haben
Beispiel Times, Arial, Verdana (Windows) oder
Geneva, Chicago oder Monaco (Apple Macin-
V die Aufgabe, die jeweilige Technologie voll-
ständig und unmissverständlich darzustellen.
tosh). Die Zielgruppen dieser Beschreibungen sind
Vektorgrafik Web-Autoren und Software-Produzenten,
Aus Pfaden, ihren Positionen, Anordnungen, die gehalten sind, Standards so genau und
T Füllungen und Farben erstellte Grafiken. Vek- vollständig wie möglich in ihre Produkte zu
torgrafiken haben geringere Dateigrößen als implementieren. Die Entwicklung einer Tech-
pixelorientierte Grafikformate und lassen nologie ist mit der Veröffentlichung der Emp-
Tag sich in ihren Größen verändern. Aufgrund des fehlungen noch nicht abgeschlossen, denn
Formatierungsanweisungen in einem geringen Speichervolumens werden Vektor- es handelt sich um festgeschriebene Ent-
Y HTML-Dokument. grafiken auch im Internet, zum Beispiel für wicklungsstadien, um Entwicklern Fixpunkte
Flash-Animationen, angewandt. zu geben, an denen sie sich orientieren kön-
Template nen. Die Empfehlungen erhalten deshalb,
Das englische Wort für eine Y Musterdatei. ähnlich den Software-Produkten, Versions-
Versalien
nummern, zum Beispiel HTML 4.01, CSS 2.0
Die Großbuchstaben einer Schrift.
oder XML 1.0. Sämtliche Empfehlungen des
Textversion W3-Konsortiums sind über die Web-Adresse
Eine Umsetzung einer gesonderten Textver- Viewport http://www.w3.org/TR/ erreichbar (das „TR“
sion wird durch den Einsatz von Y CSS und Engl. für „Darstellungsfeld“. Bereich eines steht für Technical Report). Sämtliche Doku-
unter Berücksichtigung der Anforderungen Y Browserfensters, in dem die aktuelle Seite mente werden in englischer Sprache veröf-
der Y BITV in der Regel unnötig. dargestellt wird. Die Größe des Viewports ist fentlicht; die englischsprachige ist die nor-
von der Fenstergröße des Browsers, even- mative Version. Viele der Dokumente sind in
andere Sprachen übersetzt worden. Überset-
zungen sind über die Adresse
http://www.w3.org/Consortium/Translation/
erreichbar.

Web-Design
Der Entwurf und die Erstellung von Internet-
seiten.

Wortmarke
Das auf einem reinen Schriftzug basierende
Zeichen für eine Institution oder ein Unter-
nehmen.

WWW
Die Abkürzung für „World Wide Web“, oft
auch als W3 oder Web bezeichnet. Das WWW
ist ein multimediales Hypertext-Informa-
tionssystem im Internet. Es wurde 1992 am
Europäischen Kernforschungszentrum in
Genf entwickelt.

Zeichensatz
Die Gesamtheit der Buchstaben, Ziffern,
Interpunktions- und Sonderzeichen einer
Schrift.

Zeilenabstand
Der von Schriftlinie zu Schriftlinie gemessene
Abstand zwischen zwei Textzeilen.
70 Impressum

Impressum
Alle Nutzungs- und Verwertungsrechte dieses Styleguides liegen
beim Presse- und Informationsamt der Bundesregierung (BPA). Der Ge-
brauch dieses Dokuments ist nur mit der Zustimmung des BPA zulässig.
© Presse- und Informationsamt der Bundesregierung, 2004

Presse- und Informationsamt der Bundesregierung


Corporate-Design-Beauftragter
E-Mail: Corporate-Design@bpa.bund.de

Der Styleguide für Onlinemedien sowie alle weiteren Corporate-


Design-Manuals sind unter http://styleguide.bundesregierung.de verfügbar.

Die Manuals
- Basiselemente
- Druckschriften
- Geschäftsausstattung Standard
- Geschäftsausstattung Pressesachen
können beim Presse- und Informationsamt bestellt werden:

Presse- und Informationsamt der Bundesregierung


Dorotheenstraße 84
10117 Berlin
E-Mail: Corporate-Design@bpa.bund.de

Der Styleguide wurde auf der Grundlage des Beschlusses des


Bundeskabinetts vom 2. Juni 1999 für das
- Bundeskanzleramt
- das Presse- und Informationsamt der Bundesregierung
- und die Bundesministerien
entwickelt.
Geltungsbeginn ist das Datum der Online-Stellung des Styleguides
(Dezember 2002). Seine Angaben sind spätestens bei der Realisierung eines
Neuauftritts bzw. dem Redesign einer Internetpräsenz zu berücksichtigen.