bundesregierung - manual-online-medien

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.

Transcript of bundesregierung - manual-online-medien

EinführungDie 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

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.

Grundlagen

6 G r u n d l a g e n

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.

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.

8 G r u n d l a g e n

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

Zur feinen Abstufung dient ein Ausrichtungsraster von 0,25 em x 0,25 em (4 px x 4 px).

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

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.

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.

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

Beispiele für die Aufteilung der Gestaltungs-

fläche (siehe auch Kapitel „Anwendungsbei-

spiele“)

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.

10 G r u n d l a g e n

Primärfarben

Die Primärfarben Schwarz, Rot und Gelb sind

aus der Staatsfahne der Bundesrepublik

Deutschland abgeleitet. Sie benötigen des-

halb einen besonderen Umgang und dürfen

nur gezielt, sparsam und wirkungsvoll einge-

setzt werden.

CMYK-Wert

Hexadezimalwert

0|0|0|25

#999999

0|100|100|0

#FF0000

0|5|30|5

#F0ECDD

0|0|0|50

#666666

0|100|100|25

#990000

0|12|100|5

#FFCC00

0|0|0|100

#000000

0|100|100|45

#660000

0|20|100|15

#CC9900

Die Primärfarben mit ihren Hexadezimalzahlen

#FF6600

0|70|100|0

Hexadezimalwert

CMYK-Wert

#FF8C40

80 %

#FFB280

60 %

#FFD1B2

40 %

#FFF0E5

20 %

#D95700

0|70|100|20

#D9712B

80 %

#D98B57

60 %

#E5AE8A

40 %

#EDD4C2

20 %

#B34700

0|70|100|40

#BF5E1D

80 %

#BF7543

60 %

#CC9570

40 %

#D9B9A3

20 %

#993D00

0|70|100|60

#A65119

80 %

#AB6537

60 %

#B8815C

40 %

#BF9F8C

20 %

#803300

0|70|100|80

#8C4515

80 %

#99592E

60 %

#A66F4B

40 %

#AD8F79

20 %

#FF9900

0|40|100|0

#FFB340

80 %

#FFCC80

60 %

#FFE0B2

40 %

#FFF5E5

20 %

#CC7A00

0|40|100|20

#CC8F33

80 %

#D9A962

60 %

#E3C18F

40 %

#E8D9C5

20 %

#B36B00

0|40|100|40

#B37D2D

80 %

#BA8D4A

60 %

#C7A573

40 %

#D1C0A7

20 %

#8C5400

0|40|100|60

#996B26

80 %

#A1783B

60 %

#B09061

40 %

#B3A289

20 %

#6B4000

0|40|100|80

#805516

80 %

#8F672C

60 %

#997C51

40 %

#998A73

20 %

#007744

100|0|90|0

#2C9458

80 %

#65B876

60 %

#95CC95

40 %

#CAEOCA

20 %

#006633

100|0|90|20

#1F8248

80 %

#4DA15C

60 %

#7DB87D

40 %

#ADCCAD

20 %

#005229

100|0|90|40

#166B37

80 %

#388547

60 %

#65A165

40 %

#95BA95

20 %

#004015

100|0|90|60

#105728

80 %

#287036

60 %

#508A50

40 %

#7FA37F

20 %

#003300

100|0|90|80

#0E4721

80 %

#245E2E

60 %

#457A45

40 %

#6F946F

20 %

#ABBA00

50|0|100|0

#BDC936

80 %

#D0D96C

60 %

#E0E5A1

40 %

#EBEDD5

20 %

#8C9900

50|0|100|20

#A2AD28

80 %

#B6BF56

60 %

#C7CC85

40 %

#D6D9B8

20 %

#758000

50|0|100|40

#8F9926

80 %

#9EA64B

60 %

#AEB374

40 %

#BDBFA3

20 %

#5E6600

50|0|100|60

#788020

80 %

#888F40

60 %

#9A9E67

40 %

#A4A68D

20 %

#464D00

50|0|100|80

#60661A

80 %

#777D38

60 %

#888C5B

40 %

#979982

20 %

#1144AA

100|60|0|0

#446EC4

80 %

#76A4D7

60 %

#9BBDDE

40 %

#CFDCE5

20 %

#003399

100|60|0|20

#2656AB

80 %

#517EBD

60 %

#81A6CC

40 %

#B8CBD9

20 %

#002A80

100|60|0|40

#1F4991

80 %

#42699E

60 %

#7091B3

40 %

#9FB6C7

20 %

#002266

100|60|0|60

#1A3B75

80 %

#385885

60 %

#5D7C9C

40 %

#879EAD

20 %

#001A4D

100|60|0|80

#142E5C

80 %

#2D476B

60 %

#4A6580

40 %

#738A99

20 %

#2DC7E5

100|10|0|0

#64D6ED

80 %

#91E3F2

60 %

#C2EAF2

40 %

#E6F0F2

20 %

#26A6BF

100|10|0|20

#4EB9CF

80 %

#7ACDDE

60 %

#ACDBE3

40 %

#CFE2E5

20 %

#2190A6

100|10|0|40

#46A5B8

80 %

#70BDCC

60 %

#98CAD4

40 %

#BCD1D6

20 %

#1B7385

100|10|0|60

#388FA1

80 %

#59A4B3

60 %

#84B6BF

40 %

#A9C2C7

20 %

#145866

100|10|0|80

#307B8A

80 %

#4C8C99

60 %

#6F9FA8

40 %

#97B2B8

20 %

Sekundärfarbspektrum

Corporate-Design-Schriften

Das Corporate Design der Bundesregierung verwendet die Schrif-

ten Neue Demos und Neue Praxis als Hausschriften. Sie wurden für die

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.

12 G r u n d l a g e n

Informationen zu „Barrierefreiheit und Schrif-

ten“ sind dem Kapitel „Zusatzinformationen“

zu entnehmen. Dort ist auch eine Umrech-

nungstabelle für Schriftgrößen beigefügt.

Die Corporate-Design-Schriften der Bundesregierung für den Online-Bereich

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

Neue Praxis

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

Neue Demos

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

Verdana

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

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-

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

Ressortname) oder breit (längerer Ressortname).

Bei schmalen Bildwortmarken nimmt der Logobereich eine Breite

von 7 RE (= 196 px) ein und bei breiten Bildwortmarken eine Breite von 9 RE

(= 252 px). Die Höhe des Logobereiches ist einheitlich mit 5 RE (= 100 px) defi-

niert.

Für die Umsetzung in relativen Schriftgrößen-Einheiten wird aus-

gehend von einer 16 px Standard-Schriftgröße eine Breite von 196 px in 12,25 em

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

Der Hintergrund des gesamten Logobereiches ist weiß.

Seitenaufbau

16 S e i t e na u f b a u

Bildwortmarke

Die Bildwortmarke der Bundesregierung und

ihrer Ressorts besteht aus drei korrespondie-

renden Elementen: dem Bundesadler, dem

dreifarbigen Säulenelement und dem vom

Ressort abhängigen Text. Diese Elemente ste-

hen in einem durch den Raster fest definier-

ten Verhältnis zueinander und dürfen weder

verändert noch skaliert werden.

Die Bildwortmarke hat vier unterschiedliche

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

Presse- und Informationsamt der

Bundesregierung,

Dorotheenstraße 84,

10117 Berlin,

E-Mail: [email protected].

Der Logobereich

Die Bildwortmarke in zwei Breiten mit jeweiliger Schutzzone

Bundesministerium fürwirtschaftliche Zusammenarbeitund Entwicklung

Die Bundesregierung

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

Die durch Rastereinheiten/Schutzzonen-Module definierte Schutzzone der Bildwortmarke

Identitätsbereich

Durch eine aussagekräftige Gestaltung des Identitätsbereichs wird

die Bundesregierung oder das jeweilige Ressort als Betreiber der Internet-

präsenz deutlich gekennzeichnet. Der Identitätsbereich dient der Wieder-

erkennung und als Orientierungshilfe für die Besucher der Websites und

muss auf allen Seiten eingesetzt werden.

Der Identitätsbereich kann die oberste Ebene der Navigation, das

Hauptmenü, beinhalten. Es wird empfohlen, nicht mehr als sechs Punkte im

Hauptmenü zu platzieren.

Ob das Hauptmenü im Identitätsbereich steht oder ob alle Ebenen

im Navigationsbereich angesiedelt werden, muss aufgrund der Komplexität

und Tiefe der Navigationsstruktur individuell entschieden werden.

Die Platzierung anderer Navigationselemente im Identitätsbereich

ist nicht gestattet. Eine Ausnahme bildet die Positionierung des Servicebe-

reichs (vgl. Kapitel „Servicebereich“) im Identitätsbereich.

Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen

Navigations- und einem Contentbereich wird durch eine Farbkodierung dar-

gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereichs wird

durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.

Der Contentbereich, Träger der Hauptinformationen, wird von den Farbflä-

chen gehalten und hebt sich durch helle oder weiße Hintergrundfarben ab.

Der Akzentuierung dienen klare, reine und helle Farben aus einem der defi-

nierten Farbklimata.

Empfehlung: Über die weitere Ausgestaltung durch Verwendung

zusätzlicher Gestaltungselemente, zum Beispiel Farbflächen oder Bilder, ent-

scheidet das jeweilige Ressort. Es ist darauf zu achten, dass eine gestalteri-

sche Verbindung zum Navigationsbereich gewahrt bleibt und der Logobe-

reich optisch nicht beeinträchtigt wird.

Der Identitätsbereich schließt mit seiner Oberkante bündig mit der

Gestaltungsfläche ab. Links wird er durch den Logobereich begrenzt. In der

Breite nimmt er den gesamten verbleibenden Raum rechts des Logobereichs

ein. Die Höhe beträgt 100 px. Bei Schriftvergrößerung durch den Nutzer be-

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.

18 S e i t e na u f b a u

Sprachregelungen

Einheitliche Sprachregelungen und Benennun-

gen in den unterschiedlichen Internetpräsen-

zen und Online-Medien erleichtern den Besu-

chern die Orientierung und Navigation. Aus

diesem Grund wird die Benennung von zwei

Punkten der obersten Navigationsebene vor-

gegeben:

- „Ministerium“ (bzw. „Bundesregierung“,

„Bundeskanzler“)

anstelle vager oder wechselnder Bezeich-

nungen wie: Das Ministerium, Wir über uns,

Über uns, Behörden und Einrichtungen, Die

Ministerien, Die Staatssekretäre etc.

- „Themen“

anstelle vager oder wechselnder Bezeich-

nungen wie: Schwerpunkte, Sachgebiete,

Fachabteilungen, Arbeitsfelder etc.

Die Benennung aller weiteren Menüpunkte im

