Navigation und Service

Einfach teilhaben (Link zur Startseite)


Trennung von Vorder- und Hintergrund

Begründung

Viele Menschen mit Behinderung haben Probleme Informationen auf Webseiten wahrzunehmen. Ein Hauptproblem für diese Menschen ist, den Vordergrund vom Hintergrund zu unterscheiden. Dabei bestehen die Probleme nicht nur auf der visuellen, sondern auch auf der akustischen Ebene.

Sehbehinderte Menschen können visuelle Informationen nicht wahrnehmen, wenn diese keinen ausreichenden Kontrast zum Hintergrund haben. Gleiches gilt auch für Menschen mit Farbfehlsichtigkeiten. Durch das veränderte Farbsehen verändern sich die benötigten Kontrastverhältnisse nochmals. Auch Informationen, die durch Farbunterschiede angezeigt werden, können für Menschen mit einer Farbfehlsichtigkeit verloren gehen. Ähnliche Probleme haben auch ältere Menschen, deren Sehvermögen auf natürliche Weise nachlässt und Menschen die eine Webseite auf einem monochromen Ausgabegerät betrachten, zum Beispiel auf einem Schwarz-Weiß-Drucker.

Werden Farben und Formen kombiniert verwendet, um Informationen darzustellen, können diese Informationen sicherer zum Nutzer transportiert werden. Fallen die Sehbehinderungen moderat aus, besitzen viele Nutzerinnen und Nutzer keine assistiven Technologien, sondern versuchen die Informationen einer Webseite in ihrer normalen Darstellung zu erfassen. Für diese Menschen ist es wichtig, dass Webseitenelemente gewisse Mindestkontraste zu ihrem Hintergrund aufweisen. Scheitert die Wahrnehmung in der normalen Darstellung, können von diesen Menschen aber Hilfen genutzt werden, um die Darstellung einer Webseite zu verändern. Die Hilfen sind in den meisten Browsern und Betriebssystemen integriert. So kann zum Beispiel die Farbe für Schrift und Hintergrund selbst gewählt werden, eine Mindestschriftgröße festgelegt werden oder die Webseite mit einem Browser leicht vergrößert werden (Zoom). Ändert eine Nutzerin oder ein Nutzer die Darstellung in dieser Form, dürfen keine Informationen verloren gehen.

Audio-Inhalte, die automatisch abgespielt werden, können Screenreadernutzerinnen und -nutzer empfindlich stören. Die Information, die ein Screenreader vorliest wird mit dem Audio-Inhalt vermischt und ist dann nicht mehr fehlerfrei wahrzunehmen. Eine Audio-Ausgabe, deren Lautstärke getrennt von der Sprachausgabe eines Screenreaders kontrollierbar ist, kann eine solche Störung für blinde Menschen verhindern.

Werden akustische Informationen ausgegeben, können Hintergrundgeräusche für hörbehinderte Menschen eine Barriere darstellen, die sie daran hindern die Informationen wahrzunehmen. Audio-Inhalte müssen deshalb so produziert werden, dass möglichst wenig Hintergrundgeräusche vorhanden sind.

Ziel der BITV ist es, dass Menschen mit moderaten Einschränkungen Webseiten ohne Hilfsmittel wahrnehmen können. Einfache Änderungen der Darstellung müssen immer möglich sein und dürfen nicht zu neuen Problemen führen.

Sind die Bedürfnisse eines behinderten Menschen größer, als die in diesem Abschnitt beschriebenen Maßnahmen, sind weitere Änderungen in Format und Darstellung, sowie die Verwendung von assistiven Technologien nötig. Hierzu lesen Sie bitte den Abschnitt "Anpassbares Layout".

Anleitung

Diese Anleitung bezieht sich auf Maßnahmen, die nötig sind, um die normale Darstellung für Menschen mit Behinderung so leicht wahrnehmbar wie möglich zu machen. Eine Umwandlung von Format und Darstellung soll dabei nicht stattfinden. Die Maßnahmen sind dabei immer ein Kompromiss zwischen der Freiheit der Gestaltung und der Wahrnehmbarkeit für Menschen mit Behinderungen.

Nicht auf Farben verlassen

Farben sind ein wichtiges Mittel bei der Gestaltung von Webseiten. Neben ästhetischen Aspekten haben Farben auch Wirkungen auf die Nutzerführung und die Gebrauchstauglichkeit. Farben können auch die Barrierefreiheit im Bereich der Verständlichkeit stark verbessern. Aber, Sie dürfen sich nie allein auf die Darstellung von Farben verlassen. Sie sollten Farben immer mit weiteren Darstellungsoptionen kombinieren. Die Möglichkeiten sind so vielfältig, dass hier nur eine Auswahl aufgezeigt werden kann.

  • Farbige Links, können zusätzlich unterstrichen werden.
  • Andere farbige Texte oder Seitenbereiche, können zusätzlich eingerahmt, größer, fett oder kursiv dargestellt werden.
  • Farbige Zuordnungen in Diagrammen können durch Muster oder Beschriftungen unterstützt werden.
  • Farbige Symbole werden durch Formen eindeutig.

