Techniken für WCAG 2.0

Zum Inhalt

-

F24: Fehler bei Erfolgskriterium 1.4.3, 1.4.6 und 1.4.8, weil Vordergrundfarben festgelegt werden, ohne dass Hintergrundfarben bestimmt werden oder andersherum

Anwendbarkeit

Alle Techniken, die es Benutzeragenten erlauben, Vorder- und Hintergrundfarbe durch persönliche Stylesheets oder mit anderen Mitteln zu steuern.

Dieser Fehler bezieht sich auf:

Beschreibung

Benutzer mit Verlust des Sehvermögens oder mit kognitiven-, Sprach- und Lernbehinderungen ziehen oft bestimmte Vorder- und Hintergrundfarbkombinationen vor. In manchen Fällen finden es Individuen mit niedrigem Sehvermögen sehr viel leichter, eine Webseite zu sehen, die weißen Text auf einem schwarzen Hintergrund hat und es kann sein, dass sie ihren Benutzeragenten so eingestellt, dass dieser Kontrast gezeigt wird. Viele Benutzeragenten ermöglichen es Autoren, eine Präferenz zu der Vorder- und Hintergrundfarbe, die sie gerne sehen wollen, zu wählen, ohne alle vom Autor festgelegten Formatierungen außer Kraft zu setzen. Dies ermöglicht es Benutzern, Seiten anzusehen, auf denen Farben nicht in ihrer bevorzugten Farbkombination vom Autor festgelegt wurden.

Außer der Autor legt sowohl Vorder- als auch Hintergrundfarben fest, kann er (der Autor) nicht länger garantieren, dass der Benutzer einen Kontrast erhält, der die Kontrastanforderungen erfüllt. Wenn der Autor zum Beispiel festlegt, dass der Text grau sein sollte, dann kann dies die Einstellungen des Benutzeragenten außer Kraft setzen und eine Seite rendern, die einen grauen Text (vom Autor festgelegt) auf einem hellgrauen Hintergrund hat (der vom Benutzer in seinem Benutzeragenten festgelegt wurde). Dieses Prinzip funktioniert auch umgekehrt. Wenn der Autor es erzwingt, dass der Hintergrund weiß ist, dann könnte der vom Autor festgelegte weiße Hintergrund eine ähnliche Farbe haben, wie die vom Benutzer in den Einstellungen seines Benutzeragenten zum Ausdruck gebrachte Vorliebe bei der Textfarbe, so dass die Seite dann für den Benutzer unbrauchbar gerendert wird. Da ein Autor nicht vorhersagen kann, wie ein Benutzer seine Einstellungen konfiguriert haben könnte, sollte der Autor, wenn er eine Vordergrund-Textfarbe festlegt, auch eine Hintergrundfarbe festlegen, die einen ausreichenden Kontrast zum Vordergrund hat und andersum.

Es ist nicht notwendig, dass die Vorder- und Hintergrundfarben beide mit der gleichen CSS-Regel definiert werden. Da CSS-Farb-Properties von Ancestor-Elementen erben, ist es ausreichend, wenn sowohl Vorder- als auch Hintergrundfarben entweder direkt oder durch Vererbung definiert werden zu dem Zeitpunkt, zu dem die Farbe auf ein bestimmtes Element angewendet wird.

Anmerkung: Best Practice ist es, alle Zustände des Textes einzubeziehen. Zum Beispiel Text, Linktext, Text von besuchten Links, Linktext mit 'hover' und Tastaturfokus usw.

Beispiele

Fehlerbeispiel 1: Festlegung von lediglich der Hintergrundfarbe mit bgcolor in HTML

Im unten stehenden Beispiel wird die Hintergrundfarbe auf dem body-Element definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.

Code-Beispiel:

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

Fehlerbeispiel 2: Festlegung von lediglich der Vordergrundfarbe mit color in HTML

Im unten stehenden Beispiel wird die Vordergrundfarbe auf dem body-Element definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.

Code-Beispiel:

				 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>

Fehlerbeispiel 3: Festlegung von lediglich der Hintergrundfarbe mit CSS

Im unten stehenden Beispiel wird die Hintergrundfarbe im CSS-Stylesheet definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.

Code-Beispiel:

				  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Fehlerbeispiel 4: Festlegung von lediglich der Vordergrundfarbe mit CSS

Im unten stehenden Beispiel wird die Vordergrundfarbe im CSS-Stylesheet definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.

Code-Beispiel:

				 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

Fehlerbeispiel 5: Festlegung der Vordergrundfarbe von Linktext mit CSS

Im unten stehenden Beispiel wird die Linktext- (Vordergrund-) Farbe auf dem body-Element definiert. Die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.

Code-Beispiel:

				  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Untersuchen Sie den Code der Webseite.

  2. Prüfen Sie, ob es eine vom Autor festgelegte Vordergrundfarbe gibt

  3. Prüfen Sie, ob es eine vom Autor festgelegte Hintergrundfarbe gibt

Anmerkung 1: Farbe und Hintergrundfarbe können auf jeder Ebene in der Kaskade (Cascade) der vorhergehenden Selektoren festgelegt werden, durch externe Stylesheets oder durch Vererbungsregeln.

Anmerkung 2: Die Hintergrundfarbe kann auch festgelegt werden, indem man ein Hintergrundbild mit dem CSS-Property 'background-image' oder mit dem CSS-Property 'background' (mit dem URI des Bildes, z.B. 'background: url("images/bg.gif")') benutzt. Auch bei Hintergrundbildern ist es notwendig, eine Hintergrundfarbe festzulegen, da es sein kann, dass Benutzer Bilder in ihrem Browser abgeschaltet haben. Aber das Hintergrundbild und die Hintergrundfarbe müssen geprüft werden.

Erwartete Ergebnisse

Wenn Schritt #2 wahr ist, Schritt #3 aber falsch ist ODER wenn Schritt #3 wahr ist aber Schritt #2 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert an diesen Erfolgskriterien.