DGB Online-Styleguide
Elektronische Gestaltungsrichtlinien
Impressum
Herausgeber
Deutscher Gewerkschaftsbund
Abteilung Kommunikation und Öffentlichkeitsarbeit Henriette-Herz-Platz 2
10178 Berlin
erarbeitet von: form4 GmbH & Co.KG Stand: Dezember 2010
Version: 1.0
Konzeption und Redaktion Manuela Marquardt, form4 Sigrid Wolff
Jan Piegsa Ralf Steinle
Inhalt ... 3
1. Einleitung ... 7
1.1. Der DGB Online-Styleguide ... 7
1.2. Das Redaktionsystem union.cms ... 8
1.3. Moods Gestaltungsanmutungen ... 8
1.3.1. Startseite ... 9
1.3.2. Themenbereich... 10
1.3.3. Artikel ... 11
1.3.4. Dossier ... 12
1.3.5. Termin ... 13
2. Grundelemente ... 15
2.1. Logo / Bildmarke ... 15
2.2. Typo ... 15
2.3. Farben ... 16
2.3.1. Allgemein ... 16
2.3.2. Texte ... 16
2.3.3. Überschriften ... 17
2.3.4. Links ... 18
2.3.5. Farbwelten ... 19
2.4. Icons ... 20
3. Allgemeine Gestaltungsrichtlinien ... 23
3.1. Layoutfestlegungen ... 23
Inhalt
3.3.1. Kennzeichnung der Regionen und Bezirke ... 26
3.4. Navigationen ... 27
3.4.1. Hauptnavigation ... 27
3.4.2. Navigation Ebene 2 ... 28
3.4.3. Navigationsbereich im Inhalt (vertikale Navigation) ... 28
3.4.4. Pfadnavigation ... 29
3.4.5. Themennavigation ... 29
3.5. Layouts & Grids ... 30
3.5.1. Layout mit Aktionsspalte... 30
3.5.2. Layout mit Navigation... 31
3.5.3. Dreispaltiger Inhaltsbereich ... 32
3.5.4. Zweispaltiger Inhaltsbereich ... 33
3.6. Bilder ... 34
3.6.1. Bühnenbilder ... 34
3.6.2. Teaserbilder im Inhaltsbereich ... 35
3.6.3. Bilder im Inhaltsbereich ... 36
3.6.4. Bilder sowie Teaserbilder in der Aktionsspalte ... 37
3.6.5. Bilder Kombiboxen ... 37
3.7. Typo ... 37
3.7.1. Zitate ... 37
3.8. Boxen ... 38
3.8.1. Bühne (auf der Startseite) ... 38
3.8.2. Kombibox (im Inhalt) ... 38
3.8.3. Hervorgehobene Boxen in der Aktionsspalte... 39
3.8.4. Newsticker-Box ... 39
3.9. Darstellungsbeispiele ... 40
3.9.1. Tabellen ... 40
3.9.2. Formulare ... 40
3.9.3. Suche ... 42
3.9.4. Sitemap ... 42
4. Technische Standards ... 43
5. Barrierefreier Zugang ... 45
5.1. Alternative Inhalte für Audio- und visuelle Präsentationen (Anforderung 1) ... 45
5.2. Farben und Kontraste (Anforderung 2) ... 45
5.3. Trennung von Inhalt und Layout (Anforderung 3) ... 45
5.4. Texte und Sprache (Anforderung 4) ... 46
5.5. Tabellen (Anforderung 5) ... 46
5.6. Browserkompatibilität (Anforderung 6) ... 46
5.7. Zeitgesteuerte Inhalte (Anforderung 7) ... 47
5.8. Kompatibilität zu Hilfsmitteln / Unterstützende Technologien (Anforderung 10) ... 47
5.8.1. Popups (Anforderung 10.1) ... 47
5.8.2. Formulare (Anforderung 10.2) ... 47
Dieser Online-Styleguide beinhaltet die für den Webauftritt des DGB geltenden Gestaltungsrichtlinien. Ziel ist, das Portal in einer einheitlichen und benutzerfreundlichen Gestaltung weiter zu entwickeln.
1.1. Der DGB Online-Styleguide
Der DGB-Internet-Auftritt ist mehr als nur eine Webseite. Er spiegelt in seiner Gesamtheit die Struktur und Vielfalt aber auch das Verbindende des Deutschen Gewerkschaftsbundes wieder. Etliche
Redakteure/innen arbeiten täglich an den verschiedenen Bezirks-, Regionen- und Themenseiten, die in den DGB-Auftritt integriert sind.
Bis Ende 2012 sollen alle DGB-Gliederungen auf das neue DGB-Redaktionssystem umsteigen und damit auch die gemeinsame Gestaltungsrichtlinie umsetzen. Eine besondere Herausforderung ist die
Strukturreform des DGB, die der Bundeskongress 2010 beschlossen hat. Diese wird auch Auswirkungen auf die Systematik des Webauftrittes haben: Neben der Bundes- und Bezirksebene kommen nun die Kreis- und Stadtverbände als dritte Satzungsebene hinzu, die Regionen erhalten eine neue Rolle.
Mit dem DGB-Online-Styleguide liegt Ihnen der Design-Rahmen für alle Webseiten des Deutschen Gewerkschaftsbundes vor. Er wurde mit dem Internetrelaunch 2010 entwickelt und beschreibt die verschiedenen Gestaltungselemente des Redaktionssystems der DGB-Auftritte, mit dem Ziel, eine Wiedererkennbarkeit und leichte Handhabung für den User zu bieten.
Der eGuide ist ein verbindlicher Gestaltungsrahmen. Er bietet jedoch Spielräume: Alle DGB-Internet- Auftritte können individuell gestaltet werden (Lokalkolorit), zugleich sollen sie aber als Einheit „dgb.de“
erkannt werden. Deshalb gilt der Online-Styleguide für alle Redakteure/innen, Designer/innen und Konzeptioner/innen von DGB-Webseiten. Nur in Ausnahmefällen und nach Absprache mit der Abteilung Öffentlichkeitsarbeit (BVV Internet-Redaktion) sind Abweichungen möglich. Dies gilt auch für
Weiterentwicklungen.
Durch die Modularität des Systems und die individuellen Gestaltungsmöglichkeiten sind für die neuen Gliederungen praktikable und unverwechselbare Lösungen gefunden worden. Gleichzeitig ist möglich, Seiten einzurichten, die automatisch mit Inhalten anderer DGB-Seiten, z.B. der Bundesvorstandsseite oder
1. Einleitung
1.2. Das Redaktionsystem union.cms
Zurückgehend auf den Beschluss des GBV vom Juli 2008 wurde für die Realisierung des neuen DGB- Webauftritts das freie gewerkschaftliche Contentmanagementsystem (Redaktionssystem) union.cms verwendet. Im März 2010 wurde die Bundesvorstandsseite dgb.de auf Grundlage dieser Software gelauncht. Alle in den DGB-Auftritt integrierten Internetseiten, also auch Aktions- und Projektseiten, sind mit union.cms als Plattform in dem gemeinsamen Grundlayout umzusetzen. Viele im Online-Styleguide enthaltene Vorgaben werden durch das Redaktionssystem und Basisdesign automatisch umgesetzt.
Wir wünschen Euch viel Freude mit dem neuen leistungsfähigen Redaktionssystem.
1.3. Moods Gestaltungsanmutungen
Im Folgenden werden Beispiele für verschiedene Musterseiten vorgestellt.
1.3.1. Startseite
1.3.2. Themenbereich
1.3.3. Artikel
1.3.4. Dossier
1.3.5. Termin
2.1. Logo / Bildmarke
Die Bildmarke des DGB besteht aus dem Eigennamen, der im unteren Bereich eines roten
Parallelogramms gesetzt ist. Das Verhältnis von Schrift zu Form sowie die Positionierung des Textes auf der Figur dürfen nicht verändert werden.
Die Bildmarke besitzt keinen speziellen Schutzbereich und darf auch auf Grafiken und Farbflächen gestellt werden. Die Bildmarke darf nicht verzerrt, verformt, eingefärbt oder invertiert werden.
2.2. Typo
Die Hausschrift des DGB ist als Sonderschrift nur bedingt in den Online-Medien verwendbar. Eingesetzt wird sie für die Überschriften in der Bühne, wofür eine entsprechende Grafik generiert wird bzw. zu erstellen ist.
Für alle weiteren Texte wie Überschriften, Links und Fließtexte ist die Systemschrift Arial zu verwenden.
Hierbei kann auf die Auszeichnungen regular, fett und kursiv zurückgegriffen werden.
2. Grundelemente
Im Einzelfall kann es vorkommen, dass Benutzer die Schriftart Arial nicht auf ihrem Computer installiert haben. Als Alternativschrift wird die im System des Benutzers definierte serifenlose Schrift (“sans-serif”) genutzt. Die Schriftgrößen werden in Pixel-Werten definiert.
2.3. Farben
Auf der gesamten Website sind nur Farben aus einem speziellen Spektrum zu verwenden. Davon abweichende Farben sind nicht zu verwenden.
2.3.1. Allgemein
Die Farben der Website bestehen grundlegend aus den folgenden Farben:
Schwarz: #000000 Weiß: #ffffff Rot: #ed1c24 Blaugrau: #d9e4e4 Grau: #333333
Farbangaben werden im Folgenden mit z.B. Rot, Grau usw. genannt und bezeichnen die hier definierten Farbwerte. Sollten sie von diesen abweichen, werden die Farbwerte separat aufgeführt.
2.3.2. Texte
Für Texte ist im Allgemeinen ein Grau zu verwenden:
Text: #333333
Abweichend von den oben definierten Website-Farben werden für folgende Zwecke Abstufungen von Grau verwendet:
Bildunterschriften in Teaser, Datum in Teasern: #999999 Bildunterschriften auf Detailseiten: #666666
Kategoriekennzeichnung: #656565 Kategorie: #000000
2.3.3. Überschriften H1:
ist nur für den Namen der Bezirksbezeichnungen sichtbar, da in allen anderen Fällen durch CSS ausgeblendet
H2:
Detailseiten: Bild gerendert aus der DGB Schriftart, 40px, bold, #000000 H3:
Detailseiten: #ED1C24, 30px, bold, Zeilenabstand 33px, Abstand nach unten 10px Teaser: #000000, 12px, bold, Zeilenabstand 17px
H4:
Detailseiten: #000000, 18px, bold, Abstand nach unten 4px H5:
Detailseiten: #000000, 16px, bold, Zeilenabstand 17px, Abstand nach unten 3px H6:
Detailseiten: #000000, 14px, bold
2.3.4. Links
Standard-Link (Fließtext): #656565, unterstrichen
Wird zur Auszeichnung von Links innerhalb des Fließtextes verwendet. Er dient beispielsweise für Querverlinkungen auf andere Seiten oder als Verlinkung von E-Mail-Adressen. Der Standard-Link wird bei MouseOver rot eingefärbt.
Ein Wort, welches im Glossar gelistet ist, wird mit einer gestrichelten Linie unterstrichen. Bei MouseOver verändert sich der Cursor in einen Zeiger mit Fragezeichen und das Wort wird rot eingefärbt. Beim Klick auf diesen Link öffnet sich ein kleines Fenster, in dem dieses Wort erklärt wird mit einem Link zu dem vollständigen Glossar.
Wichtig-Link (Fließtext): rot, fett
Wichtige Links bzw. abgesetzte Links können zur besonderen Hervorhebung in rot verwendet werden.
Diese Formatierung ist nicht innerhalb eines Fließtextes einzusetzen. Entsprechend formatierte Links werden unterhalb des Textes positioniert. Die Darstellung des “Wichtig”-Links ist zusätzlich in der grauen Kombibox (siehe Kombibox (im Inhalt)) möglich, um hier im Einzelfall wichtige Links hervorzuheben.
Stage-Links (Fließtext):
Die Darstellung der Stage-Links ist ausschließlich für die Verwendung in der Bühne gedacht, die die Links in roter Schrift auf einer weißen Fläche bzw. einem weißen Kasten abbildet. Die Links erhalten auf diese Weise einen Button-Charakter.
Download-Links: #656565, fett
Download-Links sind fett formatiert und in der Farbe #656565 dargestellt. Dem Link-Text wird das
“Download”-Icon vorangestellt sowie Dateityp und Dateigröße in Klammern angefügt. Bei MouseOver wird sowohl der Text als auch das Icon rot eingefärbt.
Externe Links: #656565, unterstrichen
Die Darstellung der externen Links entspricht dem Standard-Link. Zusätzlich ist dem Linktext das
“Externer Link”-Icon vorangestellt. Bei MouseOver werden sowohl Text als auch Icon rot eingefärbt.
Navigationslinks: #656565
Links in der Inhaltsnavigation im linken Bereich sowie in der Footernavigation sind Grau mit einem Symbol. Die Links der Meta-Navigation im Kopfbereich sind grau ohne ein Symbol. Bei MouseOver wird der Linktext rot eingefärbt.
Teaserlinks:
Der ”Mehr“-Link in Teasern entspricht immer der Darstellung des “Wichtig”-Links aus Fließtexten.
Generell gilt: Bei MouseOver wird der Text eines Links, unabhängig der Art des Links, wie ein interner Link, bzw. externern Link, bzw. Downloadlink etc., rot eingefärbt. Dies ist ebenfalls unabhängig vom eingesetzten Kontext wie Artikel, Dossier oder Pressemitteilung zu beachten.
2.3.5. Farbwelten
Jedem Thema ist eine Farbe zugeordnet. Diese wird bei den Inhalten des Themas fortgeführt, sodass eine Zugehörigkeit sofort zu erkennen ist.
Thema 1 2 3 4 5 6 7 8 Icon-Farbe
Text-MouseOver
# Thema Farbbe-
schreibung
Icon-Farbe MouseOver-Farbe für Text
1 Alle Themen Taubenblau #86adb8 #86adb8
2 Arbeit Orangegelb #f6b401 #F3B32A
3 Bildung Türkis #01b0c2 #57B7C4
2.4. Icons
Für verschiedene Einsatzzwecke werden Symbole bzw. Icons verwendet, um dem Benutzer auf diesem Wege ein schnelleres Verständnis für die damit verbundenen Funktionen zu ermöglichen. Jedes Icon besitzt genau eine Bedeutung und wird dann auch konsequent nur in diesem Sinne eingesetzt.
Nachfolgend sind die verschiedenen Symoble inkl. der MouseOver-Darstellung, sofern vorhanden, aufgeführt.
Funktionen / Globale Icons:
- Favicon:
- Drucken: Normal: MouseOver:
- Seite verschicken: Normal: MouseOver:
Links:
- Download: Normal: MouseOver:
- Extern: Normal: MouseOver:
- Direktverlinkung*: Teaser:
* Unter einer Direktverlinkung ist die Verlinkung auf einen Artikel einer anderen Instanz innerhalb der DGB-Websites zu verstehen. Wenn beispielsweise ein Bezirk einen Artikel der dgb.de-Website anteasert, der den Benutzer zum Artikel auf der dgb.de-Website führt, dann handelt es sich hierbei um eine Direktverlinkung.
Pressemitteilungen:
- Foto: Teaser: Detailseite:
- Video: Teaser: Detailseite:
- Audio: Teaser: Detailseite:
- Text: Teaser: Detailseite:
Teaser:
Detailseite:
Für den Webauftritt des DGB sowie aller Bezirke gelten allgemein gültige Richtlinien, um einen
einheitlichen Gesamteindruck zu gewährleisten und einen Wiedererkennungseffekt bei den Benutzern zu erzielen.
3.1. Layoutfestlegungen
Für die Website wird ein festes, nicht fluides Layout mit einer Breite von 972px verwendet. Die Website wird horizontal zentriert am oberen Rand des Browserfensters angeordnet. Als Abstand zwischen Elementen, z.B. zwischen Inhaltsbereich zur Aktionsspalte oder zwischen Teaserboxen innerhalb der jeweiligen Bereiche, werden immer 8px vorgesehen.
3. Allgemeine Gestaltungsrichtlinien
3.2. Aufteilung in Bereiche
Die Website teilt sich in drei Bereiche auf:
- Header (Kopfbereich) - Content (Inhaltsbereich) - Footer (Fußbereich)
3.2.1. Seitenbereich Header
Im Header befinden sich die (Seiten-)Elemente
(1) Meta-Navigation inkl. Sprach-Auswahl (optional) und Suche (2) Bezirksbezeichnung / Bezirkskennzeichnung (optional) (3) Hauptnavigation (Primärnavigation)
(4) Navigation Ebene 2 (optional) (5) Bühne
(6) Breadcrumb / Pfadnavigation (optional), nicht auf der Homepage
3.2.2. Seitenbereich Content Der Inhaltsbereich unterteilt sich in - Navigationsbereich (optional) - Inhalt
- Aktionsspalte / Randspalte (optional) In Kombination sind zwei Layouts möglich:
- Inhalt mit Aktionsspalte ohne Navigationsbereich: siehe Abschnitt Layout mit Aktionsspalte
3.2.3. Seitenbereich Footer Der Footerbereich unterteilt sich in
(1) Breadcrumb / Pfadnavigation (optional), nicht auf der Homepage (2) Navigation
(3) Fußzeile
3.3. Platzierung der Bildmarke
3.3.1. Bildmarke des DGB
Die Positionierung der Bildmarke ist auf dem Webauftritt der DGB sowie den Bezirksseiten identisch. Es befindet sich im rechten oberen Bereich und schließt mit der eigenen rechten oberen Ecke bündig mit dem Layout ab. Der Abstand vom Browserfenster zur Oberkante der Bildmarke beträgt 70px. Bei den
Bezirksseiten schließt die Bildmarke mit der Unterkante daher bündig mit dem Hauptmenü ab. Auf der DGB-Website steht die untere Hälfte der Bildmarke auf der Bühne.
3.3.1. Kennzeichnung der Regionen und Bezirke
Die Kennzeichnung der Bezirke und Regionen wird zwischen der Meta-Navigation sowie der Hauptnavigation eingefügt. Sie kann als Bildmarke oder mittels reinem Text in der DGB-Sonderschrift erfolgen:
3.4. Navigationen
Alle Navigationspunkte werden in der System-Schriftart Arial oder gegebenenfalls in einer systemabhängigen serifenlosen Schrift dargestellt.
3.4.1. Hauptnavigation
Die Anzahl der Menüpunkte ist variabel. Der erste Menüpunkt führt als „Home“ stets auf die Startseite der Website. Die Breite der Menüpunkte richtet sich dynamisch nach der Länge der Benamung. Aufgrund des vorhandenen Platzes im Layout sind mehr als maximal acht Menüpunkte nicht empfehlenswert.
Die Menüpunkte werden als graue Schrift auf weißem Hintergrund dargestellt. Wobei die abgerundeten Ecken durch Hintergrundgrafiken in der Farbe des Seitenhintergrundes entstehen. Beim MouseOver und wenn der Menüpunkt aktiv ist, wechselt die Farbe der Schrift auf weiß und der Hintergrund wird rot eingefärbt.
Schrift: #6A6A6A Schrift MouseOver: #FFFFFF Hintergrund: #FFFFFF Hintergrund MouseOver: #ED1C24
3.4.2. Spezielle Navigation für Themen
Für die einzelnen Themenbereiche sind Farben definiert, mittels derer zugehörende Artikel entsprechend farblich markiert werden. Der Zugriff auf die Themen ist jederzeit über ein Falldown-Menü möglich. Die Menüpunkte werden mit grauer Schrift (#656565) auf weißem Hintergrund dargestellt, denen eine farbliche Kennzeichnung voran gestellt ist. Die MouseOver-Farben variieren zwischen den einzelnen Themengebieten und richten sich nach der dem jeweiligen Thema zugeordneten Farbe. Sie sind unter Farbwelten aufgeführt.
3.4.2. Navigation Ebene 2
Die Menüpunkte der zweiten Ebene werden erst angezeigt, wenn ein Menüpunkt der ersten Ebene ausgewählt wurde. Sie sind dann dauerhaft sichtbar. Die jeweils zugehörige dritte Ebene wird durch MouseOver auf dem jeweiligen Menüpunkt der zweiten Ebene eingeblendet. Die Menüpunkte der zweiten und dritten Ebene sind weiß auf rot. Der aktive Menüpunkt der zweiten Ebene ist fett. Es findet keine Auszeichnung des aktiven Eintrags der dritten Ebene statt.
3.4.3. Navigationsbereich im Inhalt (vertikale Navigation)
Bei statisch angelegten Seiten („Portal Pages“), welche in einer Baumstruktur abgelegt werden, ist zur weiteren Unterteilung und besseren Navigierbarkeit eine weitere Navigation im linken Bereich des Inhaltsbereiches einzublenden. Die Einträge des Menüs werden in der Farbe des Fließtextes angezeigt.
Der aktive Menüpunkt ist dabei rot und fett. Die übergeordneten Menüpunkte zum aktuell aktiven Menüpunkt werden fett dargestellt.
Achtung: Die Navigation ist nicht auf der Startseite/Homepage zu verwenden.
3.4.4. Pfadnavigation
Die Pfadnavigation ist ausschließlich in Kombination mit der Navigation im linken Inhaltsbereich einzusetzen und dabei sowohl über- als auch unterhalb des Inhaltes einzublenden. Die Einträge werden entsprechend der Fließtextformatierung dargestellt. Der aktive Abschnitt des Pfades wird rot eingefärbt.
3.4.5. Themennavigation
Die Themennavigation mit Tagcloud sowie Unterteilung in verschiedene Inhaltstypen wie Artikel, Downloads, Dossiers etc. ist ausschließlich auf der Bundes- sowie den Bezirksseiten und denen der Großregionen einzusetzen. In allen anderen Fällen ist die hierarchische Navigation, wie unter Navigationsbereich im Inhalt (vertikale Navigation) genannt, zu verwenden.
3.5. Layouts & Grids
Je nach abzubildendem Inhalt können verschiedene Layouts verwendet werden. Für Übersichtsseiten bieten sich mehrspaltige Aufteilungen mit einer Aktionsspalte, bei umfangreicheren Inhalten jedoch eine zusätzliche Navigation an. Grundlegend werden zwei verschiedene Layouts bereitgestellt. Der
Inhaltsbereich selbst kann noch einmal unterteilt werden.
3.5.1. Layout mit Aktionsspalte
3.5.2. Layout mit Navigation
3.5.3. Dreispaltiger Inhaltsbereich
3.5.4. Zweispaltiger Inhaltsbereich
3.6. Bilder
Inhaltliche Bilder, keine Layoutgrafiken, sollten einmalig in das System übernommen, d.h. als Objekt
„Bild“ in das Redaktionssystem eingepflegt werden werden. Dabei ist auf animierte Grafiken und animierte Bilder jeglicher Art zu verzichten (Barrierefreiheit). Je nach Verwendungszweck wird jedes Bild vom System entsprechend skaliert bereitgestellt. Folgende Bildgrößen werden verwendet:
3.6.1. Bühnenbilder Volle Breite: 972x232px
Groß: 380x252px
Klein: 300x184px
3.6.2. Teaserbilder im Inhaltsbereich
Teaserbilder sind immer in einem Seitenverhältnis von 2:1 einzusetzen. Dabei ist das Verhältnis sowohl auf Bilder im Quer- als auch Hochkantformat anzuwenden. Eine Ausgangsgröße von 312x156px ist dabei sinnvoll.
dreispaltig volle Breite: 202x101px
dreispaltig, klein: 78x49px (Höhe variabel nach Bildmotiv)
zweispaltig volle Breite: 312x156px
3.6.3. Bilder im Inhaltsbereich
Im Inhalt eingesetzte Bilder können in ihrer Höhe je nach Motiv variabel eingesetzt werden. Das für Teaserbilder definierte Seitenverhältnis ist hierbei keine Vorgabe.
Panorama (volle Breite): 642x280px Halbe Breite: 320x161px
Viertel Breite: 160x115px
3.6.4. Bilder sowie Teaserbilder in der Aktionsspalte
Für Teaserbilder in der Randspalte gilt das selbe Seitenverhältnis 2:1 wie für Teaserbilder im
Inhaltsbereich. Davon abweichend dürfen Bannerbilder bei gleichen Breitenvorgaben je nach Bildmotiv eine andere Höhe haben.
Teaserbilder:
Volle Breite: 312x156px Breit mit Rahmen: 300x150px
Banner:
Volle Breite: 312x156px (Höhe variabel) Breit mit Rahmen: 300x150px (Höhe variabel)
3.6.5. Bilder Kombiboxen
Kombibox halbe Breite, Bild volle Breite: 310 x Höhe variabel Kombibox halbe Breite links, Bild volle Breite: 304 x Höhe variabel
3.8. Boxen
3.8.1. Bühne (auf der Startseite)
Das Karussell auf der Startseite kann in zwei verschiedenen Größen eingesetzt werden. Eine automatische Rotation durch die einzelnen Elemente des Karussells ist nur dann vorzusehen, wenn alle Teaser „klein“
sind. Wird eine große Bühne verwendet, ist die automatische Weiterschaltung zu deaktivieren.
3.8.2. Kombibox (im Inhalt)
Um Artikel mit weiterführenden Informationen wie Kontaktdaten, Querverlinkungen oder Dokumenten zu versehen, sind die Kombiboxen einzusetzen, welche in halber und voller Breite im Inhaltsbereich links oder rechts positioniert eingesetzt werden können. Die Informationen der Kombibox können mit einem Bild versehen sein und werden auf einer grauen Fläche dargestellt.
3.8.3. Hervorgehobene Boxen in der Aktionsspalte
Die Boxen in der Aktionsspalte können mit einem farbigen Hintergrund für die Überschrift hervorgehoben werden. Hierbei stehen die Standard-Darstellung (keine Hervorhebung) sowie Blau und Rot zur
Verfügung.
3.8.4. Newsticker-Box
Bei besonderen Ereignissen können diese über einen Newsticker auf der Startseite angekündigt werden.
Ein dauerhafter Einsatz ist nicht vorzusehen, um die Wichtigkeit der im Newsticker angekündigten Informationen zu unterstreichen.
Der Newsticker ist immer unterhalb der Teaserbildleiste einzublenden, sofern diese vorhanden ist.
Alternativ ist der Newsticker als erstes Element im Inhaltbereich einzufügen.
3.9. Darstellungsbeispiele
3.9.1. Tabellen
3.9.2. Formulare
Sprachauswahl & Suchformular:
Newsletter-Anmeldung:
Kontaktformular:
3.9.3. Suche
3.9.4. Sitemap
Die Website des DGB sowie aller Bezirke müssen dem HTML 4.1 Standard entsprechen und mittels CSS Level 2 formatiert und gestaltet sein. Dabei sind die Darstellungseigenheiten der verschiedenen populären Webbrowser in der jeweils aktuellen Version zu berücksichtigen. Eine Design getreue Darstellung ist in Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Mozilla Firefox 3.6 sowie Google Chrome 7.0 zu realisieren.
Kleinere Abweichungen im Design sind in den Browsern Internet Explorer 6, Opera 10 sowie Safari 4 (Windows, Mac) erlaubt. Die Nutzbarkeit der Website muss dabei erhalten bleiben.
Die Auslieferung ist unabhängig vom Medium (z.B.: Bildschirm, Projektion, Drucker), der Plattform (z.B.:
Windows, Linux, Mac OS) und Browsern mit geringerem Verbreitungsgrad (z.B.: Konqueror) zu berücksichtigen. Besondere Beachtung muss der Interpretierbarkeit durch Eingabe- und Ausgabegeräte für Körperbehinderte (Braille-Ausgabe, Screenreader), bei veränderten Benutzereinstellungen (Farben, Schriften, Schriftgröße) und ohne Zusatztechnologien (Plugins, Java, JavaScript, CSS) finden.
Das Informationsangebot ist möglichst behindertengerecht und damit angelehnt barrierefrei zugänglich anzubieten.
4. Technische Standards
Der nachfolgende Abschnitt beschreibt Voraussetzungen, die entweder technisch oder redaktionell zu beachten sind, um die Informationen auf der Website möglichst behindertengerecht anzubieten. Die Übersicht ist nicht als vollständig anzusehen, sondern soll eine Übersicht geben. Umfangreiche Anforderungen werden hier kurz zusammengefasst aufgeführt.
Die gesetzlichen Vorgaben zur Schaffung eines barrierefreien Webauftritts untergliedern sich in drei Stufen. Durch die zur Verfügung stehenden Mittel sollten weitestgehend die Anforderungen von BITV 1 beachtet werden. Eine vollständige Übersicht kann hier eingesehen werden:
http://bundesrecht.juris.de/bitv/
5.1. Alternative Inhalte für Audio- und visuelle Präsentationen (Anforderung 1)
Für jeden Audio- und visuellen Inhalt ist ein äquivalenter alternativer Text vorzusehen, die sowohl den Inhalt als auch die Funktion des ersetzten Inhaltes bereit stellt. Dabei gilt es bei visuellen Inhalten wie beispielsweise Fotos, Grafiken, Symbolen, Animationen etc., den dargestellten Inhalt (Bspw.: „Das Bild zeigt....“) oder dessen Funktion (Bspw.: „Flagge von Deutschland: Wechselt die Sprache der Website auf deutsch“) beschreibend wiederzugeben.
5.2. Farben und Kontraste (Anforderung 2)
Alle Informationen, die durch Farbe gestaltet sind, müssen auch ohne Farbwahrnehmung und -darstellung verfüg- und erkennbar sein. Ebenso ist auf einen ausreichenden Kontrast zwischen Vorder- und
Hintergrundfarbe zu achten.
5.3. Trennung von Inhalt und Layout (Anforderung 3)
Zur Präsentation aller Inhalte werden Markup-Sprachen wie XHTML verwendet, sofern möglich. Mittels Cascading Stylesheets (CSS) erfolgt die Positionierung und Darstellung. Die Verwendung erfolgt basierend auf der jeweiligen Spezifikation in der aktuellen Version.
Logische Strukturierungselemente dürfen nicht zur Formatierung verwendet werden. Ein
hervorzuhebender Text-Abschnitt ist nur dann mit <h3> zu formatieren, wenn es sich hierbei um eine
5. Barrierefreier Zugang
Die erstellten Dokumente sind gegen die aktuell gültige Grammatik zu prüfen (Anforderung 3.2).
Hilfsmittel hierfür werden vom W3C zur Verfügung gestellt: http://www.w3.org/QA/Tools/#validators
5.4. Texte und Sprache (Anforderung 4)
Die für die Website gültige Sprache wird entsprechend der Markup-Sprache definiert. Bei der Verwendung von XHTML erfolgt diese Kennzeichnung als Meta-Angabe über das „lang“-Attribut.
Eingesetzte Abkürzungen werden bei erster Verwendung erläutert und entsprechend als Abkürzung ausgezeichnet. Wird bei dem ersten Auftreten der Abkürzung die ausgeschriebene Variante im Text verwendet und die Abkürzung in Klammern nachfolgend genannt, kann für Abkürzungen auf die XHTML- Auszeichnung verzichtet werden.
Insgesamt sollten alle Texte in einer möglichst klaren und einfachen Sprache verfasst sein. Komplizierte und verschachtelte Satzstrukturen sind dabei zu vermeiden. Fremdwörter und Fachbegriffe sollten nur dann eingesetzt werden, wenn sie den Sachverhalt kürzer und präziser beschreiben als eine
deutschsprachige Entsprechung.
5.5. Tabellen (Anforderung 5)
Tabellen werden ausschließlich zur Darstellung von tabellarischen Inhalten verwendet. Über das
„summary“-Attribut ist eine inhaltliche Beschreibung vorzusehen. Spalten- und Zeilenüberschriften sind entsprechend über das Markup auszuzeichen. Die in Spalten aufgeteilten Inhalte müssen auch in linearisierter Form verständlich bleiben.
Zur Gestaltung und Aufteilung der Website sind Tabellen nicht einzusetzen.
5.6. Browserkompatibilität (Anforderung 6)
Auch ältere Webbrowser müssen alle relevanten Informationen darstellen können und die Benutzung der Website ermöglichen. Die Funktionen und Darstellung kann dabei eingeschränkt sein.
Die Inhalte müssen auch ohne CSS verständlich sein. Die Reihenfolge des Quelltextes entspricht der logischen Reihenfolge des Inhaltes (Anforderung 6.1). Relevante Inhalte müssen ebenfalls abrufbar bleiben, wenn Scripte, Applets oder programmierte Objekte nicht unterstützt oder deaktiviert werden (Anforderung 6.2).
5.7. Zeitgesteuerte Inhalte (Anforderung 7)
Der Benutzer muss über die Kontrolle über sich verändernde Inhalte verfügen. Darunter sind sich bewegende, scrollende oder sich automatisch ändernde Objekte oder Seiten zu verstehen. Dabei sind blinkender Inhalt, Bildschirmflackern, Blitze etc. ebenso zu vermeiden oder unter Kontrolle des Benutzers zu stellen wie die Bewegung von Inhalten.
5.8. Kompatibilität zu Hilfsmitteln / Unterstützende Technologien (Anforderung 10)
5.8.1. Popups (Anforderung 10.1) Die Verwendung von Popups ist zu vermeiden.
5.8.2. Formulare (Anforderung 10.2)
Formularelemente müssen basierend auf dem eingesetzten Markup eindeutig und dem zugehörigen Eingabefeld zugeordnet werden können. Die Beschriftung ist vom Layout gut erkennbar und optisch dicht am entsprechenden Formularelement zu platzieren.