Ein besonderes Thema ist die farbige Gestaltung zur Unterstützung der Navigation. Jedem Themenbereich ist dabei eine bestimmte Farbe zugeordnet. Wird nun ein Beitrag angezeigt, werden bestimmte Stilelemente der Webseite in dieser Farbe dargestellt. Solche Farbschemata haben einen positiven Einfluss auf die Gebrauchstauglichkeit und werden gerne verwendet. Um aber auch hier unabhängig von der farblichen Darstellung diese Information darzustellen, muss das aktuelle Thema zusätzlich anders gekennzeichnet werden. Informationen hierzu finden Sie im Abschnitt "Navigation und Orientierung im Internetauftritt"

Da aus ästhetischen Gründen auf eine Unterstreichung von Links in Fließtexten gerne verzichtet wird, wurde dieses Phänomen in einer WCAG-Technik besonders behandelt. Die WCAG erlaubt das Weglassen der Unterstreichung von Links in Fließtexten, wenn:

  • die Link-Farbe zur Farbe des umgebenen Textes ein Kontrastverhältnis von 3:1 aufweist
  • und der Link beim Überfahren mit der Maus und bei einem aktiven Tastaturfokus unterstrichen wird.

Die farbliche Gestaltung solcher Links ist dadurch zwar möglich, aber stark eingeschränkt. Der Link braucht nicht nur ein Kontrastverhältnis von 3:1 zum Umgebungstext, sondern auch einen 4,5:1 Kontrast zum Hintergrund. Damit sind die Farbkombinationen schon sehr stark eingeschränkt. Die Technik wird zwar als ausreichend toleriert, aber ausdrücklich nicht empfohlen.

Audio-Ausgaben

Wenn Sie in irgendeiner Form eine Audio-Ausgabe auf Ihrer Webseite einbinden möchten, sollte

  • die Ausgabe nicht automatisch starten, oder
  • die Ausgabe nicht länger als 3 Sekunden andauern!

Die Techniken der WCAG erlauben zwar unter bestimmten Voraussetzungen eine automatisch abspielende Audio-Ausgabe, aber empfohlen wird dies nicht. Die Voraussetzungen wären, dass es eine Möglichkeit am Beginn der Webseite für die Nutzerin oder den Nutzer gibt, die Audioausgabe anzuhalten oder dass die Lautstärke getrennt von der Systemlautstärke geregelt werden kann. In beiden Fällen haben aber Screenreadernutzerinnen und -nutzer Probleme, da sie auch akustisch navigieren und so durch die Nebengeräusche die Steuerung für die Audio-Ausgabe nur sehr schwer finden.

Für Webseiten der Priorität II gelten weitere Einschränkungen. Bei jedem Audioinhalt muss der Sprachinhalt um mindestens 20 Dezibel lauter als das Hintergrundgeräusch sein. Dies entspricht ungefähr der vierfachen Lautstärke. Ausgenommen sind kurze gelegentliche Geräusche im Hintergrund, Bestandteile von Hörmarken (akustische Logos), Audio-CAPTCHAS oder musikalische Darbietungen.

Kontraste

Für alle Texte und für alle Bilder von Texten gilt ein Mindestkontrastverhältnis der Schriftfarbe zum Hintergrund. Die Berechnung des Kontrastverhältnisses beruht auf Formeln für die Luminanz, ein Maß für die Helligkeit von Bildpunkten in der Videotechnik. Es gibt zahlreiche Werkzeuge zur Ermittlung des Kontrastverhältnisses. Je nach Vorliebe können Sie ein Analyseprogramm für Ihr Betriebssystem installieren oder eine Erweiterung für Ihren Browser verwenden, zum Beispiel:

Folgende Abbildung zeigt den Farbkontrast-Analysierer (Color Contrast Analyser) in deutscher Sprache. Im oberen Bereich können die zu analysierenden Farben ausgewählt werden. Im unteren Bereich zeigt das Werkzeug das Ergebnis als Verhältniswert an und untersucht gleichzeitig, welche Grenzwerte eingehalten wurden. In dem gezeigten Beispiel wurde das Kontrastverhältnis eines Blau-Tons zu einem Gelb-Ton untersucht. Das Kontrastverhältnis beträgt 6,2:1. Eingehalten wurden demnach auf Webseiten der Priorität I die Grenzwerte für normalen Text und für großen oder Fett geschriebenen Text. Für Webseiten der Priorität II wurde nur der Grenzwert für großen oder Fett geschriebenen Text eingehalten. Der Grenzwert für normalen Text auf Webseiten der Priorität II wurde nicht eingehalten. Eine Webseite der Priorität II dürfte diese Farbkombination für Fließtext also nicht verwenden.

