Techniken für WCAG 2.0

Zum Inhalt

-

F3: Fehler bei Erfolgskriterium 1.1.1, weil CSS benutzt wird, um Bilder einzuschließen, die wichtige Informationen enthalten

Anwendbarkeit

Alle Techniken, die CSS unterstützen.

Dieser Fehler bezieht sich auf:

Beschreibung

Das CSS background-image-Property stellt eine Möglichkeit zur Verfügung, um Bilder mit CSS in das Dokument aufzunehmen ohne irgendeine Referenz im HTML-Code. Das CSS background-image-Property wurde für dekorative Zwecke entworfen und es ist nicht möglich, Textalternativen mit Bildern zu verknüpfen, die per CSS eingebunden wurden. Textalternativen sind für Menschen, die keine Bilder sehen können, die wichtige Informationen vermitteln, notwendig. Daher ist es ein Fehler, dieses Property zu benutzen, um Bilder hinzuzufügen, damit diese wichtige Informationen vermitteln.

Anmerkung: Das Einbetten von Informationen in ein Hintergrundbild kann auch bei Menschen, die alternative Hintergründe benutzen, um die Lesbarkeit zu erhöhen und bei Benutzern des Modus 'hoher Kontrast' in manchen Betriebssystemen zu Problemen führen. Diese Benutzer würden die Informationen im Hintergrundbild verlieren, aufgrund des Fehlens irgendeines alternativen Textes.

Beispiele

Fehler-Beispiel 1

Im folgenden Beispiel ist ein Teil des Inhalts in einem Bild enthalten, das durch CSS alleine präsentiert wird. In diesem Beispiel ist das Bild TopRate.png ein 180 x 200 Pixel großes Bild, das den Text „19.3% APR Typical Variable“ enthält.

Code-Beispiel:

				 Das CSS enthält: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

Es wird in diesem Auszug benutzt:

Code-Beispiel:

				
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>

Fehler-Beispiel 2

Ein Buch-Lieferant benutzt Hintergrundbilder, um Symbole einer Liste mit Buchtiteln gegenüber zu stellen um damit zu kennzeichnen, ob sie neu, limitiert, auf Lager oder vergriffen sind.

Das CSS enthält:

Code-Beispiel:

				ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}

ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}

ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

Es wird in diesem Auszug benutzt:

Code-Beispiel:

				<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Ressourcen

Es gibt für diese Technik keine Ressourcen.

Tests

Vorgehensweise

  1. Untersuchen Sie alle Bilder, die per CSS dem Inhalt hinzugefügt werden.

  2. Prüfen sie, ob die Bilder keine wichtigen Informationen vermitteln.

  3. Wenn ein Bild wichtige Informationen vermittelt, dann werden die Informationen assistierenden Techniken zur Verfügung gestellt sie sind auch verfügbar, wenn wenn das CSS-Bild nicht angezeigt wird.

Erwartete Ergebnisse