Identitätsbereich bleibt den einzelnen Ressorts

überlassen. Empfehlung: Folgende Bezeichnun-

gen werden weiterhin eingesetzt:

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

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.

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

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.

Es wird empfohlen, zwischen Y Active,

YHover-/Focus-,Y Visited und YUnvisited

Links zu differenzieren. Grafische Spielformen

wie Blinkeffekte oder Ähnliches sind auszu-

schließen.

Anwendungsbeispiel für einen Identitätsbereich auf einer Website des Presse- und Informations-

amtes der Bundesregierung

Die beiden Größen des Identitätsbereichs

Die beiden Schriftarten und -größen des

Identitätsbereichs

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

beeinträchtigt werden.

Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen

Navigations- und einen Contentbereich wird durch eine Farbkodierung dar-

gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereiches wird

durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.

Der Contentbereich, Träger der Hauptinformationen, wird von den Farbflä-

chen gehalten und hebt sich durch helle oder weiße Hintergrundfarben ab.

Der Akzentuierung dienen klare, reine und helle Farben aus einem der defi-

nierten Farbklimata.

Grafische Gestaltungselemente wie Farbflächen und ggf. verwen-

dete Schriften sollten mit dem Identitätsbereich korrespondieren. Die Ver-

wendung von Fotos und Y Grafikelementen oder weiteren funktionalen Ele-

menten ist im Navigationsbereich nicht gestattet.

Der Navigationsbereich ist entweder 7 RE (= 196 px = 12,25 em) oder

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-

größen-Einstellung vom Nutzer erhöht, wächst auch die Breite.

Der Navigationsbereich beginnt am linken Rand der Gestaltungs-

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

Breite weiß definiert.

Innerhalb des Navigationsbereichs werden die einzelnen Elemente

entsprechend dem Ausrichtungsraster positioniert.

20 S e i t e na u f b a u

Sprachregelungen

Einheitliche Sprachregelungen und Benen-

nungen in den unterschiedlichen Internet-

präsenzen und Online-Medien erleichtern

den Besuchern die Orientierung und Naviga-

tion. Aus diesem Grund wird die Benennung

von zwei Punkten der obersten Navigations-

ebene vorgegeben:

- „Ministerium“ (bzw. „Bundesregierung“,

„Bundeskanzler“)

anstelle vager oder wechselnder Bezeichnun-

gen wie: Das Ministerium, Wir über uns, Über

uns, Behörden und Einrichtungen, Die Mini-

sterien, Die Staatssekretäre etc.

- „Themen“

anstelle vager oder wechselnder Bezeich-

nungen wie: Schwerpunkte, Sachgebiete,

Fachabteilungen, Arbeitsfelder etc.

Die Benennung aller weiteren Menüpunkte im

Identitätsbereich bleibt den einzelnen Ressorts

überlassen. Empfehlung: Folgende Bezeichnun-

gen werden weiterhin eingesetzt:

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

Der Navigationsbereich

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

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,

YHover-/Focus-,Y Visited und YUnvisited

Links zu differenzieren.

Die beiden Größen des Navigationsbereichs

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

und Navigationsbereich

Servicebereich

Der Servicebereich dient der Aufnahme ständig sichtbarer Service-

funktionen der gesamten Internetpräsenz. Seine Gestaltung ist dem Iden-

titäts- und Navigationsbereich untergeordnet. Für den Servicebereich sind

zwei alternative Positionierungen möglich:

- Innerhalb des Identitätsbereichs:

Der Servicebereich kann oberhalb des Identitätsbereiches positioniert

werden. In diesem Fall nimmt er in der Vertikalen einen Raum von mini-

mal (bei Grundeinstellung der Schriftgröße) 20 px (= 1,25 em) ein.

Empfehlung: Um die durch Weißraum gebildete visuelle Klammer der

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

nierter Servicebereich auf einem weißen Hintergrund.

22 S e i t e na u f b a u

Sprachregelungen

Einheitliche Sprachregelungen und Benen-

nungen erleichtern den Besuchern das

schnelle Finden von Service-Inhalten, zum

Beispiel Suchfunktionen oder Kontaktmög-

lichkeiten. Aus diesem Grund werden drei

Servicepunkte auch mit ihrer Benennung vor-

gegeben:

- „Home“

Der direkte Link zur Startseite. Er ist parallel

zur Verlinkung über die Bildwortmarke zu

berücksichtigen.

- „Kontakt“

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:

Der Servicebereich kann unterhalb des Navigationsbereiches positioniert

werden. Zur besseren Differenzierung ist zwischen den Bereichen ein

Abstand zu halten: Der Servicebereich beginnt mindestens 2 RE (= 40 px

= 2,5 em) unterhalb des letzten Menüpunktes der Navigation.

Aufgrund seiner Funktion sollte der Servicebereich so platziert

werden, dass er ohne vertikales oder horizontales Scrollen im sichtbaren Be-

reich des Browsers liegt. Eine inhaltliche Festlegung oder Begrenzung kann

ein eventuelles Wegscrollen verhindern.

Im Übrigen sind hierzu die Informationen zu „Barrierefreiheit und

Frames“ im Kapitel „Zusatzinformationen“ zu beachten.

- „E-Mail“

Bezeichnung für eine formlose E-Mail-Funk-

tion oder ein E-Mail-Formular direkt an den

Website-Betreiber.

- „Textversion“

Ein Link, der die Nur-Text-Version der Inter-

netpräsenz aufruft. (Falls trotz aller Bemü-

hungen keine barrierefreie Umsetzung

möglich ist, muss zumindest eine barriere-

freie Textversion angeboten werden).

- „Kontakt“

Bezeichnung für ein E-Mail-Formular, das

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 S e i t e na u f b a u

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

