Techniken für WCAG 2.0

Zum Inhalt

-

F2: Fehler bei Erfolgskriterium 1.3.1, weil Änderungen bei der Darstellung von Text benutzt werden, um Informationen zu vermitteln, ohne dass das geeignete Markup oder der passende Text benutzt wird.

Anwendbarkeit

Alle Techniken, die Bilder oder Darstellungsmarkup unterstützen.

Dieser Fehler bezieht sich auf:

Beschreibung

Dieses Dokument beschreibt einen Fehler der auftritt, wenn eine Änderung in der Erscheinung des Textes eine Bedeutung vermittelt, ohne dass das entsprechende semantische Markup benutzt wird. Dieser Fehler gilt auch für Bilder eines Textes, die nicht in dem entsprechenden semantischen Markup eingeschlossen sind.

Beispiele

Fehler-Beispiel 1: Benutzung von CSS, um das p-Element so zu formatieren, dass es wie eine Überschrift aussieht

Der Autor beabsichtigte, eine Überschrift zu machen, wollte aber nicht das Aussehen der Standard-HTML-Überschrift. Also hat er CSS benutzt, um das p-Element so zu formatieren, dass es wie eine Überschrift aussieht und hat es Überschrift genannt. Aber er hat es versäumt, das richtige HTML-Heading-Element zu benutzen. Daher konnte die assistierende Technik es nicht als Überschrift erkennen.

Code-Beispiel:

				 <style type="text/css">
 .heading1{
        font-family: Times, serif;
        font-size:200%;
        font-weight:bold;
 }
 </style>

 <p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this 
 ........
 </p>

Anmerkung: In diesem Fall wäre es die korrekte Vorgehensweise, CSS zu benutzen, um das H1-Element in HTML zu formatieren.

Fehler-Beispiel 2: Bilder eines Textes, die als Überschrift benutzt werden, wo die Bilder nicht mit heading-Tags ausgezeichnet sind

Chapter1.gif ist ein Bild der Worte „Chapter One“ in Zeichensatz Garamond der Größe 20 Pixel. Dies ist ein Fehler, da das img-Element mindestens innerhalb eines header-Elements eingeschlossen sein sollte. Es wäre eine bessere Lösung, das Bild zu eliminieren und den Text innerhalb eines header-Elements einzuschließen, das mit CSS formatiert wird.

Code-Beispiel:

				<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>

Fehler-Beispiel 3: Benutzung von CSS, um eine Phrase oder ein Wort visuell hervorzuheben, ohne diese Betonung semantisch zu vermitteln

Das folgende Beispiel fällt durch, da die Informationen, die durch die Benutzung des CSS font-weight-Property zur Änderung in eine Fettschrift vermittelt werden, nicht durch semantisches Markup vermittelt werden oder explizit im Text dargelegt werden.

Hier ist eine CSS-Klasse, um fett festzulegen:

Code-Beispiel:

				.yell {
  font-weight:bold;
  text-transform: uppercase;
}

Und hier ist das entsprechende HTML:

Code-Beispiel:

				<p>
 "I said, <span class="yell">no</span>, not before dinner!", 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
 </p>

Ressourcen

Es gibt für diese Technik keine Ressourcen.

Tests

Vorgehensweise

  1. Für Bilder eines Textes:

    1. Prüfen Sie, ob irgendwelche Bilder eines Textes benutzt werden, um strukturelle Informationen des Dokumentes zu vermitteln.

    2. Prüfen Sie, ob die richtige semantische Struktur (z.B. HTML-Überschriften) mit dem Text benutzt wird, um die Information zu vermitteln.

  2. Für formatierten Text, der Informationen vermittelt:

    1. Prüfen sie, ob es irgendwelchen formatierten Text gibt, der strukturelle Informationen vermittelt.

    2. Prüfen Sie, ob, zusätzlich zur Formatierung, die richtige semantische Struktur mit dem Text benutzt wird, um die Information zu vermitteln.

Erwartete Ergebnisse