Das Prüfverfahren zur BITV 1.0


Sie sind hier: BITV-Test > Verzeichnis der Prüfschritte > Prüfschritt 2.2.1 (8 von 52)


Diese Version des BITV-Tests ist nicht mehr gültig! zum aktuellen BITV-Test 2.0

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 2.2.1
Grafiken vor wechselndem Hintergrund erkennbar

Diese Version des Prüfschritts ist nicht mehr gültig!

Technische Angaben

Version bis 08.02.2006 | bis 16.10.2009 | bis 22.9.2011
BITV-Bedingung 2.2
Bewertungsalternativen ja / eher erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung geringes Gewicht (1 Punkt)
Abwertung auf "schlecht zugänglich"
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Grafische Bedienelemente und informative Grafiken sind vor wechselndem Hintergrund erkennbar.
Prüfschritt nicht anwendbar Grafische Bedienelemente oder informative Grafiken sind nicht vorhanden.

Was wird geprüft?

Informative Grafiken sollen vor wechselnden Hintergrundfarben erkennbar bleiben. Bei Grafiken mit transparentem Hintergrund ist dies häufig nicht gewährleistet.

Informative Grafiken sollen nicht als Hintergrundbilder eingebunden werden. Denn auf diese Weise eingebundene Grafiken verschwinden, wenn der Benutzer ein eigenes Farbschema verwendet.

Warum wird das geprüft?

Benutzer, die bestimmte Farben nicht gut nutzen können, ändern häufig die Farbeinstellungen. Sie wählen besser geeignete eigene Farben für Vordergrund (Text) und Hintergrund.

Die Farben von Grafiken werden durch solche Einstellungsänderungen nicht beeinflusst. Die Änderung der Hintergrundfarbe kann daher dazu führen, dass eine Grafik, die sich vor dem vom Webdesigner ausgewählten Hintergrund gut abgehoben hat, plötzlich im Hintergrund verschwimmt und nicht mehr sichtbar ist. Besonders häufig tritt dieses Problem auf, wenn Grafiken mit transparentem Hintergrund verwendet werden.

Zum Beispiel ein schwarzer Text auf transparentem Hintergrund: So lange die Hintergrundfarbe weiß ist, kann man ihn gut lesen. Der Text verschwindet aber, wenn der Anwender die Farben umkehrt. Die Umkehrung wirkt nicht auf Grafiken, der Text bleibt also schwarz. Die Umkehrung wirkt aber auf den Hintergrund des Textes, denn der gehört ja nicht zur Grafik. Der Hintergrund ist also auch schwarz, schwarzer Text wird auf schwarzem Hintergrund dargestellt.

Ein ähnliches Problem tritt auf, wenn informative Grafiken als Hintergrundbilder eingebunden sind. Auch solche Grafiken sind nicht vor wechselnden Hintergrundfarben erkennbar, denn sie verschwinden, wenn der Benutzer eine eigene Hintergrundfarbe einstellt.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn wichtige Inhalte oder Funktionen nur über informative Grafiken verfügbar sind. Informative Grafiken sind Grafiken, die als Bedienelemente eingesetzt werden, Schriftgrafiken und Abbildungen oder Zeichnungen, die etwas zum Verständnis des Inhalts beitragen.

Was für Inhalte sind wichtig und nur über Grafiken verfügbar?

  • "nach oben"-Links oder andere Funktionen, die auch der Browser zur Verfügung stellt, sind nicht wichtig.
  • Listenpunkte sind wichtige Elemente, denn sie gliedern die Listeneinträge. Die Gliederung wird in der Regel aber nicht nur über die Listenpunkte vermittelt, sondern auch auf einem anderen Wege, zum Beispiel durch das Markup oder die Positionierung
  • Auch Markierungen für die Kennzeichnung der aktuellen Menüposition sind wichtige Elemente, auch hier gilt aber, daß die Information über die aktuell ausgewählte Menüoption meistens nicht nur über die Markierung, sondern auch auf einem anderen Weg angezeigt wird (siehe Prüfschritt 2.1.1).

Der Prüfschritt ist in der Regel auch auf Logos anwendbar. Ausgenommen sind Logos, die auf einem fremden Server liegen (im Firefox Eigenschaften des Bildes, dort Grafik-Eigenschaften > Adresse).

2. Grafiken vor wechselnden Hintergründen betrachten

Durch die Betrachtung vor wechselnden Hintergründen kann man feststellen, ob das, was in der Grafik abgebildet ist, einen eigenen Hintergrund hat. Wenn es einen eigenen Hintergrund hat, dann ist die Wahrnehmung nicht abhängig von der gerade ausgewählten allgemeinen Hintergrundfarbe der Webseite.

Grundeinstellung in Firefox

  1. Firefox aufrufen und im Menü Extras den Dialog Einstellungen... aufrufen. Den Reiter Inhalt wählen. Extras > Einstellungen > Schriftarten & Farben wählen. Im Bereich Schriftarten & Farben die Option Farben... wählen.
  2. Im Dialog Farben im Bereich Text und Hintergrund als Hintergrundfarbe eine Farbe wählen, die normalerweise eher selten für die Seitengestaltung verwendet wird (gut geeignet sind zum Beispiel helle Rosa- oder Grüntöne).
  3. Die Dialogfenster mit "OK" schließen.

