Techniken für WCAG 2.0

Zum Inhalt

-

C6: Positionierung von Inhalten basierend auf strukturellem Markup

Anwendbarkeit

Alle Techniken, die CSS unterstützen

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es zu zeigen, wie die visuelle Erscheinung über Stylesheets verbessert werden kann, während gleichzeitig eine bedeutungstragende Darstellung beibehalten wird, wenn die Stylesheets nicht angewendet werden. Durch die Benutzung der Positionierungs-Eigenschaften von CSS2 können Inhalte an jeder Position im Ansichtsfenster des Benutzers angezeigt werden. Die Benutzung struktureller Elemente stellt sicher, dass die Bedeutung des Inhalts immer noch bestimmt werden kann, auch wenn die Formatierung nicht zur Verfügung steht.

Beispiele

Beispiel 1

In diesem Beispiel wurde strukturelles Markup (definition lists) auf den Inhalt angewendet. CSS wurde benutzt, um den Inhalt in Spaltenform zu formatieren. Jede Klasse positioniert den Inhalt in Spalten und die Ränder wurden auf 0 gesetzt, um das Standardverhalten von Benutzeragenten, HTML-Definitionslisten mit einem eingerückten DD-Element anzuzeigen, außer Kraft zu setzen.

Hier ist der anzuzeigende Inhalt:

Code-Beispiel:

			 <div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
 </div>

Hier ist das CSS, das die oben genannten Elemente positioniert und formatiert:

Code-Beispiel:

			 .item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }
			

Wenn Stylesheets angewendet werden, dann werden die Daten in den zwei Spalten „Products“ und „Locations angezeigt.“ Wenn die Stylesheets nicht angewendet werden, dann erscheint der Text in einer Definitionsliste, die Struktur und Lesereihenfolge beibehält.

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

Für Inhalt, der CSS zur Positionierung benutzt

  1. Entfernen Sie die Formatierungs-Informationen aus dem Dokument oder schalten Sie im Benutzeragenten die Benutzung von Stylesheets aus.

  2. Prüfen Sie, ob die strukturellen Beziehungen und die Bedeutung des Inhalts erhalten bleiben.

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.