zu beachten.Beispiel für einen Servicebereich im Navigationsbereich auf der Website Medienmonitoring (eine

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

schriften ist Verdana, Helvetica, Arial, Taho-

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,

YHover-/Focus-, Y Visited und YUnvisited

Links zu differenzieren.

Beispiel für die Benennung der Servicepunkte auf der Website des Bundesministeriums für Wirtschaft

und Arbeit (Ausschnitt)

Die Schriftarten und -größen im Servicebereich

Contentbereich

Der Contentbereich beinhaltet die redaktionellen Inhalte der

Internetpräsenz. Diese können, der Komplexität einer Regierung entspre-

chend, sehr unterschiedlich sein: Text- und Bildinformationen, Listen, Links,

Banner, Datenbankanbindungen und Download-Bereiche etc.

Die Gestaltung des Contentbereichs transportiert die visuelle Kultur

der Bundesregierung in besonderem Maße, da hier die wechselnden Bilder

und Texte die Aufmerksamkeit besonders in Anspruch nehmen.

Die Aufteilung der Gestaltungsfläche in einen Identitäts-, einen

Navigations- und einen Contentbereich wird durch eine Farbkodierung dar-

gestellt. Die Verknüpfung des Identitäts- und des Navigationsbereichs wird

durch gleiche Farbklimata und gedeckte, abgetönte Farbflächen visualisiert.

Der Contentbereich wird von den Farbflächen gehalten und hebt sich durch

helle oder weiße Hintergrundfarben ab. Der Akzentuierung dienen klare, rei-

ne und helle Farben aus einem der definierten Farbklimata.

Für gestalterisch hier nicht definierte Funktionen und Anwendun-

gen wird empfohlen, sich an den vorliegenden, allgemeinen Richtlinien zu

orientieren.

Der Contentbereich beginnt mit seiner linken Seite direkt am Navi-

gationsbereich. Oben schließt der Contentbereich an der Unterkante des

Identitätsbereiches an.

Die Breite des Contentbereichs nimmt den gesamten restlichen

Raum ein. Auf der rechten Seite bleibt ein Streifen von 12 px als Abstand zum

inneren Browserrand geschützt.

26 S e i t e na u f b a u

Spaltenraster

Empfehlung: Texte, Tabellen und Formulare

können im Sinne eines Satzspiegels in Spal-

ten angeordnet werden. Die folgenden Emp-

fehlungen dienen der Orientierung und kön-

nen flexibel angewandt werden.

Zur Auswahl stehen folgende Spaltenraster,

jeweils mit schmalem oder breitem Naviga-

tionsbereich:

- Einspaltiger Raster mit Marginalspalte

- Zweispaltiger Raster mit Marginalspalte

- Zweispaltiger Raster ohne Marginalspalte.

Für Überschriften, größere Abbildungen etc.

können mehrere Spalten zusammengefasst

werden. Ebenso ist es möglich, die vordefi-

nierten Spalten für Tabellen etc. weitere

Male zu unterteilen.

Die Marginalspalte enthält Text- und Bild-

informationen, die einen nebenstehenden

Inhalt ergänzen. Dies kann eine Auflistung

weiterführender Links, die direkte Verbin-

dung zu Sonderseiten und -themen oder

auch die Abbildung von Bannern der Bundes-

regierung sein.

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 S e i t e na u f b a u

Buttons, Piktogramme

Im Contentbereich können sowohl Textlinks

als auch Text in Form von YGrafikelementen

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

verwendet werden. Anwendungsbeispiele des Corporate Designs im Contentbereich: Text- und Tabellendarstellung

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 S e i t e na u f b a u

Schriften

Im Contentbereich kann sowohl die Neue

Demos und Neue Praxis als auch die System-

schrift Verdana verwendet werden.

Empfehlung: Wenn Überschriften, Themen-

titel oder Ähnliches als Grafiken gesetzt wer-

den, ist darauf zu achten, dass die Zugäng-

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

13 px Größe und einer Spationierung von

0,04 YGeviert 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-

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.

Die Schriftarten, -schnitte und -größen im Contentbereich

Überschrift

Überschrift

Thementitel

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 YActive,Y Hover-/

Focus-,Y Visited und YUnvisited Links zu diffe-

renzieren.

Anwendungsbeispiel des Corporate Designs: Suche mit Suchergebnis auf einer Website des Presse-

und Informationsamtes der Bundesregierung

32 S e i t e na u f b a u

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 S e i t e na u f b a u

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

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

38 A nw e n d u n g s b e i s p i e l e

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

Formular

Tabelle

40 A nw e n d u n g s b e i s p i e l e

Anwendungsbeispiel für die Gestaltung von Formularen auf der Website des Bundesministeriums für

Verkehr, Bau- und Wohnungswesen

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

Suche

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.

Anwendungsbeispiel für die Gestaltung von Suchmasken und Suchergebnislisten auf einer Website

des Presse- und Informationsamtes der Bundesregierung

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.

Zusatzinformationen

44 Z u s a t z i n f o r m a t i o n e n

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-

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

46 Z u s a t z i n f o r m a t i o n e n

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

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

Ein durchgängiges Layout erleichtert die Orientierung für alle Nut-

zer und erhöht die Wiedererkennung einer Internetpräsenz. Einer guten

und verständlichen Benutzerführung liegt die konsistente Verwendung von

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

Layouttabellen: Vom Einsatz von Tabellen für den Grundaufbau

eines Seitenlayouts wird abgeraten (WAI 5.3, BITV 5.3). Hilfsmittel wie

Screenreader interpretieren die Seiten in Zeilen linear von links nach rechts.

Sie geben im Falle einer Layouttabelle deren Inhalte nur dann sinnvoll wie-

der, wenn die Seite diesem linearen Aufbau entsprechend strukturiert ist.

Wird dennoch eine Tabelle zu Layoutzwecken verwendet, darf

kein weiteres strukturelles HTML-Markup zur Textauszeichnung verwendet

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.

48 Z u s a t z i n f o r m a t i o n e n

Checkliste Seitenaufbau/Layout:

- Einheitliches Layout für die gesamte

Internetpräsenz

- Konsistente Verwendung der Naviga-

tionsmechanismen

Checkliste Layouttabellen:

- Seitenlayout mit Stylesheets, nicht mit

Tabellen formatieren

- Tabellen für Layoutzwecke nur dann ein-

setzen, wenn eine lineare Bearbeitung

der Seite ihrem Sinn entspricht

- Wenn Tabellen zu Layoutzwecken ver-

wendet werden, kein zusätzliches struk-

turelles HTML-Markup für Textauszeich-

nungen einsetzen

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-

und Spaltenüberschriften müssen die Daten- und Überschriftenzellen einan-

der klar zugeordnet werden. Dies geschieht mittels Einsatz von THEAD, TFOOT

und TBODY, um Zeilen zu gruppieren, COL und COLGROUP, um Spalten zu

gruppieren, und mit „axis“-, „scope“- und „headers“-Attributen, um komplexe-

re Zusammenhänge zwischen Daten zu beschreiben (WAI 5.2).

Barrierefreiheit und Spalten

In einem Layout sollte die Erstellung von Textspalten ausschließ-

lich über Stylesheets (CSS 2) erfolgen. Dies ermöglicht dem Nutzer das Aus-

schalten der Textspalten, um einen für ältere Screenreader lesbaren Text-

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

Um eine korrekte Interpretation von Listen durch Screenreader zu

ermöglichen, müssen diese mit dem entsprechenden HTML-Markup ausge-

zeichnet werden. HTML-Elemente wie LI, OL, UL und DL markieren Listenele-

mente entsprechend der Listennatur und dürfen auch nur für Listen und

nicht für Texteinzüge im Fließtext etc. verwendet werden (WAI 3.6, BITV 3.6).

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

Blinde Nutzer navigieren mit der Tastatur und ohne Maus auf

Internetseiten. Dabei bleiben Screenreader häufig in einzelnen Frames hän-

gen und erreichen nicht alle Informationen. Deswegen sollte auf den Einsatz

von Frames verzichten werden.

Werden Frames eingesetzt, so muss jeder Frame eindeutig mit der An-

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.

Checkliste Datentabellen:

- Zeilen- und Spaltenüberschriften kenn-

zeichnen

- Bei zwei und mehr logischen Ebenen von

Zeilen- und Spaltenüberschriften sollen

Daten- und Überschriftenzellen klar zu-

geordnet werden

Checkliste: Spalten

- Textspalten nur mittels Stylesheets for-

matieren

- Keine Frames für ein Spaltenlayout ein-

setzen

Checkliste Listen:

- Für Listen das korrekte HTML-Markup ver-

wenden

- Keine HTML-Listenelemente für Textein-

züge verwenden

- Aufzählungszeichen aus Bildelementen

mit entsprechenden Namen und <alt>-

Texten versehen

Checkliste Frames:

- Nach Möglichkeit keine Frames verwen-

den

- Wenn Frames, mit <NOFRAMES>-Version

hinterlegen

- Frames eindeutig mit Ortsbezeichnung

und Funktion benennen

- Jeden Frame mit einem Namen versehen

Checkliste Schriften:

- Schriftart, -größe und -farben mit CSS

formatieren

- Für Schriftarten, -größen und -farben kei-

ne <FONT>-Tags verwenden

- Schriftart und -größe nicht in absoluten

Einheiten angeben

- HTML-Elemente und -Attribute korrekt

einsetzen (zwischen Struktur und Präsen-

tation trennen)

- Schriftarten ohne Serifen verwenden

- Unterschiedliche Schriftarten sparsam

einsetzen

- Schriftgröße entsprechend 11 pt ange-

ben

- Standardabstand zwischen den Buchsta-

ben nicht verringern

- Keine <BLINK>-Tags verwenden

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

Der Einsatz unterschiedlicher Schriftarten soll sich auf ein Mini-

mum beschränken.

Um sehbehinderten Menschen die Möglichkeit zu geben, die Dar-

stellung der Schriftgröße individuell in ihrem Browser einzustellen, sollen

die Schriftformate nie in absoluten Einheiten (WAI 3.4) und nicht mit dem

<FONT>-Tag in HTML, sondern mit der „font”-Property in CSS angegeben

werden (WAI 3.3, BITV 3.4).

Als Mindestgröße wird eine Schriftgröße empfohlen, die der Größe

von 11 pt entspricht. Der Standardabstand zwischen den Buchstaben darf zu-

gunsten der Lesbarkeit nicht verringert werden.

Die Angabe mehrerer alternativer Fonts im Quelltext (zum Beispiel

Verdana, Helvetica, Arial, Sans Serif) erhöht die Wahrscheinlichkeit, dass ei-

ne der angegebenen Schriften auf dem System des Nutzers verfügbar ist.

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.

50 Z u s a t z i n f o r m a t i o n e n

Umrechnungstabelle für Schriftgrößen

Nachfolgende Tabelle zeigt die Umrechnung der Schriftgrößen

zwischen den gängigsten Layoutprogrammen und Browsertypen.

Barrierefreiheit und Farben

Ein bewusster Einsatz von Farben steigert die Klarheit und Lesbar-

keit einer Internetpräsenz. Dem ausreichenden Kontrast zwischen den Text-

und Hintergrundfarben ist eine besondere Aufmerksamkeit zu schenken, so

dass auch Nutzer mit schwarz-weißen Bildschirmen oder Farbenfehlsichtig-

keit die Inhalte ohne Schwierigkeiten erkennen können (WAI 2.2, BITV 2.2/1).

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

Bilder, Grafiken und Symbole – alle reinen Bild-Informationen also –

haben nur für Sehende einen Wert. Von Hilfsmitteln wie Screenreadern

können sie nicht erkannt und vermittelt werden. Auch Nutzer, die die Bild-

darstellung ausgeschaltet haben (zum Beispiel wegen zu langsamer Über-

tragungsrate), erhalten keine Informationen über die als Bild dargestellten

Grafiken und als Bilder angelegten Links.

Bildelemente einer Seite können nur von Sehenden und visuellen

Browsern als solche wahrgenommen werden. Blinde Nutzer beispielsweise,

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

Diagramm) nicht in einem kurzen <alt>-Text wiedergegeben werden kann,

gibt es die Möglichkeit, die Grafik mit einem Link zu einer Unterseite mit ei-

ner ausführlichen Beschreibung zu versehen.

52 Z u s a t z i n f o r m a t i o n e n

Checkliste Farben:

- Auf ausreichenden Kontrast zwischen

Text- und Hintergrundfarbe achten

- Keine Rot-Grün-Kontraste einsetzen

- Informationen nicht allein durch Farben

vermitteln

- Farben in Zahlen und mit CSS formatieren

Checkliste Fotos und Grafikelemente:

- Angabe eines Textäquivalents (<alt>-

Text) für jedes Bildelement

- Einfügen eines Links, der auf eine genauere

Beschreibung des Bildes verweist

- Bei Bilder-Links: Eindeutige Beschrei-

bung des Ziels im <alt>-Text

- Wenn möglich, HTML-Markup (zum Bei-

spiel MathML) für Grafiken verwenden

- Typografie-Elemente und Texte als Bild

(.jpg oder .gif) vermeiden

Checkliste Diagramme:

- Angabe einer kurzen Textbeschreibung

(<alt>-Text)

- Einfügen eines Links, der auf eine genauere

Beschreibung des Bildes verweist

Bei Image-Maps ist eine alternative Bildbeschreibung (WAI 1.1)

ebenso notwendig wie die Angabe von Anzahl und Ziel enthaltener Links.

Besonders wichtig ist die eindeutige und klare Benennung angebotener

Links.

Image-Maps sollen immer clientseitig eingerichtet werden, da sie

nur dann mit der Tastatur (ohne Maus) angesteuert werden können (WAI

9.1). Kann aus bestimmten Gründen nur eine serverseitige Image-Map ein-

gerichtet werden, so ist diese unbedingt mit redundanten Text-Links auszu-

statten (WAI 1.2, BITV 1.2).

Barrierefreiheit und Multimedia

Grundsätzlich gelten für Bewegtbilder wie Video und Animatio-

nen die gleichen Richtlinien wie für stehende Bilder.

Um die Bewegtbild-Informationen für Blinde zugänglich zu ma-

chen, müssen Video und Animationen mit einem Textäquivalent hinterlegt

werden (WAI 1.1). Beim Einsatz von Video und Animationen ist es nahe lie-

gend, die visuellen Inhalte auf einer Extraseite als Text ausführlich zu be-

schreiben und auf diese einen Link zu legen.

Eine Audio-Beschreibung der visuellen Information des Videos

oder der Animation ist vorgeschrieben (WAI 1.3, BITV 1.3). Für Hörgeschädig-

te ist eine visuelle Übersetzung der Audio-Informationen notwendig. So

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.

Checkliste Image-Maps:

- Angabe eines Textäquivalents für das Ge-

samtbild

- Angabe einer Liste mit Übersicht, Anzahl

und Ziel aller enthaltenen Links

- Möglichst nur clientseitige Image-Maps

bereitstellen

- Bei serverseitigen Image-Maps redun-

dante Textlinks anbieten

Checkliste Multimedia:

- Hinterlegung eines Textäquivalents für

die visuellen Inhalte von Bewegtbildern

- Textbeschreibung der visuellen Inhalte

(bei größerem Umfang sollte auf eine se-

parate Seite mit Beschreibung verlinkt

werden)

- Audiobeschreibung der visuellen Inhalte

- Textbeschreibung aller Audio-Inhalte, bei

Video in Form von Untertiteln

- Keine Blink- und Flackereffekte auf dem

gesamten Bildschirm einsetzen

- Blinkenden Text nur über Stylesheets ein-