Screenshot des Color Contrast Analyser Screenshot des Color Contrast Analyser

Für die Kontrastverhältnisse existieren 3 Grenzwerte:

  • das Kontrastverhältnis 3:1, entspricht dem von der ISO-Norm ISO-9241-3 empfohlenem Minimum für normal Sehende. Bei diesem Kontrastverhältnis soll ein angenehmes und längeres Lesen möglich sein.
  • das Kontrastverhältnis 4,5:1, trägt dem Verlust an Sehkraft im Alterungsprozess eines normal sehenden Menschen Rechnung und entspricht dem, was ein 80-jähriger Mensch üblicherweise noch gut lesen kann. Ebenfalls entspricht dies dem, was ein Mensch mit Farbfehlsichtigkeit und ein Mensch mit einem moderaten Sehschärfeverlust noch lesen kann.
  • das Kontrastverhältnis 7:1, ermöglicht es auch noch Menschen mit ausgeprägtem Sehverlust Texte zu lesen. In der Regel entspricht dies einer Restsehschärfe, bei dem die Betroffenen üblicherweise dazu übergehen, mit assistiven Technologien und speziellen Textvergrößerungen zu arbeiten.

Da nicht jede Schriftgröße und Schriftstärke gleich gut oder gleich schlecht zu lesen ist, werden auch Grenzen für die verwendete Schrift definiert. Als "großer" Text gilt ein Text mit einer Schriftgröße von 18 Punkt (pt) oder ein Text, der fett geschrieben ist und mindestens 14 Punkt (14pt) groß ist. Die tatsächliche Schriftgröße ist allerdings abhängig von Schriftart, Bildschirmgröße und Bildschirmauflösung. Deshalb wird vereinfacht davon ausgegangen, dass in einem Browser mit Standardeinstellungen eine Schrift mit 150 % (1.5em) oder eine fette Schrift mit 120 % (1.2em) als "Groß" gelten kann. Die relativen Maße beziehen sich immer auf die Standardschriftgröße des Browsers. Der Firefox-Browser hat eine Standardschriftgröße von 16 Pixeln, 150 % davon ergeben 24 Pixel. Also können tatsächliche Schriftgrößen mit 24 Pixeln in diesem Fall als "Groß" gelten. Diese "pauschale" Berechnung gilt nicht für ungewöhnliche Schriftarten.

Wenn Ihre Webseite die Priorität I erfüllen muss, gelten für Sie folgende Grenzwerte für Text und Hintergrund:

  • "großer" Text — Kontrastverhältnis 3:1
  • normaler Text — Kontrastverhältnis 4,5:1

Entsprechend höher sind die Anforderungen für Webseiten, die die Priorität II erfüllen müssen:

  • "großer" Text — Kontrastverhältnis 4,5:1
  • normaler Text — Kontrastverhältnis 7:1

Ausgenommen vom Mindestkontrast sind:

  • Texte, die Bestandteile einer Wortbildmarke (Logos oder Firmennamens) sind.
  • Texte, die nebensächlich sind, weil sie irgendwo auf einem Foto vorkommen, aber nichts mit der Bildinformation zu tun haben.
  • Texte in rein dekorativen Grafiken.
  • Texte, die Bestandteile von inaktiven Benutzerschnittstellen sind.

Zum Festlegen der Farben sollten Sie die CSS-Eigenschaften color und background-color verwenden. Legen Sie für jedes Textelement beide Farben entweder direkt oder durch Vererbung vom Elternelement fest. Denken Sie daran, dass die meisten Browser bereits Schwarz und Weiß als Standard festgelegt haben. Zum Überprüfen können Sie diese Einstellungen Ihres Browsers aber in zwei unübliche Farben ändern, zum Beispiel Schrift in Lila und einem Hintergrund in Pink. Falls für irgendein Element vergessen wurde, die Farben zu definieren, sollte dies nun schnell ins Auge springen.

Veränderbare Schriftgröße

Die BITV verlangt, dass alle Texte sich bis zu 200 % vergrößern lassen und dass dabei keine Texte beschnitten oder überdeckt werden. Eine Textvergrößerung kann auf drei Arten erfolgen:

  • Ein Browser unterstützt eine Zoom-Funktion, bei der alle Seitenbestandteile wie unter einer Lupe vergrößert werden.
  • Ein Browser unterstützt eine Möglichkeit die Standard-Schriftgröße zu verändern.
  • Die Webseite selbst unterstützt eine Möglichkeit die Schriftgröße durch Knöpfe oder Links zu verändern.

Da die Fähigkeit zur Vergrößerung prinzipiell in der Verantwortung der Browserhersteller liegt, ist es in erster Linie Ihre Aufgabe als Ersteller einer Webseite, die Vergrößerung nicht zu verhindern. Da erst neuere Browser eine Zoom-Funktion unterstützen, können Sie sich im Allgemeinen auf diese Technik nicht verlassen. Die WCAG empfehlen deshalb, zumindest eine der beiden anderen Techniken zusätzlich zu nutzen.

