Techniken für WCAG 2.0

Zum Inhalt

-

C30: Benutzung von CSS, um Text mit Bildern eines Textes zu ersetzen und Bereitstellung von Benutzerschnittstellen-Steuerelementen um zu wechseln

Anwendbarkeit

Alle Techniken, die CSS unterstützen.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es zu zeigen, wie man CSS benutzen kann, um strukturierten HTML-Text durch Bilder von Text ersetzen kann auf eine Art und Weise, die es den Benutzern ermöglicht, Inhalte entsprechend ihrer Vorlieben anzusehen. Um diese Technik anzuwenden, beginnt der Autor damit, eine HTML-Seite zu erstellen, die semantische Elemente benutzt, um die Struktur der Seite auszuzeichnen. Dann entwickelt der Autor zwei oder mehr Stylesheets für diese Seite. Ein Stylesheet stellt den HTML-Text als Text dar und das zweite benutzt CSS-Funktionen, um einen Teil des HTML-Textes durch Bilder von Text zu ersetzen. Schließlich stellt der Autor, durch die Benutzung von server-seitigem oder client-seitigem Scripting, ein Steuerelement zur Verfügung, das es dem Benutzer erlaubt, zwischen den verfügbaren Ansichten zu wechseln.

Diese Technik kann angewendet werden, um Erfolgskriterium 1.4.5 oder 1.4.9 zu erfüllen, wenn eine Präsentation, die keine Bilder von Text enthält, zur Verfügung steht, so lange das Steuerelement der Benutzerschnittstelle, das zur Verfügung gestellt wird, damit Benutzer zu einer alternativen Darstellung wechseln können, die relevanten Kriterien erfüllt. Wenn möglich sollten Autoren die Darstellung, die keine Bilder von Text enthält, als Standard-Darstellung liefern. Darüber hinaus sollte das Steuerelement, das zum Wechseln benutzt wird, in der Nähe des Beginns der Seite platziert sein.

Es wurde eine Vielzahl von „Bild-Austausch“-Techniken entwickelt, um eine Vielzahl an Problemen bei Benutzeragenten, Konfiguration und Kompatibilität mit assistierenden Techniken zu adressieren (lesen Sie in den Ressourcen für weitere Informationen). Obwohl es eine Vielzahl von Vorgehensweisen gibt, die Autoren benutzen können, um Text zu ersetzen, ist es wichtig, die Kompatibilität mit assistierenden Techniken zu berücksichtigen; ob die Technik korrekt arbeitet, wenn Scripting, CSS, Bilder (oder Kombinationen dieser Punkte) abgeschaltet wird. Da es schwierig sein kann, eine einzelne Lösung zu finden, die in allen Fällen funktioniert, empfiehlt diese Technik die Benutzung eines Steuerelementes, das es Benutzern erlaubt, zu einer Darstellung zu wechseln, die keine Bild-Austausch-Technik beinhaltet.

Anmerkung: Diese Technik kann in Kombination mit einer Style-Switching-Technik benutzt werden, um eine Seite darzustellen, die eine konforme Alternativversion für nicht-konformen Inhalt ist. Für weitere Informationen lesen Sie C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen und Konforme Alternativversionen verstehen.

Beispiele

Beispiel 1

Die Site eines Design-Studios benutzt einen Style-Switcher, der es Benutzern erlaubt, zwei Darstellungen ihrer Homepage anzusehen. In der Standard-Version wurde der Überschriften-Text durch Bilder eines Textes ersetzt. Ein Steuerelement auf der Seite erlaubt es Benutzern, zu einer Version zu wechseln, welche die Überschriften als Text darstellt.

Die CSS-Komponente :

Code-Beispiel:

			...
<div id="Header"> 
  <h1><span>Pufferfish Design Studio</span></h1> 
  <h2><span>Surprising Identity and Design Solutions</span></h2> 
  </div> 
...

Das CSS für die Darstellung, die Bilder eines Textes enthält, folgt. Beachten Sie, dass das CSS die Positionierung benutzt, um die Inhalte der Überschriften-Elemente außerhalb des Bildschirms zu platzieren, so dass der Text weiterhin für Benutzer von Screenreadern zur Verfügung steht.

Code-Beispiel:

			...
#Header h1 {
	background-image: url(pufferfish-logo.png);
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	margin-top: 0;
	position: absolute;
	}
#Header h1 span {
	position: absolute;
        left: -999em;
	}
#Header h2 {
	background-image: url(beauty.png);
	background-repeat: no-repeat;
	height: 234px;
	width: 33px;
	margin-left: 8px;
	position: absolute;
	margin-top: 250px;
	}
#Header h2 span {
	position: absolute;
        left: -999em;
	}
	

Das CSS für die Darstellung, die keine Bilder von Text enthält.

Code-Beispiel:

			...
#Header h1 {
	font: normal 200%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #000099;
	background: #ffffff;
	}

#Header h2 {
	font: normal 160%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #336600;
	background: #ffffff;
	}

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob die Webseite eine Steuerelement enthält, das es Benutzern erlaubt, eine alternative Darstellung auszuwählen.

  2. Prüfen Sie, ob, wenn das Steuerelement aktiviert wird, die sich daraus ergebende Seite Text (durch Software bestimmten Text) an all den Stellen, an denen Bilder von Text benutzt worden waren, enthält.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.