setzen

Barrierefreiheit und Formulare

Formulare werden besser barrierefrei zugänglich, wenn die Zuord-

nung zwischen dem Namen des Formularfeldes und dem Feld selbst eindeu-

tig ist. Dies wird durch eine Positionierung des Feldnamens direkt vor dem

dazugehörigen Formularfeld erzielt. Die Verbindung zwischen Beschriftung

und Formularfeld darf nicht unterbrochen werden (WAI 10.2, BITV 10.2).

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

Applets und Scripts (zum Beispiel eingebettete Java-Applikationen)

sind eigenständige kleine Programme, die automatisch auf dem Rechner des

Nutzers ablaufen, wenn dieser eine Internetseite mit Applets besucht. Dieser

Vorgang kann in den Browservoreinstellungen unterdrückt werden, da Applets

immer ein gewisses Sicherheitsrisiko bedeuten.

Manche Browser und Hilfsmittel für Behinderte unterstützen keine

Applets (zum Beispiel der DOS-Browser Lynx). Daher sollen Applets nur dann

eingesetzt werden, wenn gleichzeitig eine Alternative hinterlegt wird. Es

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.

54 Z u s a t z i n f o r m a t i o n e n

Checkliste Formulare:

- Formularbeschriftung immer direkt vor

dem Formularfeld positionieren

- Formlose Anfrage anbieten

- Bedienung mit Tastatureingabe ermög-

lichen

- Logische Tab-Reihenfolge anlegen

Checkliste Applets/Scripte:

- Applets und Scripts direkt zugänglich

programmieren

- Nicht zugängliche Applets und Skripte

mit Alternativinformationen hinterlegen

- Bereitstellung einer alternativen, barrie-

refrei zugänglichen Seite

- Die Alternativinformationen müssen

über Tastatur zugänglich sein

- Nur logische, geräteunabhängige Ereig-

nishändler einsetzen

Barrierefreiheit und Struktur/Orientierung

Jede Website muss inhaltlich klar und einfach strukturiert sein.

Über die Struktur sollen Informationen bereitstehen, zum Beispiel in Form

einer Sitemap oder eines Inhaltsverzeichnisses (WAI 13.3, BITV 13.3). Diese

Übersichten sind am zugänglichsten, wenn sie in einer einspaltigen Liste an-

geordnet sind.

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

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

Barrierefreiheit und Navigation

Navigationsmechanismen sind in konsistenter Weise zu verwen-

den (WAI 13.4, BITV 13.4). Zudem sind Navigationsleisten bereitzustellen, die

den Navigationsmechanismus hervorheben (WAI 13.5, BITV 13.5, zum Bei-

spiel Haupt- und Untermenü). Dadurch wird die Navigationsstruktur ver-

ständlicher und der Zugriff auf sie erleichtert.

Eine Website wird allgemein benutzerfreundlicher durch die

gleich bleibende Position funktionaler Links über die gesamte Site und die

Platzierung wichtiger Navigationselemente direkt am Seitenbeginn. Nutzer,

die mit ihrem Screenreader die Seite nach Links abtasten, benötigen eindeu-

tige Link-Benennungen, die in wenigen Worten deutlich sagen, zu welchen

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

neuen Fenster zu verlinken oder das aktuelle Fenster zu wechseln. Die Funk-

tion von Pop-ups ist zu vermeiden, bis sie von Nutzerseite aus unterbunden

werden kann (WAI 10.1, BITV 10.1).

Checkliste Struktur/Orientierung:

- Seiteninhalte klar und verständlich struk-

turieren

- Leicht zu handhabende, kleine Informa-

tionsblöcke bilden

- Einspaltige Sitemaps oder Inhaltsver-

zeichnisse anbieten

Checkliste Links:

- Durchgängig gleiche Positionierung der

Funktions-Links auf der gesamten Website

- Links mit inhaltlich eindeutiger Beschrif-

tung

- Links zu Unterkapiteln mit einer Kurzbe-

schreibung versehen

- Eine horizontale Aufreihung von Links im-

mer mit ausreichendem Abstand oder

Sonderzeichen voneinander trennen

- Alle Links für die Tab-Taste ansteuerbar

anlegen

- Grafische Schaltflächen ausreichend

groß gestalten

Checkliste Pop-ups:

Keine Pop-up-Fenster einbinden

Barrierefreiheit und Aktualisierung

Bei dynamischen Inhalten muss sichergestellt sein, dass die zur

Verfügung gestellten Alternativen dem Aktualitätsgrad der dynamischen

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-

matischen Aktualisierung von Seiteninhalten. Mindestanforderung ist, dem

Nutzer einen Hinweis auf diese Funktion zu geben und ihn entscheiden zu

lassen, ob die Seite aktualisiert werden soll. Bis zur browserseitigen Unter-

stützung dieser Funktionswahl sollte der Refresh-Befehl nicht verwendet

werden (WAI 7.4, BITV 7.4).

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.

56 Z u s a t z i n f o r m a t i o n e n

Checkliste dynamische Inhalte:

Alle Alternativen für dynamische Inhalte

müssen parallel zu den dynamischen In-

halten aktualisiert werden.

Checkliste Weiterleitung:

- Hinweis auf automatischen Neuaufruf

der Seite geben

- Keine Verwendung des Refresh-Befehls

- Serverseitige automatische Weiterlei-

tung einsetzen, andernfalls einen norma-

len Link verwenden

Barrierefreiheit und Download-Dateien

PDF ist ein offenes, weit verbreitetes und plattformunabhängiges

Dateiformat, das von Adobe Systems entwickelt wurde. Durch dieses, im

Internet für Downloads eingesetzte Dateiformat ist es möglich, Dokumente

gleichen Inhalts sowohl für den Bildschirm als auch für den Druck zu gene-

rieren. Um eine PDF-Datei zu öffnen, ist die Zusatzsoftware Acrobat Reader

notwendig, die von Adobe Systems frei zur Verfügung gestellt wird.

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

Checkliste Download-Dateien:

- Auf den Einsatz von PDF-Dokumenten

hinweisen

- Links zu den entsprechenden Websites

von Adobe Systems anbieten

- Dokumente in unterschiedlichen Datei-

formaten anbieten (PDF, RTF, TXT)

- MS-DOS-Konventionen für Dateibenen-

nungen einhalten

Barrierefreiheit und Sprache

Es ist auf einen allgemein verständlichen Sprachgebrauch mit ein-

fachen und gebräuchlichen Begriffen zu achten (WAI 14.1, BITV 14.1).

Es ist ratsam, sich knapp, aber klar und verständlich auszudrücken.

Lesbarkeitsstatistiken, die in einigen Programmen zur Textverar-

beitung verfügbar sind, können brauchbare Indikatoren für die Klarheit und

Einfachheit eines Textes sein. Es ist besser, einen professionellen Korrektor zu

bitten, den Inhalt auf seine Klarheit zu überprüfen. Zu prüfen sind unter an-

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

Die Überprüfung der barrierefreien Zugänglichkeit einer Internet-

präsenz sollte sowohl mit automatischen Tools als auch von Personen durch-

geführt werden. Automatisierte Methoden sind im Allgemeinen schnell und

bequem, können aber nicht alle Zugänglichkeitsprobleme erkennen. Eine

Überprüfung durch Personen mit unterschiedlichen Qualifikationen ist hilf-

reich, um eine klare Sprache und einfache Navigation sicherzustellen.

Es ist sinnvoll, die Überprüfungen in den frühesten Stufen der Ent-

wicklung zu beginnen, da zeitig erkannte Zugänglichkeitsprobleme einfa-

cher zu korrigieren und zu vermeiden sind.

Ein weiterer empfohlener Standard der WAI ist, jede Seite nach ih-

rer Überprüfung mit einer Dokumententyp-Erklärung (DTD) am Anfang der

Seite auszustatten (WAI 3.2). Dies dient der Erkennung des Zugänglichkeits-

levels sowie weiterer überprüfter und eingehaltener Standards.

58 Z u s a t z i n f o r m a t i o n e n

Checkliste Sprache:

- Einfache und verständliche Sprache ver-

wenden

- Fachausdrücke in einem Glossar erläu-

tern

- Sprachwechsel kennzeichnen

- Zitate kennzeichnen

- Fachausdrücke und Abkürzungen kenn-

zeichnen

- Professionelle Korrektoren einsetzen

Wichtige Überprüfungsmethoden auf

Barrierefreiheit:

- Überprüfung durch ein automatisches