Alle größeren Browser bieten eine Möglichkeit die Standardschriftgröße zu verändern oder eine kleinste Schriftgröße zu definieren. Wenn Sie sich diese Technik zunutze machen wollen, müssen Sie alle anderen Schriftgrößen von der vom Nutzer festgelegten Schrift ableiten. Wenn Sie also eine Schriftgröße definieren möchten, müssen Sie immer die Einheiten em oder % nutzen. Je nach Vererbung kann dann die dargestellte Schriftgröße berechnet werden. Wenn in den folgenden CSS-Definitionen eine von der Nutzerin oder dem Nutzer eingestellte Schriftgröße von 16 Pixeln angenommen wird, ergibt sich durch die Vererbungen (3 mal 150 %) für die letzte Schriftgröße ein Wert von 54 Pixel

/* bei einer Nutzer-Schriftgröße von 16px */
p .a {font-size:150%}      /* ergibt 24px */
p .a .b {font-size:150%}   /* ergibt 36px */
p .a .b .c {font-size:150%}/* ergibt 54px */

Zusätzlich müssen sich die Textcontainer ebenfalls an die verwendete Schrift anpassen, dies ist zum Beispiel dadurch möglich, dass für die Containerbreite die Maßeinheit em verwendet wird. Die Verwendung der Einheit % ist nur eingeschränkt möglich, da diese sich im Falle von Containern auf den übergeordneten Container beziehen und nicht auf die Schriftgröße. Ein "em" entspricht dabei ungefähr der Breite des Buchstabens "M". Folgender Quellcode erzeugt daher einen Container, der ungefähr so breit ist wie 10 "M"s.

div.container {width:10em}

Falls Sie keine der oberen Techniken nutzen können, bleibt Ihnen nur die Möglichkeit eine Vergrößerungsoption in Ihre Webseite zu integrieren. Üblicherweise werden dazu zwei oder drei Knöpfe in die Seite integriert, die zum Beispiel mit "A+", "A-" und "A=" beschriftet sind. Es sind hier auch andere Beschriftungen möglich. Hier ein paar Beispiele:

Verschiedene Screenshots von Knöpfen zur Schriftvergrößerung Verschiedene Screenshots von Knöpfen zur Schriftvergrößerung

Durch ein JavaScript wird dann die Schriftgröße manuell vergrößert, verkleinert oder auf den Ursprungswert zurückgesetzt. Diese Knöpfe müssen sehr gut sichtbar und ausreichend groß sein, denn wer auf eine Schriftvergrößerung angewiesen ist, muss die Knöpfe trotzdem ohne Probleme finden können.

Für allen drei Techniken gilt, dass bei einer Vergrößerung um 200 % keine Informationen verdeckt oder abgeschnitten werden dürfen! Auch wenn eine Vergrößerungsmöglichkeit in der Webseite erlaubt ist, zu bevorzugen sind die ersten beiden Techniken, da hier die betroffenen Personen auf die Ihnen bekannten Hilfen — der Vergrößerung durch den Browser — zurückgreifen können und die Webseite nicht erst auf vielleicht vorhandene Vergrößerungsknöpfe untersuchen müssen!

Schriftgrafiken

Schriftgrafiken sind Bilder von Text, wobei der dargestellte Text eine wesentliche Information ist. Taucht ein Text nur zufällig auf einem Foto auf und trägt nicht zum Verständnis des Textes bei, ist dies keine Schriftgrafik.

Schriftgrafiken können grundsätzlich verwendet werden, wenn genau die verwendete Präsentation wichtig für die Informationsübermittlung ist oder wenn die Schriftgrafik keine Information beinhaltet und lediglich der Dekoration dient. Bilder von Firmenlogos und Marken gehören zu den Schriftgrafiken, die verwendet werden dürfen. Genauso darf auch ein Bild von einem Beispieltext in einer bestimmten Schriftart dargestellt werden, wenn genau die Eigenschaften dieser Schriftart gezeigt werden sollen.

Andere Schriftgrafiken dürfen auf Webseiten die der Priorität II unterliegen nicht verwendet werden. Bei Webseiten der Priorität I existiert noch eine weitere Ausnahme, die es erlaubt Schriftgrafiken zu nutzen. Die Grafik muss vom Nutzer mit einfachen Mitteln anpassbar sein, und zwar in der Schriftgröße und der verwendeten Schrift- und Hintergrundfarbe. Dies ist nur möglich, wenn Sie die Grafiken automatisch vom Server generieren lassen oder wenn Sie alle Schriftgrafiken mit den unterschiedlichsten Einstellungskombinationen vorrätig speichern. Der Nutzerin oder dem Nutzer muss über einen einfach zu bedienenden Mechanismus die Möglichkeit gegeben werden, zwischen den Versionen umzuschalten.