Prüfung

  1. Seite in Firefox aufrufen.
  2. In der Web Developer Toolbar Disable > Disable Page Colors wählen.
  3. Prüfen, ob wichtige Informationen verschwinden (das tun sie, wenn sie als Hintergrundbilder eingebunden sind).
  4. Prüfen, ob informative Grafiken mit transparenten Hintergründen verwendet werden. Auf der bunten Hintergrundfarbe sollte normalerweise gut erkennbar sein, ob Grafiken einen eigenen Hintergrund haben oder nicht (je nach Farbgestaltung der zu prüfenden Seite muss in den Firefox-Einstellungen eventuell eine andere Hintergrundfarbe gewählt werden).

3. Hinweise

  • Wenn Bildersetzungsverfahren für informative Grafiken eingesetzt worden sind, muss geprüft werden, ob für das Ausblenden des Textes die CSS-Eigenschaft display:none; verwendet worden ist. In diesem Fall ist der Alternativtext für Benutzer gebräuchlicher Screenreader nicht zugänglich, Prüfschritte 1.1.1 und/oder 1.1.2 müssen entsprechend bewertet werden.

4. Bewertung

Nicht voll erfüllt:

  • Das Logo des Webauftritts verschwindet bei benutzerdefinierten Farben.

Abwertung des Gesamtergebnisses:

  • Wichtige Inhalte werden über Bildersetzungstechniken angezeigt. Diese Inhalte sind dann nach Wechsel der Hintergrundfarben nicht mehr zugänglich, die Nutzbarkeit des Webangebots ist erheblich eingeschränkt.

Einordnung des Prüfschritts

Formulierung BITV:

Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

http://www.bik-online.info/info/gesetze/bitv/anlage_1.php#2-2

Deutsche Übersetzung der WCAG:

Sorgen Sie dafür, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe ausreichend kontrastieren, wenn sie von jemandem betrachtet werden, dessen Farbensehen beeinträchtigt ist, oder wenn sie mit einem Schwarzweißbildschirm betrachtet werden.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-color-contrast

Abgrenzung zu anderen Prüfschritten: Hintergrundgrafiken

Die Einbindung von informativen Grafiken über den Hintergrund ist für verschiedene Benutzergruppen problematisch. Für blinde Butzer ist sie problematisch, weil keine Alternativtexte vorhanden sind oder wenn die Bildersetzungstechnik nicht funktioniert. Für sehende Benutzer ist sie immer problematisch, weil die Hintergrundfarbe nicht mehr variabel ist.

  • Die Nutzbarkeit von Hintergrundgrafiken für sehende Benutzer ist Gegenstand des Prüfschritts 2.2.1.
  • Die Verfügbarkeit von Alternativtexten für Hintergrundgrafiken, also die Nutzbarkeit für blinde Benutzer ist Gegenstand der Prüfschritte 1.1.1 und 1.1.2.

Einordnung des Prüfschritts nach WCAG 2.0

WCAG 2.0

Guideline

Success criterion

  • 1.4.3 Contrast (Minimum) (Level AA)
    "Although this Success Criterion only applies to text, similar issues occur for data presented in charts or graphs. Good color contrast should also be provided for data presented in these forms." (Understanding SC 1.4.3)

Techniques

General Techniques

Failures

Quellen

Artikel zu diesem Prüfschritt auf bik-online.info

Fragen zu diesem Prüfschritt

Warum ist der Prüfschritt auf von fremden Servern geladene Logos nicht anwendbar?

Im BITV-Test sollen nur Dinge bewertet werden, die in der Verantwortung des Webauftritts liegen. Wo die Grenze ist, lässt sich aber manchmal schwer klären. Daß ein Logo von einem fremden Server geladen wird, deutet darauf hin, daß die Bedingungen seiner Benutzung vorgegeben sind.

Sollte man auf Grafiken mit transparentem Hintergrund generell verzichten?

Nein, das ist nicht nötig. Man kann auch die Grafik mit einer kontrastreichen Umrandung versehen. Mit so einem Rand ist auch eine Grafik mit transparentem Hintergrund vor wechselnden Hintergrundfarben zu erkennen.

Umgekehrt kann es Probleme mit wechselnden Hintergrundfarben auch bei Grafiken geben, die keinen transparenten Hintergrund haben. Ein einfarbiges kleines Rechteck als Listenpunkt ist zum Beispiel nicht mehr zu erkennen, wenn der Hintergrund eine ähnliche Farbe hat.

Listenpunkte sind wichtige informative Grafiken. Kann man sie als Hintergrundgrafiken einbinden?

Bei Wechsel des Hintergrunds verschwinden über den Hintergrund eingebundene Listenpunkte. Auch sind diese Grafiken ganz sicher wichtig.

Allerdings sind auch Alternativtechniken für die Gestaltung von Listenpunkten problematisch. Sie erfordern gesonderte Gestaltungsvorgaben für den Internet Explorer 6.0 und sie schränken die Gestaltungsmöglichkeiten ein. Auch sind Listenelemente immerhin noch durch die Einrückung und den Zeilenumbruch erkennbar.

Daher wird diese Technik im BITV-Test nicht negativ bewertet.

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt


© 2003 - 2010 DIAS GmbH | Impressum | letzte Änderung 10.08.2006

nach oben