Techniken für WCAG 2.0

Zum Inhalt

-

G179: Sicherstellen, dass es keinen Verlust von Inhalt oder Funktionalität gibt, wenn sich die Größe des Textes ändert ohne dass sich die Größe des Containers ändert

Anwendbarkeit

Alle Techniken, die Text neu umbrechen, wenn Fenster in der Größe verändert werden.

Die Technik bezieht sich auf:

Beschreibung

Einige Benutzeragenten unterstützen die Änderung der Textgröße ohne andere Dimensionen des Textcontainers zu verändern. Wenn der Text über den zugeordneten Platz hinausgeht, dann kann dies zum Verlust von Inhalten oder Funktionalitäten führen. Die Layout-Eigenschaften können aber eine Möglichkeit bieten, Inhalte effektiv darzustellen. Die Blockgrößen können breit genug definiert werden, so dass der Text nicht überläuft, wenn er um 200 % in der Größe verändert wird. Text kann umbrechen, wenn er nicht länger in den Block passt und der Block kann hoch genug sein, damit der gesamte Text weiterhin in den Block passt. Der Block kann Scrollbalken zur Verfügung stellen, wenn der in der Größe veränderte Text nicht länger hinein passt.

Beispiele

Beispiel 1: Ein Seitenlayout mit mehreren Spalten

HTML und CSS werden benutzt, um ein zweispaltiges Layout für eine Seite mit Text zu erstellen. Die Benutzung des Standardwertes des white-space-Property normal führt dazu, dass der Text umbricht. Während also die Textgröße auf 200 % vergrößert wird, umbricht der Text neu und die Textspalte wird länger. Wenn die Spalte für das Ansichtsfenster zu lang ist, dann stellt der Benutzeragent Scrollbalken zur Verfügung, so dass der Benutzer scrollen kann, um den Text sehen zu können, denn der Autor hat die CSS-Regel overflow:scroll oder overflow:auto angegeben.

Beispiel 2

Ein Zeitungslayout mit Textblöcken in Spalten. Die Blöcke haben eine festgelegte Breite, aber keine bestimmte Höhe. Wenn der Text im Browser in der Größe verändert wird, umbricht der Text und die Blöcke werden höher.

Beispiel 3: Relative Text- und Container-Größen durch die Benutzung von Prozent- und em-Einheiten

Die Benutzung relativer Größen sowohl bei Text als auch bei Containern ermöglicht es, dass der Container wächst, um den Text aufzunehmen, ohne dass etwas abgeschnitten wird. Dieses Bild zeigt den Text unter Benutzung der „normalen“ Schriftgröße im Internet Explorer. Die graue Box ist der div-Container.

Screenshot von relativen Einheiten mit normaler Textgröße.

Dieses Bild zeigt den gleichen Text und Container unter Benutzung der „größten“ Schriftgröße im Internet Explorer. Der graue Container ist gewachsen, um den größeren Text aufnehmen zu können.

Screenshot der relativen Größenbestimmung mit größter Textgröße.

Code-Beispiel:

			<style type="text/css">
  div { background-color:#ccc; line-height:120%; position:relative; }
  div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>

<div class="RelativeRelative">
  Now is the time for all good men to come to the aid of their country.
</div>

Tests

Vorgehensweise

  1. Vergrößern Sie die Textgröße auf 200%.

  2. Prüfen Sie, ob jeglicher Inhalt und alle Funktionen zur Verfügung stehen

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.