Für Schriftgrafiken gelten noch weitere Bedingungen, lesen Sie dazu auch den Abschnitt Textalternativen für Bilder.

Nutzereinstellungen

Wenn Ihre Webseite der Priorität II unterliegt, müssen Sie Maßnahmen treffen, um folgende Kriterien an Ihre Webseite zu erfüllen:

  • Vordergrund- und Hintergrundfarbe müssen individuell einstellbar sein.
  • Die Zeilenbreite darf nicht mehr als 80 Zeichen betragen.
  • Texte werden nicht in einem Blocksatz dargestellt.
  • Der Zeilenabstand im Fließtext beträgt mindestens 1,5 Zeilen und zwischen den Abschnitten selbst ist der Abstand noch größer.
  • Wenn die Schriftgröße auf 200 % vergrößert wird, muss nicht wiederholt hin und her gescrollt werden, um Fließtext lesen zu können.

Alle diese Punkte können Sie dadurch erfüllen, dass Sie Mechanismen in Ihre Seite integrieren, mit der Nutzerinnen oder Nutzer die Darstellung entsprechend Ihrer Bedürfnisse einstellen können. Dies kann zum Beispiel, durch Knöpfe mit denen die entsprechenden CSS-Eigenschaften ausgetauscht werden, geschehen. Besser ist es jedoch die Möglichkeiten zu unterstützen beziehungsweise nicht zu unterbinden, die die Betriebssysteme und die Browser mitbringen.

Betriebssysteme bieten zum Beispiel einen Kontrastmodus an und in Browsern können individuelle Farbzusammenstellungen für Vordergrund und Hintergrund eingestellt werden. Wenn Sie diese Einstellungen berücksichtigen und sich nicht darauf verlassen, dass Ihre Farbauswahl zu jederzeit funktioniert, sollten hier keine Probleme zu erwarten sein.

Wenn Sie die Breite der Fließtexte auf einen Wert wie 60em beschränken, können Sie davon ausgehen, dass die Zeilenbreite nicht mehr als 80 Zeichen beträgt. Wenn Sie die Breite ihres Textbereichs so in % definiert haben, dass sich der Bereich verkleinert, wenn das Browserfenster verkleinert wird, kann eine Nutzerin oder ein Nutzer das Fenster verkleinern, bis die Darstellung seinen Wünschen entspricht. In beiden Fällen erfüllen sie diese Unterbedingung der BITV.

Wenn Sie in Ihren CSS-Eigenschaften den Wert text-align:justify nicht für Fließtexte verwenden, nutzen Sie automatisch keinen Blocksatz, sondern nur links- oder rechtsbündigen Text.

Einen Zeilen-Abstand von 1,5 Zeilenhöhen müssen Sie leider selbst sicherstellen. Dazu müssen Sie in den CSS-Eigenschaften von Fließtexten die Zeilenhöhe mit line-height:150% oder line-height:1.5em oder größeren Werten festlegen.

Die letzte Bestimmung, dass Vermeiden des Scrollens beim Lesen eines Textes bei einer Schriftvergrößerung von 200 % und einer bildschirmfüllenden Darstellung, bedeutet nicht, dass eine Nutzerin oder ein Nutzer überhaupt nicht scrollen muss. Es soll nur nicht für jede Zeile hin- und hergescrollt werden müssen, wenn ein Fließtext gelesen wird. Welche Bildschirmauflösung als "Bildschirmfüllend" gilt, kann nur bestimmt werden, wenn sich alle Nutzerinnen und Nutzer in einer kontrollierten Umgebung befinden, zum Beispiel einem Intranet in einer Verwaltung. Bei öffentlichen Webseiten kann aber davon ausgegangen werden, dass niedrigere Auflösungen als 1024 Pixel in der Breite nicht mehr vorkommen.

Beispiele

Nicht auf Farben verlassen

