Techniken für WCAG 2.0

Zum Inhalt

-

G146: Benutzung eines fließenden Layouts

Anwendbarkeit

Gilt für alle Techniken.

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, in der Lage zu sein, Inhalte ohne Einführung eines horizontalen Scrollbalkens darzustellen, indem Layout-Techniken benutzt werde, die sich dem verfügbaren, horizontalen Platz anpassen. Flüssige Layouts definieren Layoutbereiche, die sich sowohl mit dem Text in der Größe verändern, als auch bei Bedarf neu umbrechen, um den Bereich auf dem Bildschirm darzustellen. Obwohl das exakte Layout daher variiert, bleibt die Beziehung der Elemente und die Lesereihenfolge gleich. Dies ist eine effektive Möglichkeit zur Erstellung von Designs, die sich auf unterschiedlichen Geräten und bei Benutzern mit unterschiedlichen Vorlieben in Bezug auf die Schriftgröße gut darstellen lassen.

Die Grundprinzipien von flüssigen Layouts sind:

  1. Definition der Größe von Layoutbereichen mit Benutzung von Einheiten, die dazu führen, dass der Bereich relativ zum Text skaliert, so dass diese Bereiche sich so vergrößern oder verkleinern wie der Text vergrößert oder verkleinert wird;

  2. Positionierung der Layoutbereiche als eine Reihe von benachbarten, fließenden Feldern, die nach Bedarf in neue Reihen umbrechen; und zwar in der Art wie Worte bei Umbrüchen innerhalb eines Absatzes.

Komplexe, flüssige Layouts kann man erreichen, indem man Layoutbereiche verschachtelt und dadurch räumlich begrenzte, flüssige Layouts innerhalb eines größeren flüssigen Layouts erstellt. Sogar einfache, flüssige Layouts erfordern Design-Finesse, um gut aussehende Ergebnisse in einem großen Bereich von Textgrößen zu erhalten, aber gut gestaltete, flüssige Layouts können das wirkungsvollste Seitendesign sein.

Beispiele

Beispiel 1: Einfaches, flüssiges Layout in HTML und CSS

Das folgende recht einfache Beispiel nutzt HTML und CSS, um ein flüssiges Layout zu erstellen. Die drei Spalten gleichen ihre Größe so an wie die Textgröße verstellt wird. Wenn die horizontale Breite über die verfügbare Breite der Spalten hinausgeht, dann umbricht die letzte Spalte, so dass sie unter statt neben der vorhergehenden Spalte positioniert wird. Die Schriftgröße kann so lange vergrößert werden, ohne dass etwas abgeschnitten oder horizontales Scrollen eingeführt wird, bis das längste Wort nicht mehr in die Spalte passt. Dieses spezielle Beispiel nutzt Prozentgrößen für die Spalten und definiert sie als fließende Bereiche, indem die Eigenschaft "float" benutzt wird.

Code-Beispiel:

			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example of Basic Liquid Layout</title>
<style type="text/css">

.column
	{
	border-left: 1px solid green;
	padding-left:1%;
	float: left;
	width: 32%;
	}
#footer
	{
	border-top: 1px solid green;
	clear: both;
	}
</style>

</head>
<body>
   <h1>WCAG-Beispiel</h1>
   <h2>Text in drei Spalten</h2>
      <div title="column one" class="column">
        <h3>Block 1</h3>
        <p> Das Ziel dieser Technik ist es, in der Lage zu sein, Inhalte  
            ohne Einführung eines horizontalen Scrollbalkens darzustellen, indem Layout-  
            Techniken benutzt werden, die sich dem verfügbaren, horizontalen Platz anpassen.
        </p>
      </div>

      <div title="column two" class="column">
        <h3>Block 2</h3>
        <p> Dies ist ein sehr einfaches Beispiel eines Seiten-Layouts, das sich anpasst, wenn
            sich die Textgröße ändert.
        </p>
      </div>

      <div title="column three" class="column">
      <h3>Block 3</h3>
        <p> Für Techniken, die komplexere Seitenlayouts unterstützen, siehe 
            die unten aufgeführten Ressourcen. 
        </p>
      </div>

      <p id="footer">Footer text</p>
</body>
</html> 

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Lassen Sie Inhalt in einem Benutzeragenten anzeigen

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

  3. Prüfen Sie, ob jeglicher Inhalt und alle Funktionen ohne horizontales Scrollen 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.