Tool (zum Beispiel http://bobby.cast.org/)

- Überprüfung der Syntax (zum Beispiel

HTML, XML usw.)

- Überprüfung von Stylesheets (zum Bei-

spiel CSS)

- Test auf einem Text-Browser

- Test auf einem Grafik-Browser:

- mit Ton und Grafik aktiviert,

- ohne Grafiken,

- ohne Ton,

- ohne Maus (wichtig bei Einsatz von Lay-

outtabellen und Frames)

- mit deaktivierten Frames, Scripten,

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

Nachstehend werden allgemeine Begriffe

aus Grafik- und Screendesign und Begriffe,

die im vorliegenden Styleguide eingeführt

wurden, alphabetisch aufgelistet und erläu-

tert. Technische Begriffe aus dem Internet

werden im Nachschlagewerk der Initiative

BundOnline 2005

(http://www.bund.de/BundOnline-

2005/SAGA/Glossar-.6343.htm) erläutert.

A

Active LinkEngl. für „betätigter Verweis“. Visuelle Aus-

zeichnung eines Text-Hyperlinks während

des Mausklicks. Beispielweise kann die Farbe

oder Unterstreichung eines Links während

des Klicks wechseln. Diese Auszeichnung sig-

nalisiert dem Nutzer, dass soeben eine Inter-

aktion aufgerufen wurde.

(Y Hyperlink)

Additives FarbsystemSystem zur Farbdarstellung auf Bildschirmen.

Aus den Y RGB-Farben Rot, Grün und Blau las-

sen sich alle weiteren, am Bildschirm sichtba-

ren Farben mischen. Zu gleichen Anteilen ge-

mischt, ergeben sich je nach Farbintensität

Weiß bis Schwarz.

AnimationDie Darstellung von sich bewegenden Bild-,

Text- oder Grafikelementen, so dass zum Bei-

spiel ein kleiner Film entsteht.

Animated GIFEin Dateiformat, das die Möglichkeit bietet,

mehrere Grafiken in einer einzigen Grafikda-

tei so zu speichern, dass die einzelnen Grafi-

ken zeitlich steuerbar sind. Dadurch wird die

Darstellung kleiner, aus GIF-Grafiken beste-

hender Filmsequenzen ermöglicht.

Anti-AliasingEin Algorithmus für Pixelgrafiken, der in Grafi-

ken an harten Kanten oder Farbübergängen

sichtbare Treppeneffekte ausgleicht.

AppletEin kleines, aus dem Internet ladbares, in der

Programmiersprache Java erstelltes Pro-

gramm.

ASP Die Abkürzung für „Active Server Pages“. ASP

führt auf einem Server Scripte (*.asp) für dy-

namisch generierte Internetseiten aus..

AttachmentEine beliebige Datei, die als Anlage mit einer

E-Mail versandt wird, zum Beispiel Textda-

teien und Bilder.

AuflösungDie Wiedergabefeinheit von Elementen bei

ihrer Zusammensetzung zu Bildern. Je höher

die Auflösung eines Bildes, desto detailrei-

cher ist seine Darstellung bzw. die Möglich-

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

je nach Anwendung und Verfahren in dpi

(Dots per Inch), ppi (Points per Inch) oder lpi

(Lines per Inch) gemessen.

AusrichtungsrasterDie feinste Unterteilung einerY Rastereinheit.

Der Ausrichtungsraster dient der einheit-

lichen Anordnung detaillierter Gestaltungs-

elemente in einem Y Grundraster.

AuszeichnungDas Hervorheben einzelner Textteile durch

Varianten der Grundschrift, zum Beispiel kur-

sive oder fette Schnitte. Weitere Auszeich-

nungsmöglichkeiten sind Kapitälchen oder

Großbuchstaben, das Unterstreichen oder

farbliche Hervorstellen von Texten.

B

BannerEine kleine Werbefläche auf einer Internetsei-

te, die den Betrachter durch Anklicken mit

dem Web-Server des Werbenden verbindet.

Barrierefreiheit (oder

barrierefreier Zugang)Barrierefreier Zugang zum Internet bedeu-

tet, dass Internetanwendungen so entwick-

elt und technisch umgesetzt werden, dass

ein größtmöglicher Nutzerkreis mit unter-

schiedlichsten Hard- und Software-Voraus-

setzungen oder speziellen Hilfsmitteln die In-

halte erreichen kann. Im Abschnitt „Barriere-

freier Zugang“ des Kapitels „Zusatzinforma-

tionen“ werden dafür benötigte Richtlinien

zusammengefasst und nach Themen geglie-

dert wiedergegeben.

BasiselementeDie essenziellen Grundelemente eines Cor-

porate Designs, wie z. B. das Logo, Schriften

und Farben.

BaudNach Emile Baudot benannte Maßeinheit für

die Geschwindigkeit einer Datenübertra-

gung, zum Beispiel durch ein Modem. 28.800

Baud entsprechen der Übertragung von

28.800 Bit/Sekunde.

BildschirmauflösungDie durch ihre Pixelanzahl definierte Wieder-

gabefeinheit von Monitoren.

BildspracheDie durch ihren Stil hervorgerufene Anmu-

tung von Abbildungen.

BildunterschriftDer einem Bild zugeordnete, den Bildinhalt

beschreibende oder interpretierende Text.

BildwortmarkeEine gestaltete Kombination von einer Abbil-

dung mit einem Schriftzug. Die auch als Logo

bezeichnete Bildwortmarke drückt die Iden-

tität von Institutionen, Firmen, Marken oder

Veranstaltungen visuell aus.

BitDie Abkürzung für „Binary Digit“. Ein Bit ist

die kleinste, einer Speicherzelle entsprechen-

de Informationseinheit im binären Zahlensy-

stem. Ein Bit kann entweder den Wert 0 oder

1 annehmen; 8 Bit werden zu einem Byte zu-

sammengefasst.

BITVAbkürzung für „Barrierefreie-Informations-

technik-Verordnung“: Verordnung zur Schaf-

fung barrierefreier Informationstechnik nach

dem Behindertengleichstellungsgesetz,

nach deren Vorgaben alle öffentlich zugäng-

lichen Internetauftritte und -angebote sowie

Intranetauftritte und -angebote der Behör-

den der Bundesverwaltung bis zum

31.12.2005 umgesetzt werden müssen (vgl.

„Zusatzinformationen“).

BrailleEine nach ihrem Erfinder Louis Braille be-

nannte Blindenschrift, die einzelne Buchsta-

ben als eine Kombination aus sechs fühlbaren

Punkten darstellt.

BrowserAuch: Web-Browser. Die vom englischen „to

browse“ (durchblättern, sich umsehen) ab-

geleitete Bezeichnung für ein Programm zur

Darstellung von HTML-Dokumenten im Inter-

net. Daneben werden über den Browser die

Glossar

62 G l o s s a r

Befehle zur Navigation auf den Websites im

Internet gegeben. Bekannte Browser sind der

„Internet Explorer“ von Microsoft oder der

„Navigator“ von Netscape.

BrowserfensterInnerhalb eines Y Browsers der Bereich, in

dem HTML-Dokumente dargestellt werden,

wird auch Viewport genannt. Gemäß der Vor-

gaben des Styleguides der Bundesregierung

werden alle Webseiten auf Basis der empfoh-

lenen Bildschirmauflösung von 1024 x 768 px

für eine innere Browserfensterbreite von 952

px optimiert.

BrowseroptimierungAlle Internetpräsenzen und Online-Medien

der Bundesregierung sowie ihre Ressorts

müssen dem HTML 4.1 Standard entsprechen

und mittels Y CSS (Abkürzung für Casca-

ding Stylesheets) Level 2 formatiert sein. Da-

bei sollte auf die Darstellungseigenheiten ak-

tueller Versionen von populären Browsern,

(z. B. Microsoft Internet Explorer ab Version 5

und Netscape-Gecko-Browser ab Version 6)

Rücksicht genommen werden. Besondere

Beachtung muss der Interpretierbarkeit

durch Eingabe- und Ausgabegeräte für Kör-

perbehinderte (Braille-Ausgabe, Screenrea-

der), bei veränderten Benutzereinstellungen

(Farben, Schriften, Schriftgröße) und ohne

Zusatztechnologien (Plug-ins, Java, Java-

Script, CSS) finden. Eine Umsetzung einer ge-

sonderten Textversion wird dadurch in der

Regel unnötig.

BundOnline 2005Eine Initiative, mit der sich die Bundesregie-

rung verpflichtet, alle internetfähigen

Dienstleistungen der Bundesverwaltung bis

zum Jahr 2005 online bereitzustellen. Nach-

zulesen unter http://www.bundonline2005.de.

ButtonEin bildhaftes Bedienelement, das bei einem

Mausklick eine Funktion innerhalb des jewei-

ligen Programmes bewirkt. Bei der Wahl des

Buttontyps ist darauf zu achten, dass die But-

tons syntaktisch und visuell miteinander kor-

respondieren.

C

CGI-ScriptDie Abkürzung für „Common Gateway Inter-

face“. Das CGI ist die Schnittstelle auf einem

Web-Server zum Programmaufruf über einen

Browser. Die bekannteste Programmierspra-

che für diese Schnittstelle ist Perl.

ChatEin Chat ist eine Internetanwendung – eine

Plattform zur direkten Kommunikation ver-

schiedener Nutzer auf der Basis von Text-

nachrichten.

ContentDer im Y Browserfenster sichtbare Inhalt einer

Internetpräsenz, zum Beispiel Text- und Bild-

informationen, Datenbankanbindungen

oder Download-Bereiche etc.

Content-PagesDie Summe aller Y HTML-Seiten abzüglich

interaktiver Angebote wie Y Chats oder Da-

tenbanken.

Corporate DesignDas visuelle Erscheinungsbild einer Institu-

tion oder eines Unternehmens. Wichtige Ba-

siselemente des Corporate Designs sind das

Firmenzeichen, die Schriften und Farben so-

wie die Bildsprache. Das Corporate Design ist

der sichtbare Teil der Corporate Identity.

CSS Die Abkürzung für „Cascading Style Sheets“.

CSS sind Stilvorlagen, die es ermöglichen, das

Layout, die Schriften, Farben etc. von HTML-

Seiten zu definieren. Bei der Programmie-

rung von CSS muss auf die Darstellungseigen-

heiten aktueller Versionen von populären

Y Browsern, (z.B. Microsoft Internet Explorer

ab Version 5 und Netscape-Gecko-Browser ab

Version 6) Rücksicht genommen werden. Z. B.

wird die Einheit x-Höhe (ex) von populären

Browsern nicht regelrecht interpretiert und

kann daher zur Zeit nicht eingesetzt werden.

Die Interpretation durch Browser mit höhe-

rer Standardtreue (etwa Mozilla Firefox), so-

wie die semantische und technische Validität

des Quelltextes und der CSS-Anweisungen

darf dadurch jedoch nicht beeinträchtigt

werden. Browser der vierten Generation kön-

nen CSS-Anweisungen nicht interpretieren

(z. B. Netscape Navigator 4.7). Bei diesen

Browsern wird eine mit CSS programmierte

Seite ohne Designelemente dargestellt. So

lange die Funktionsfähigkeit der Seite ge-

währleistet bleibt, sind aber die Anforderun-

gen der Barrierefreiheit erfüllt. Die Defizite in

der Layoutdarstellung auf diesen Browsern

werden daher in Kauf genommen.

D

DateiformatEin Dateiformat ist ein Regelsatz zum struk-

turierten Aufbau von Dateien.

DitheringEin Verfahren, bei dem den Pixeln eines Bildes

bei einer Interpolation weitere „Zwischenfar-

ben“ zugeordnet werden.

DokumentvorlageEine YMusterdatei, in der bestimmte Gestal-

tungsparameter wie Schriften oder Farben

zur späteren Nutzung vorbereitet wurden.

DomainEine Domain ist eine Verwaltungseinheit in

Computernetzwerken, durch die eine Auftei-

lung in verschiedene logische oder geografi-

sche Segmente ermöglicht wird. Im Internet

werden Computer, die zu einer Domain ge-

hören, über Suffixe zusammengefasst, z.B.:

.com, .org, .de.

DownloadDer Datentransfer von einem Server, zum Bei-

spiel das Abrufen von Programmen, Bildern

oder Texten auf den eigenen Rechner.

Drop-down-MenüListe zum Auswählen eines Untermenüs, das

sich beim Klick auf das Hauptmenü „aus-

klappt“.

dpiDie Abkürzung für „Dots per Inch“, die die

Wiedergabefeinheit (Y Bildschirmauflösung)

von Monitoren bezeichnet.

E

E-GovernmentAllgemeine Bezeichnung für den über Daten-

netze abgewickelten Geschäftsverkehr von

Behörden. E-Government schließt die Kom-

munikation zwischen Behörden und Bürgern

(G2C), Behörden und der Wirtschaft (G2B) so-

wie Behörden untereinander (G2G) ein.

E-MailDie Abkürzung für „Electronic Mail“ (elektro-

nische Post), ein Postdienst, der über einen

Internetanschluss zur Nachrichtenübermitt-

lung dient.

F

FAQDie Abkürzung für „Frequently asked ques-

tions“ (häufig gestellte Fragen). Eine in vielen

Internetpräsenzen und News-Groups weit

verbreitete Online-Dienstleistung, bei der

häufig gestellte Fragen beantwortet werden.

FarbklimaAufeinander abgestimmte, sich ergänzende

Farbtöne, die am häufigsten mit speziellen

Wirkungen assoziiert werden.

FarbtiefeEine in der Einheit Bit angegebene Wiederga-

befeinheit von Farbtönen: Mit einer Farbtiefe

von 1 Bit kann zwischen nur zwei Zuständen

unterschieden werden, i. d. R. schwarz und

weiß. D. h., dass jedes Pixel wird entweder

schwarz oder weiß wiedergegeben. Bei einer

Farbtiefe von 8 Bit können schon 256 ver-

schiedene Farben dargestellt werden (zum

Beispiel bei YGIF-Dateien). Stehen für jeden

Farbkanal (Rot, Grün und Blau) jeweils 8 Bit

zur Verfügung, beträgt die Farbtiefe 24 Bit

oder 16,7 Millionen Farben (zum Beispiel bei

Y JPG-Dateien oder Y PNG-Dateien).

Focus-LinkEngl. für „anvisierter Verweis“. Visuelle Aus-

zeichnung eines Text-Hyperlinks (YHyperlink)

während des Fokus auf denselben durch Ta-

staturbedienung, üblicherweise bei Naviga-

tion mit der Tabulator-Taste. Beispielweise

kann die Farbe oder Unterstreichung eines

Link während des Fokus wechseln. Diese Aus-

zeichnung signalisiert dem Nutzer, dass eine

Interaktion möglich ist. Die Formatierung

entspricht idealerweise der des YHover-

Links.

FrameEin von Netscape entwickelter Standard für

ein Bildschirmelement, der eine Website in

fest definierte, voneinander unabhängige

Bereiche aufteilt. Diese können auch dann

sichtbar bleiben, wenn andere Seiten derselben

Internetpräsenz aufgerufen werden. Frames

führen häufig zu Problemen beim Anlegen

von Favoriten/Bookmarks, beim Drucken, bei

der Indizierung durch Suchmaschinen und

beim manuellen Empfehlen einer Website.

Von der Verwendung ist daher im Allgemei-

nen abzuraten.

G

GeviertEin nicht druckendes „Leerzeichen“, dessen

Breite der Schriftgröße entspricht. Ein Ge-

viert einer 12-Punkt-Schrift hat somit eine

Breite von 12 Punkt (pt). Das Geviert wird zum

Setzen von schriftgrößenabhängigen Ab-

ständen verwendet.

GIFDie Abkürzung für „Graphics Interchange For-

mat“, ein stark komprimierendes Dateiformat

für Bilder und Grafiken. Das GIF-Format ist un-

abhängig vom Betriebssystem.

Guided TourEine vorbereitete, „geführte“ Tour, die den

Benutzer durch fest definierte Bereiche

führt, zum Beispiel als Einführung in eine

neue Software.

GrafikelementZusammenfassende Bezeichnung von Fotos,

Grafiken oder Text, die als Grafikformate

(YGIF, Y JPG etc.) in Online-Medien einge-

setzt werden.

GrundrasterEin Gliederungs- und Anordnungssystem für

Text- und Bildelemente in einem Y Layout. Es

dient der stilistischen Stärkung und Verein-

heitlichung des Designs und seiner schnellen

und wirtschaftlichen Herstellung. Besonders

detaillierte Elemente können mit einem fei-

neren Y Ausrichtungsraster exakt positioniert

werden.

H

HauptnavigationDie oberste Navigationsebene einer Internet-

präsenz.

HexadezimalwertEine Zahl, die einen Skalen-Farbton für die

Darstellung von Y RGB-Farben an Bildschir-

men definiert.

HomepageStart- oder Begrüßungsseite eines Internet-

angebots, von der aus auf weitere Untersei-

ten zugegriffen werden kann.

Hover-LinkEngl. für „schwebender Verweis“. Visuelle

Auszeichnung eines Text-Hyperlinks

(YHyperlink) während des YMouse-over.

Beispielweise kann die Farbe oder Unterstrei-

chung eines Links wechseln. Diese Auszeich-

nung signalisiert dem Nutzer zusätzlich zur

üblichen Verwandlung des Mauszeigers zur

Hand, das eine Interaktion möglich ist.

HTMLDie Abkürzung für „Hypertext Markup Lan-

guage“ (YHypertext), der Kennzeichnungs-

sprache zum Erstellen von Webseiten. Wurde

von Tim Berners-Lee entwickelt und mit dem

Boom des Internets innerhalb weniger Jahre

zur Sprache des Web. Standard des W3C, RFC

1866, RFC 2854, W3C HTML 4.0, W3C XHTML

1.0. Siehe auch „Technische Standards“ im Ka-

pitel „Zusatzinformationen“.

HTTPDie Abkürzung für „Hypertext Transfer Proto-

col“, das Übertragungsprotokoll für HTML-

Dokumente im World Wide Web.

HyperlinkAuch „Link“: Technologie, mit der auf Elemente

in anderen Webseiten verwiesen werden

kann. Durch Hyperlinks können verschiedene

HTML-Dokumente verbunden werden, so

dass der Nutzer einem Interessenstrang über

verschiedene Dokumente und Server hinweg

folgen kann (Y Active Link, Y Focus Link,

YHover Link, Y Visited und Unvisited Links).

HypertextKurzform für „Hypertext Markup Language“.

Kennzeichnungssprache zum Erstellen von

Webseiten. Wurde von Tim Berners-Lee ent-

wickelt und mit dem Boom des Internets

innerhalb weniger Jahre zur Sprache des Web.

Standard des W3C, RFC 1866, RFC 2854, W3C

HTML 4.0, W3C XHTML 1.0.

I

IconEin Symbol eines Betriebssystems oder Pro-

gramms, das nach einem Mausklick ein An-

wendungsprogramm aufruft oder eine Funk-

tion aktiviert.

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

64 G l o s s a r

sandt; die Koordinaten des Mauszeigers veran-

lassen den Server, die entsprechenden Aktionen

im Browser auszuführen. Bei clientseitigen Ima-

ge Maps sendet der Server außer der sensitiven

Grafik noch Aktionsanweisungen und evtl. Dar-

stellungselemente zu den einzelnen Koordina-

tenbereichen der Grafikdatei mit.

InchIn angelsächsischen Ländern gebräuchliches

Längenmaß, das u. a. als Bemaßungsgrundla-

ge für Computer verwendet wird, zum Bei-

spiel Ausgangsmaß für die Auflösungsfein-

heit von Monitoren und Druckern, für die

Darstellung von Schriften (72 Point = 1 Inch);

1 inch = 25,4 mm.

InteraktivDie Möglichkeit, als Anwender in den vorge-

gebenen Programmablauf eines Computers

einzugreifen und ihn zu steuern.

Interaktives VerhaltenAktionen (wie Roll-over, Button-down oder

Pull-down), die durch das „Berühren“

und/oder „Anklicken“ von Bildschirmelemen-

ten durch den Nutzer ausgelöst werden.

InterfaceDie Schnittstelle zwischen zwei Teilen eines

Computersystems. Sie dient der Steuerung

des Informationsaustausches und dem Aus-

gleichen bauartbedingter Unterschiede.

InternetWeltweites Computer-Netzwerk, das ur-

sprünglich als ARPA Net zu militärischen

Zwecken aufgebaut wurde, aber über die in-

tensive Weiterentwicklung und Nutzung

durch Universitäten schnell an Beliebtheit

gewonnen hat. Mit der Entwicklung und Ein-

führung des World Wide Web wurde das

Internet in rasantem Tempo zu einer univer-

sellen, internationalen Plattform zur Informa-

tion und Kommunikation.

InternetadresseDie aufgrund ihrer Y URL eindeutige Identifi-

zierung eines Internetangebotes.

Internet ExplorerEin von der Firma Microsoft entwickelter

Y Browser für die Navigation und Darstellung

von Inhalten im Internet.

IntranetEin institutions- oder firmeninternes Daten-

netz, das auf den Internettechnologien ba-

siert. Ein Intranet kann mit oder ohne Inter-

netverbindung konzipiert sein.

J

JPEG/JPGDie Abkürzung für „Joint Photographic Ex-

perts Group“ (vereinigte Fotoexperten-Grup-

pe), ein Standard für die Kompression von di-

gitalen Bildern. Die Datenreduktion von JPEG

wird dadurch erreicht, dass sehr ähnliche Far-

ben als ein Farbton abgespeichert werden.

Dadurch bleibt der Qualitätsverlust bei Fotos

gering.

K/L

LauffähigkeitDie vom Betriebssystem abhängige Funk-

tionsfähigkeit von Programmen.

LaufweiteDer generelle Abstand aller Buchstaben einer

Schrift. Der Ausgleich von einzelnen Buchsta-

benpaaren wird als Kernen bezeichnet, das

Ändern der Laufweite als Spationieren. Siehe

auch Y Spationierung.

LayoutDer Seitenaufbau eines Dokumentes mit sei-

nen gestalterischen Basiselementen (Farben,

Bildwortmarke, Typografie etc.) und deren

grundsätzlicher Anordnung.

LinkEngl. für „Verknüpfung, Verweis“. Das Kurz-

wort für einen YHyperlink. Man unterschei-

det durch die visuelle Darstellung in Y Active,

YHover-/Focus-, Y Visited- und Unvisited-Links.

LoginDie Anmeldeprozedur auf einem Computer

oder einem Datennetz. Das Login benötigt

meist ein Kennwort zur Nutzungs-Legitima-

tion von Programmen, Datenbanken und On-

line-Angeboten.

LogoDas Kurzwort für ein Firmen- oder YMarken-

zeichen.

Look and FeelDie atmosphärische Wirkung einer Internet-

präsenz. Sie entsteht durch die Homogenität

von Design, Bedienung und Benutzerfüh-

rung, evtl. auch Klangkomponenten. Das

Look and Feel sollte einer stärkeren Wirkung

halber in engem visuellem Zusammenhang

mit dem Corporate Design stehen.

M

MarginalspalteEine Spalte, die Text- und Bildinformationen

enthält, die einen nebenstehenden Inhalt er-

gänzen. Dies kann eine Auflistung weiter-

führender Y Links, die direkte Verbindung zu

Sonderseiten und -themen oder auch die Ab-

bildung von Bannern sein.

MarkenzeichenEin gestaltetes Symbol, das als identitätsre-

flektierendes bzw. -stiftendes Zeichen für In-

stitutionen, Firmen, Marken oder Veranstal-

tungen dient. Es kann aus einer reinen Abbil-

dung (Bildmarke oder Signet), einem Schrift-

zug (Wortmarke oder Logotype) oder einer

Kombination von beidem (Y Bildwortmarke)

bestehen. Das Markenzeichen wird häufig als

Logo bezeichnet.

MaßeinheitenAngaben für die Benennungen von gemesse-

nen Werten, zum Beispiel Längen- oder Flä-

chendimensionen. Im Druck werden Raster-

feinheiten, Schriftgrößen und Zeilenabstän-

de in Millimetern (mm) oder Punkt/Point (pt)

angegeben. Für den Bildschirm stehen die

folgenden numerischen Angaben als Maß-

einheiten zur Verfügung: mm (Millimeter),

in (Inch), pt (Punkt/Point), px (Pixel), em (Em),

ex (Ex), % (Prozent). Dabei sind absolute Anga-

ben (zum Beispiel Millimeter) und relative

Angaben (zum Beispiel Prozent gegenüber

„normal“) möglich. Um Schriften durch den

Nutzer skalierbar darzustellen, werden % und

em für die Schriftformatierung verwendet.

Um das Layout an die Schriftgröße zu kop-

peln, wird für die meisten Breitenangaben

und Abstände em verwendet. Prozentuale

Breitenangaben oder Bereiche ohne Angabe

einer Breite sind von der Breite des Y Brow-

serfensters (außerdem: Y Viewport) bzw. des

Elternelements, abhängig.

Meta-TagsFür die Erkennung durch Suchmaschinen not-

wendige, aber nicht dargestellte Informatio-

nen über eine YHTML-Seite.

Mouse-downDas Auslösen einer Funktion durch das Drük-

ken einer Maustaste auf einen fest definierten

Bereich.

Mouse-overDas Auslösen einer Funktion durch das Eintre-

ten des Cursors (Mauszeigers) in einen fest

definierten Bereich.

Mouse-outDas Auslösen einer Funktion durch das Verlas-

sen des Cursors (Mauszeigers) aus einem fest

definierten Bereich.

MPEGDie Abkürzung für „Moving Picture Experts

Group“ ist einerseits die Bezeichnung für ein

Standardisierungskomitee, steht anderer-

seits als Sammelbegriff für eine Reihe von

Standards zur Kodierung und Komprimie-

rung audiovisueller Daten.

MusterdateiEine mustergültige Satzdatei, die als Basis

zur Erstellung von Entwürfen und Druckvorla-

gen dient. Sie enthält neben den Standanga-

ben in Form eines Layoutrasters alle typogra-

fischen und farblichen Definitionen in Form

von Stilvorlagen.

N

NavigationDie Bedienung und Benutzerführung einer

Internetpräsenz. Da die Benutzer mit der je-

weiligen Website nicht vertraut sind, führt

eine gute Navigation direkt und einfach zu

den angebotenen Inhalten. Dabei kann die

Navigation sowohl permanent sichtbare Ele-

mente (Home-Button, Hauptnavigation, Ser-

vicebereiche) als auch variable, dem verän-

dernden Inhalt angepasste Elemente auf-

weisen.

NavigationsbereichDer Bereich auf dem Screen innerhalb des

Y Browserfensters, der die Navigation bein-

haltet.

NavigationsebenenDie hierarchischen Ebenen einer Inhalts- bzw.

Navigationsstruktur einer Internetpräsenz.

Netscape NavigatorEin von der Firma Netscape entwickelter

Y Browser für die Navigation und Darstellung

von Inhalten im Internet.

NutzungsrechtDie von einem Urheber genehmigte Nutzung

eines Werks. Die vom Nutzer (in der Regel

dem Auftraggeber) zu zahlende Vergütung

ist vom Grad der Nutzung abhängig: Die Nut-

zung (in der Regel eine Veröffentlichung)

kann pauschal und ausschließlich eingeräumt

werden oder auf ein Medium, einen bestimm-

ten Zweck oder Zeitraum beschränkt sein.

NeuauftrittDie Gestaltung einer neuen Internetpräsenz.

NewsletterEin Mitteilungsblatt einer Institution oder ei-

nes Unternehmens, das über aktuelle Ent-

wicklungen und Produkte informiert. Der

elektronische Newsletter wird häufig als In-

strument des Web-Marketings per Y E-Mail

an die Empfänger versandt.

O

OfflineDie unterbrochene oder nicht existente Ver-

bindung zu einem Netzwerk oder einem an-

deren Computer.

OnlineDie bestehende Verbindung zu einem Netz-

werk oder einem anderen Computer.

Online-MedienZusammenfassender Begriff für Anwendun-

gen auf der Basis von Internettechnologien

(Internet, Intranet).

P/Q

PDA Die Abkürzung für „Personal Digital Assi-

stant“, der digitale, mobile Endgeräte im

„Westentaschenformat“ beschreibt. Neben

elektronischen Organizern gibt es mittler-

weile eine Vielzahl von Kombinationen digi-

taler Geräte, wie Handys mit erweiterten

Multimedia-Funktionen oder „Pocket PCs“,

die unter die Kategorie PDA fallen.

PDFDie Abkürzung für „Portable Document For-

mat“ , ein Dateiformat, das alle Eigenschaf-

ten eines gedruckten Dokumentes in elektro-

nischer Form beinhaltet. Zur Anzeige von

PDFs wird das Programm „Acrobat Reader“

benötigt, das für eine große Anzahl unter-

schiedlicher Betriebssysteme zur Verfügung

steht.

Pixel (px)Das Kurzwort von „Picture Element“. Ein Pixel,

häufig auch Bildpunkt genannt, ist das klein-

ste grafische Element bei der Darstellung von

Bitmap-Grafiken, zum Beispiel auf Monitoren

oder im Druck von Grafiken und Fotos.

Pixelorientierte GrafikEine aus Y Pixeln zusammengesetzte Grafik,

bei der im Gegensatz zu Y Vektorgrafiken alle

Bildpunkte nach einem festen Raster ange-

ordnet sind.

Plug-inEin Plug-in ist ein Software-Baustein, der in

bereits installierte Programme integriert

wird, um deren Funktionalität zu erweitern.

PNGDie Abkürzung für „Portable Network Gra-

phics“, ein lizenzfreies Grafikformat. Es unter-

stützt die Darstellung von 16 Mio. Farben, die

verlustfreie Kompression und eine inkremen-

telle Anzeige der Grafik (erst Grobstruktur, bis

Datei ganz übertragen ist). PNG ermöglicht

außerdem das Erkennen beschädigter Dateien.

PrimärfarbenIm YCorporate Design der Bundesregierung

werden als Primärfarben die aus der Staatsfah-

ne der Bundesrepublik Deutschland abgeleite-

ten Farben Schwarz, Rot und Gelb verstanden.

PrintmedienAlle gedruckten Medien, unabhängig vom

angewendeten Druckverfahren.

Point oder Punkt (pt)Das standardisierte typografische Maß für

Schriftgrößen und Zeilenabstände. 1 Point =

1/72 Inch = 0,353 mm.

Pull-downEine Variante der Präsentation von Naviga-

tionsmenüs, bei der eine Palette mit Menü-

punkten nach unten aus einem Navigations-

element im Identitätsbereich herausge-

klappt werden kann.

66 G l o s s a r

R

Rastereinheit (RE)Ein Element, Höhe x Breite, aus dem sich ein

Raster aufbaut.

Readme-DateiEine Textdatei mit wichtigen Informationen

über das Programm, seine Installation und

die Nutzungsrechte. Die Readme-Datei sollte

unbedingt vor dem ersten Programmstart

gelesen werden.

RecommendationsVon den Gremien des W3-Konsortiums veröf-

fentlichte technische Beschreibungen einzel-

ner Web-Technologien wie YHTML, Y CSS

oder XML. Diese Empfehlungen (Recommen-

dations) haben im Internet in Bezug auf ihre

Verbindlichkeit die höchste Priorität. Siehe

auch „Technische Standards“ im Kapitel „Zu-

satzinformationen“.

RGBDie Abkürzung für die Grundfarben Rot,

Grün, Blau zur Farbdarstellung auf Monito-

ren. Aus diesen Farben lassen sich alle weite-

ren, am Bildschirm sichtbaren Farben mi-

schen. Siehe auch Y Additives Farbsystem.

Röhrenmonitor Bildschirme, bei denen eine aus Subpixeln in

den drei Grundfarben Rot, Grün und Blau be-

stehende Phosphorschicht durch drei

Elektronenstrahlen zum Leuchten angeregt

wird. Um einen Bildpunkt (Y Pixel) einer be-

stimmten Farbe zu erzeugen, werden die

drei Strahlen auf benachbarte Subpixel ge-

lenkt, wobei die Farbmischung durch die In-

tensität der Strahlen bestimmt wird.

S

SäulenelementDas in den Farben der Staatsfahne oder in

Graustufen umgesetzte Bildelement der

Y Bildwortmarke der Bundesregierung.

SchriftartDie Summe der Gemeinsamkeiten einer

Schrift. Je nach Gruppierungsschema wird ei-

ne Schriftart nach Schriftgattung/-klassifika-

tion (Grotesk/serifenlos oder Antiqua/mit Se-

rifen), nach Schriftfamilie (Times New Roman

oder Verdana) oder nach Schriftauszeich-

nung (kursiv oder Kapitälchen) unterschie-

den. Um die Ladezeiten des Browsers zu ver-

kürzen, werden Internetseiten häufig mit Sy-

stemschriften gestaltet. Da nicht sicherge-

stellt ist, dass alle Systemschriften auf dem

Rechner des Nutzers installiert sind, müssen

alternative Schriften bei der Programmie-

rung einer Internetpräsenz berücksichtigt

werden. Sollen Texte in einer Groteskschrift,

zum Beispiel der Verdana, angezeigt werden,

so sollte der Wert der FONT-FAMILY-Anwei-

sung des Y CSS mehrere nachfolgende

Schriftarten berücksichtigen. Im Y Corporate

Design der Bundesregierung sind dies: Verda-

na, Helvetica, Arial, Tahoma, Sans Serif (neu-

trale Angabe für serifenlose Schriftarten). Ist

keine der definierten Schriftarten verfügbar,

wird die jeweils eingestellte Standard-

Schriftart in den Browservoreinstellungen

(Y Browser) angezeigt. Der Nutzer kann

durch eigene Einstellungen die dargestellte

Schriftart und -größe verändern.

SchriftgrößeDie in Point/Punkt (1 Point (pt) = 0,353 mm)

gemessene Darstellungsgröße einer Schrift.

Bei den Internetpräsenzen und Online-

Anwendungen der Bundesregierung sind

die Schriftgrößenangaben von Point und

Pixel identisch: 1 Point/pt = 1 Pixel/px.

SchriftlizenzDas durch einen Kauf erworbene Nutzungs-

recht an einer Schrift.

SchutzzoneEin definierter Freiraum um ein Markenzei-

chen, in dem weder Text noch weitere grafi-

sche Elemente (zum Beispiel Bilder oder

Fremdlogos) platziert werden dürfen. Die

Schutzzone ermöglicht damit die repräsen-

tative Wirkung eines Zeichens. Die Y Bild-

wortmarke der Bundesregierung ist von einer

Schutzzone umgeben, die in diesem Y Style-

guide näher festgelegt wird.

ScreenDer sichtbare, die Inhalte darstellende Be-

reich eines Monitors. Die Größe eines Screens

wird nach seiner in Inch gemessenen Bild-

schirmdiagonalen benannt (Y Bildschirmauf-

lösung).

ScrollbarEngl. für „Bildlaufleiste“. Bedienelement der

Benutzeroberfläche eines Computerpro-

gramms, das den sichtbaren Bereich eines

Fensters verschiebt. Besteht aus zwei Pfeilen

und einer so genannten Rollbox. Horizontale

und vertikale Bildlaufleisten werden nach Be-

darf eingeblendet, wenn die darzustellende

Seite die Größe des Y Viewports übersteigt.

Screen-AufteilungDie Raumaufteilung einer Website, zum Bei-

spiel in Bereiche.

SekundärfarbenIm Corporate Design der Bundesregierung

wird unter den Sekundärfarben ein Farbklima

verstanden, das die Y Primärfarben ergänzt.

Die Sekundärfarben bestehen aus einem

Hauptfarbton in unterschiedlichen Sättigun-

gen und Abstufungen.

ServerEin Computer, der Clients in einem Netzwerk

Daten zur Verfügung stellt. Im Internet wer-

den bestimmte Dienste durch spezielle Inter-

net-Server angeboten, zum Beispiel Web-Ser-

ver, Mail-Server (POP3-Server/SMTP-Server)

oder News-Server (NNTP-Server).

SidebarEngl. für „Seitenleiste“. In den meisten

Y Browsern verfügbare, optional neben dem

Y Viewport einblendbare Seitenleiste, in der

z. B. Favoriten, Verlauf, Downloads des Nut-

zers oder auch YHTML-Dokumente angezeigt

werden.

SiteDas Kurzwort für die Website, der Gesamt-

heit der Internetseiten eines Anbieters.

SitemapDer Aufbau und die Seitenstruktur einer

Internetpräsenz. Auf vielen Websites wird die

Sitemap durch einen eigenen Menüpunkt

dargestellt.

SpalteEin vertikal angeordneter Bereich zur Auf-

nahme von Texten oder Bildern. Im Content-

bereich der Internetpräsenzen und Online-

Anwendungen der Bundesregierung sind

unterschiedliche Spaltenanordnungen/Spal-

tenraster vorgesehen.

SpaltenbreiteBreite einer Text- oder Bildspalte.

Spationieren/SpationierungDas Erweitern der Y Laufweite einer Schrift.

SprungmarkenLinks, die die Navigation innerhalb einer

Website ermöglichen, zum Beispiel die Rück-

kehr von einem Textende zum Seitenanfang.

StilvorlagenIn einer Y Musterdatei gespeicherte Angaben

der benutzten Schriftschnitte und -größen

sowie zu definierten Farben. Bei der Gestal-

tung von Websites können Y CSS (Cascading

Style Sheets) als Stilvorlagen verwendet wer-

den.

StyleguideAuch: Corporate-Design-Manual. Ein Werk,

das alle Angaben zum Y Corporate Design

und dessen Umsetzung in allen relevanten

Printmedien und elektronischen Medien ver-

mittelt.

SubnavigationDie hierarchisch tieferen Ebenen der Naviga-

tion.

SuchmaschineAuch: Search-Engine. Ein Programm, das

nach Eingabe von Suchbegriffen oder -kateg-

orien das Internet nach relevanten Texten

und Bildern durchsucht.

SymbolleisteEine Leiste mit Symbolen (Y Icons), die nach

einem Mausklick fest definierte Funktionen in

einem Programm oder Betriebssystem aus-

führen. Einige Programme, zum Beispiel

Y Browser, verfügen über mehrere Symbol-

leisten, die nach Bedarf aktiviert oder ver-

deckt werden können.

SystemschriftEine im Betriebssystem installierte und von

ihm zur Darstellung benötigte Schrift, zum

Beispiel Times, Arial, Verdana (Windows) oder

Geneva, Chicago oder Monaco (Apple Macin-

tosh).

T

TagFormatierungsanweisungen in einem

YHTML-Dokument.

TemplateDas englische Wort für eine YMusterdatei.

TextversionEine Umsetzung einer gesonderten Textver-

sion wird durch den Einsatz von Y CSS und

unter Berücksichtigung der Anforderungen

der Y BITV in der Regel unnötig.

TFTDie Abkürzung für „Thin Film Transistor“, ei-

ner Technik zum Ansteuern von LCDs. Dazu

wird auf einer Glasscheibe des Displays für je-

den Pixel ein eigener, einzeln ansteuerbarer

Transistor aufgebracht. Die Technik erlaubt

eine hohe kontrastreiche Darstellung und ei-

ne geringere Trägheit der Anzeige.

TypografieDie Lehre von der funktionalen und ästheti-

schen Gestaltung von Schriften und ihrer An-

wendung in Printmedien und elektronischen

Medien. Im Y Corporate Design dient die

Wahl und einheitliche Anwendung eines spe-

zifischen Schrifttyps (der Hausschrift) der

Verbindung aller visuellen Auftritte. Daher

sollten auch die Internetauftritte der Bundes-

regierung in der Typografie einander ange-

glichen werden.

U

URLDie Abkürzung für „Uniform Resource Loca-

tor“. Eine URL bezeichnet die Adresse einer

Ressource im Internet eindeutig. Dabei ist es

gleichgültig, ob es sich um ein Bild, eine Home-

page, ein Video oder einen Sound handelt.

Um eine Ressource anzeigen zu lassen, wird

die URL in das Adressfeld des Y Browsers ein-

getragen. Die Adresse setzt sich aus mehre-

ren standardisierten Bestandteilen zusam-

men: Protokoll, Server-Name, Länderkürzel,

Verzeichnis und Dateiname. Die Reihenfolge

der Bestandteile ist verbindlich festgelegt.

V

Vektorgrafik Aus Pfaden, ihren Positionen, Anordnungen,

Füllungen und Farben erstellte Grafiken. Vek-

torgrafiken haben geringere Dateigrößen als

pixelorientierte Grafikformate und lassen

sich in ihren Größen verändern. Aufgrund des

geringen Speichervolumens werden Vektor-

grafiken auch im Internet, zum Beispiel für

Flash-Animationen, angewandt.

VersalienDie Großbuchstaben einer Schrift.

ViewportEngl. für „Darstellungsfeld“. Bereich eines

Y Browserfensters, in dem die aktuelle Seite

dargestellt wird. Die Größe des Viewports ist

von der Fenstergröße des Browsers, even-

tuell eingeblendeten Y Scrollbars und Y Side-

bars und Navigationsleisten des Browsers ab-

hängig. Durch Nutzung der Scrollbars kön-

nen beschnittene Bereiche in den Viewport

geschoben werden.

Visited und Unvisited LinksEngl. für „besuchte und unbesuchte Ver-

weise“. YHTML-Auszeichnung von Textlinks,

durch die bereits „besuchte“ Links eine ande-

re Farbe erhalten als „unbesuchte“ (YHyper-

link).

VisitsVisits ist das englische Wort für Besuche. Ein

Visit bezeichnet den Besuch auf einer Inter-

netseite. Im Unterschied zur „Page Impres-

sion“ wird hier nur der Besuch auf der Web-

seite gezählt und nicht das Anwählen der ein-

zelnen Seiten. Die Anzahl der Visits spielt ei-

ne große Rolle bei der kommerziellen Ver-

marktung von Online-Auftritten.

W/X/Y/Z

W3C oder W3-Konsortium –

World-Wide-Web-ConsortiumDas 1994 gegründete, internationale und un-

abhängige Industriekonsortium ist mit der

Weiterentwicklung von Standards und Nor-

mie-rungen im World Wide Web befasst. Vom

W3-Konsortium herausgegebene Recom-

mendations (Empfehlungen) sind Dokumen-

te mit der höchsten im Web gültigen Ver-

bindlichkeit, zum Beispiel Beschreibungen

einzelner Web-Technologien wie YHTML,

Y CSS oder XML. Die Empfehlungen haben

die Aufgabe, die jeweilige Technologie voll-

ständig und unmissverständlich darzustellen.

Die Zielgruppen dieser Beschreibungen sind

Web-Autoren und Software-Produzenten,

die gehalten sind, Standards so genau und

vollständig wie möglich in ihre Produkte zu

implementieren. Die Entwicklung einer Tech-

nologie ist mit der Veröffentlichung der Emp-

fehlungen noch nicht abgeschlossen, denn

es handelt sich um festgeschriebene Ent-

wicklungsstadien, um Entwicklern Fixpunkte

zu geben, an denen sie sich orientieren kön-

nen. Die Empfehlungen erhalten deshalb,

ähnlich den Software-Produkten, Versions-

nummern, zum Beispiel HTML 4.01, CSS 2.0

oder XML 1.0. Sämtliche Empfehlungen des

W3-Konsortiums sind über die Web-Adresse

http://www.w3.org/TR/ erreichbar (das „TR“

steht für Technical Report). Sämtliche Doku-

mente werden in englischer Sprache veröf-

fentlicht; die englischsprachige ist die nor-

mative Version. Viele der Dokumente sind in

68 G l o s s a r

andere Sprachen übersetzt worden. Überset-

zungen sind über die Adresse

http://www.w3.org/Consortium/Translation/

erreichbar.

Web-DesignDer Entwurf und die Erstellung von Internet-

seiten.

WortmarkeDas auf einem reinen Schriftzug basierende

Zeichen für eine Institution oder ein Unter-

nehmen.

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

ZeichensatzDie Gesamtheit der Buchstaben, Ziffern,

Interpunktions- und Sonderzeichen einer

Schrift.

ZeilenabstandDer von Schriftlinie zu Schriftlinie gemessene

Abstand zwischen zwei Textzeilen.

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: [email protected]

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: [email protected]

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.

Impressum

70 I m p r e s s u m