Im folgenden Beispiel werden die Standard-Einstellungen des Browsers für die Darstellung von Links verändert. Alle Links in Fließtexten sollen in einem Rot-Ton dargestellt werden. Das verwendete Rot (#AA2222) hat mit 7:1 ein ausreichendes Kontrastverhältnis zum weißen Hintergrund. Der Rot-Ton hat aber keinen ausreichenden Kontrast zum umgebenen Text, deshalb wurde als zusätzliches Unterscheidungsmerkmal der Link unterstrichen.

Screenshot eines Fließtextes mit roten unterstrichenen Links Screenshot eines Fließtextes mit roten unterstrichenen Links

a { text-decoration:underline; color:#AA2222 }
...
<p>
   ...
   dann kann die ambulante Pflege verbunden werden mit 
   Leistungen der <a href="wiedereingliederungshilfe.html">
   Wiedereingliederungshilfe</a>, dem 
   <a href="persoenlichesbudget.html">persönlichen Budget</a>
   und Arbeitsassistenz. 
</p>

Eine Technik der WCAG erlaubt die Unterstreichung in dem Fall wegzulassen, wenn das Kontrastverhältnis vom Link zum umgebenen Text mehr als 3:1 beträgt und die Unterstreichung nur sichtbar wird, wenn der Link den Fokus erhält. Im nächsten Beispiel wurde eine solche Situation nachgestellt. Der Link hat mit der Farbe #3333FF ein Kontrastverhältnis zum Hintergrund von 6,8:1 und ein Kontrastverhältnis von 3.1:1 zum schwarzen umgebenden Text. Beim Überfahren mit der Maus oder dem Aktivieren mit der Tastatur wird der Link zusätzlich unterstrichen.

Screenshot eines Fließtextes mit blauen Links die beim Fokussieren unterstrichen werden Screenshot eines Fließtextes mit blauen Links die beim Fokussieren unterstrichen werden

a {color:#3333FF}
a:link, a:visited {text-decoration:none;}
a:focus, a:hover, a:active {text-decoration:underline;}
...
<p>
   ...
   dann kann die ambulante Pflege verbunden werden mit 
   Leistungen der <a href="wiedereingliederungshilfe.html">
   Wiedereingliederungshilfe</a>, dem 
   <a href="persoenlichesbudget.html">persönlichen Budget</a>
   und Arbeitsassistenz. 
</p>

Soll eine Warnung verwendet werden, die zum Beispiel in einer roten Schrift dargestellt wird, muss diese ebenfalls durch weitere Merkmale hervorgehoben werden. Im folgenden Beispiel wurde die Warnung zusätzlich nach rechts eingerückt, umrahmt und kursiv geschrieben.

Screenshot einer Warnung in einem Fließtext Screenshot einer Warnung in einem Fließtext

.warnung {
   color:#aa2222;
   padding-left:.5em; 
   margin-left:1.2em; 
   font-style:italic; 
   border:.2em solid #aa2222; 
   border-left-width:.8em
}
...
<p>
   ...
   IT-Sicherheitsdefizite ganz weit oben stehen. Hacker freut 
   das natürlich. 
</p>
<p class="warnung">
   Passwörter sollten niemals unverschlüsselt auf dem PC 
   abgelegt werden oder auf dem berühmten Notizzettel am 
   Bildschirm kleben.
</p>
<p>	
   Sie haben Werkzeuge, die vollautomatisch 
   alle möglichen Zeichenkombinationen ausprobieren oder ganze 
   ...
</p>

Das folgende Diagramm zeigt die Sitzverteilung nach einer Bundestagswahl, die Zuordnung von Parteien und Sitzen erfolgt ausschließlich durch die Farben. Gehen diese Farben verloren, geht auch die Zuordnung verloren.

Screenshot zweier Diagramme zur Sitzverteilung im Bundestag. Links mit Farben, rechts Schwarz/Weiß Screenshot zweier Diagramme zur Sitzverteilung im Bundestag. Links mit Farben, rechts Schwarz/Weiß

Eine Zuordnung der Parteien zu ihren erreichten Sitzen könnte hier noch auf zahlreiche andere Methoden erfolgen. Neben den Farben könnten auch Schraffuren oder Pfeilverbindungen eine Zuordnung kennzeichnen. Eine einfache Lösung wäre es auch, einfach die Beschriftungen entsprechend von links nach rechts anzuordnen.

Ein Diagramme zur Sitzverteilung im Bundestag. Die Reihenfolge der Beschriftung entspricht der in der Sitzverteilung Ein Diagramme zur Sitzverteilung im Bundestag. Die Reihenfolge der Beschriftung entspricht der in der Sitzverteilung

Die Verbindung von Form und Farbe ist meist ein sehr wirkungsvolles Mittel um Informationen zu transportieren. Im Beispiel unten wurde versucht die Information, ob ein Artikel lieferbar ist oder nicht, mit stilisierten grünen und roten Leuchtdioden darzustellen. Bei einem Ausdruck auf einem Schwarz-Weiß-Drucker gehen diese Informationen verloren.

Eine Broschürenliste, lieferbare und nicht-lieferbare Broschüren sind mit grünen und roten Leuchtdioden-Symbolen markiert. Daneben dieselbe Liste in Schwarz/Weiß, lieferbare und nicht-lieferbare Broschüren sind nicht mehr unterscheidbar Eine Broschürenliste, lieferbare und nicht-lieferbare Broschüren sind mit grünen und roten Leuchtdioden-Symbolen markiert. Daneben dieselbe Liste in Schwarz/Weiß, lieferbare und nicht-lieferbare Broschüren sind nicht mehr unterscheidbar

Das Problem könnte mit einem einfachen Mittel gelöst werden. Die Farben müssten mit zwei Formen kombiniert werden. Zum Beispiel zeigen grüne Haken die lieferbaren Artikel und ein rotes Kreuz markiert die vergriffenen Artikel.

Eine Broschürenliste, lieferbare und nicht-lieferbare Broschüren sind mit grünen Haken und roten Kreuz-Symbolen markiert. Daneben dieselbe Liste in Schwarz/Weiß, lieferbare und nicht-lieferbare Broschüren sind immer noch unterscheidbar Eine Broschürenliste, lieferbare und nicht-lieferbare Broschüren sind mit grünen Haken und roten Kreuz-Symbolen markiert. Daneben dieselbe Liste in Schwarz/Weiß, lieferbare und nicht-lieferbare Broschüren sind immer noch unterscheidbar

Kontraste

Folgende Balken zeigen drei Farbverläufe der drei RGB-Grundfarben von hell nach dunkel. Die Markierungen zeigen die Stellen im Farbverlauf, an denen das Kontrastverhältnis der Farbe mit einem weißen Hintergrund einen der drei Grenzwerte überschneiden würde. Anhand der Farben Blau, Grün und Rot wird deutlich, wie unterschiedlich der Farbkontrast bei Farben sein kann. Verlassen Sie sich deshalb nicht auf Ihr subjektives Empfinden, es ist sehr wichtig die Messwerkzeuge zu nutzen, nur so können Sie objektive Ergebnisse erzielen.

Der grüne Balken zeigt auch, dass die Auswahl an Grünabstufungen bei Farbkombinationen mit Weiß recht stark eingeschränkt ist. Muss für eine Webseite die Priorität II eingehalten werden, bleiben nur noch sehr dunkle grüne Farben. Die dunklen Grüntöne haben dann aber wiederum ein sehr geringes Kontrastverhältnis zu Schwarz, sodass eine dunkle grüne Schrift nur schwer von einer Schwarzen zu unterscheiden ist.

grüner Farbbalken mit Markierungen für die Kontrastgrenzwerte grüner Farbbalken mit Markierungen für die Kontrastgrenzwerte

blauer Farbbalken mit Markierungen für die Kontrastgrenzwerte blauer Farbbalken mit Markierungen für die Kontrastgrenzwerte

roter Farbbalken mit Markierungen für die Kontrastgrenzwerte roter Farbbalken mit Markierungen für die Kontrastgrenzwerte

Die folgende Abbildung zeigt einen Ausschnitt einer Webseite. In der Grafik sehen Sie die jeweiligen Grenzwerte für die Priorität II, die bei der Auswahl der Farbkombinationen eingehalten wurden. Die Grafik verdeutlicht zum einen, wie stark die Kontraste sein müssen, um die Grenzwerte einzuhalten und zum anderen, an wie vielen Stellen eine Überprüfung der Kontrastwerte nötig ist.

Screenshot einer Webseite, Grenzwerte der Farbkombinationen wurden an den entsprechenden Stellen eingetragen Screenshot einer Webseite, Grenzwerte der Farbkombinationen wurden an den entsprechenden Stellen eingetragen

Veränderbare Schriftgröße

Werden alle Schriftgrößen in % (Prozent) oder em angegeben, kann die im Browser eingestellte Standard-Schiftgröße von einem HTML-Element zum Nächsten vererbt werden. Eine Veränderung der Standard-Schriftgröße hat dann Auswirkungen auf jede Schriftgröße der dargestellten Schriften. Die folgende Grafik zeigt einen Ausschnitt des Einstelldialogs des Firefox-Browsers.

Einstellmöglichkeiten für die Schriftgröße im Firefox-Browser Einstellmöglichkeiten für die Schriftgröße im Firefox-Browser

Angenommen der unterstehende CSS-Code würde für eine Webseite genutzt werden.

html * {font-size: 100%;}
body   {font-size: 87.5%;}
h3     {font-size: 150%;}
...
h3.myheader {font-size: 130%;}

Durch die Vererbung der Schriftgröße würde ein Verändern der Standard-Schriftgröße von 16 auf 22 Pixel, alle tatsächlichen Schriftgrößen betreffen und alle Schriften würden entsprechend größer dargestellt werden. Die folgende Grafik zeigt oben die berechneten Schriftgrößen bei einer im Browser eingestellten Größe von 16 Pixeln. Die untere Grafik zeigt die berechneten Größen bei einer eingestellten Größe von 22 Pixeln. Alle Schriften werden gleichmäßig vergrößert, die Harmonie des Schriftbildes bleibt erhalten.

Auswirkung der Standard-Schriftgröße bei Verwendung von relativen Maßen Auswirkung der Standard-Schriftgröße bei Verwendung von relativen Maßen

Schriftgrafiken

Folgende Beispiele zeigen zwei erlaubte Schriftgrafiken. Bei der ersten Grafik handelt es sich um das Logo des "Bundesministeriums für Arbeit und Soziales". Bei Marken und Firmenlogos gilt das exakte Aussehen als unabdingbar, um die Information der Grafik zu vermitteln. Zu beachten ist, dass der Alternativtext in diesem Fall den Text der Schriftgrafik wiedergeben muss.

Beispiel-Screenshot: Bild von Schrift als Teil eines Logos Beispiel-Screenshot: Bild von Schrift als Teil eines Logos

<p>
   Dieses Projekt wurde gefördert vom
   <img src="bmas_logo.png" 
        alt="Bundesministerium für Arbeit und Soziales">
</p>

Als unvermeidlich zur Informationsvermittlung gilt eine Schriftgrafik auch, wenn genau das Aussehen der Schrift und die genaue Anordnung wesentlicher Teil der Information ist. Ein Alternativtext muss dann entsprechend diese Information beschreiben.

Beispiel-Screenshot: Bild von Schrift zur Demonstration der Schrift Beispiel-Screenshot: Bild von Schrift zur Demonstration der Schrift

<h3>Cardo</h3>
   <img src="cardo.png" 
        alt="Schriftbeispiel Cardo, Beschreibung folgt im Text">
   <blockquote cite="http://praegnanz.de/essays/cardo"><p>
      "Die Cardo ist ausgeglichen, prägnant und zeitlos. Ihr Grauwert 
      besitzt Lebendigkeit und weist schicke Akzente auf, ohne dabei 
      zu unruhig zu werden ..." (Gerrit van Aaken)
   </p></blockquote>

BITV 1.0 zu BITV 2.0

Viele der hier relevanten BITV-Bedingungen existierten in ähnlicher Form auch schon in der BITV von 2002 und bedurften damals einige Interpretationen. Die Formulierungen in der BITV 2.0 und die Technikdokumente der WCAG 2.0 machen die Bedingungen konkreter. Sie sollten deshalb jede der hier aufgeführten BITV-2.0-Bedingungen für Ihre Webseite erneut überprüfen.

Zwei Änderungen betreffen die Bedingung, bei einer Farbauswahl ein bestimmtes Mindestkontrastverhältnis einzuhalten.

  • Die Formeln zur Kontrastberechnung haben sich geändert. In der alten BITV basierten die Berechnungen auf den Helligkeitskontrast und den Farbkontrast. Die BITV 2.0 hat als Basis die Luminanz gewählt, eine Einheit aus der Videotechnik, gleichbedeutend mit der Leuchtkraft. Der Vorteil ist, dass Farbfehlsichtigkeiten nur einen geringen Einfluss auf die Unterscheidungsfähigkeit verschiedener Luminanzwerte haben.
  • In der BITV von 2002 wurde ein und derselbe Mindestkontrast in der Priorität I und der Priorität II gewählt. Unterschiedlich in den Prioritäten war, dass der Mindestkontrast in der Priorität I lediglich für Grafiken gefordert war. Einen Mindestkontrast füt Texte existierte nur in der Priorität II. In der BITV 2.0 wird der Mindestkontrast nur für Texte und Bildern von Texten gefordert. Es ist allerdings üblich auch Symbole, wie einen Text zu handhaben und den Mindestkontrast einzuhalten.

Wenn Sie eine Webseite von der alten BITV auf die BITV 2.0 umstellen müssen, ist es nötig, alle Kontrastwerte neu zu berechnen und gegebenenfalls Farbanpassungen durchzuführen.

Audio-Inhalte wurden in der BITV von 2002 nicht unter dem Aspekt der Wahrnehmung betrachtet. Wenn Sie Audio-Inhalte verwenden, sollten Sie zum einen untersuchen, ob die Hintergrundgeräusche ausreichend leise sind. Zum anderen müssen Sie kontrollieren, dass entweder Audio-Inhalte nicht automatisch starten oder wenn sie automatisch starten, nicht länger als 3 Sekunden abgespielt werden.

Die Bedingung, dass die Schriftgröße auf 200 % vergrößert werden kann, existierte in der BITV von 2002 nicht explizit. In der Regel wurde aber die Bedingung, dass relative Maße genutzt werden sollen, so interpretiert, dass die Schrift vergrößerbar sein müsse. Bei der Umstellung Ihrer Webseiten sollte Sie deshalb kontrollieren, ob alle Webseiten wirklich problemlos auf 200 % zu vergrößern sind.

Schriftgrafiken waren in der alten BITV ebenfalls nicht explizit verboten. In der Regel wurde die Forderung nach der Nutzung einer geeigneten Markup-Sprache anstelle von Bildern aber so interpretiert, dass Schriftgrafiken zu vermeiden sind.

BITV

Priorität I

BITV Bedingung 1.4.1 "Farbe"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.2 "Audio-Kontrolle"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.3 "Kontrast"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.4 "Veränderbare Textgröße"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.5 "Schriftgrafiken"

Für Experten (in Englisch):


Deutsche Übersetzungen:


Priorität II

BITV Bedingung 1.4.6 "Kontrast"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.7 "Hintergrundgeräusche"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.8 "Visuelle Präsentation"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.9 "Schriftgrafiken"

Für Experten (in Englisch):


Deutsche Übersetzungen:

© Bundesministerium für Arbeit und Soziales