Techniken für WCAG 2.0

Zum Inhalt

-

F1: Fehler bei Erfolgskriterium 1.3.2, weil die Bedeutung durch die Positionierung von Informationen mit CSS geändert wird

Anwendbarkeit

Alle Techniken, die CSS unterstützen.

Dieser Fehler bezieht sich auf:

Beschreibung

Dies beschreibt die Fehlersituation, die sich ergibt, wenn CSS statt strukturellem Markup benutzt wird, um das visuelle Layout des Inhalts zu verändern und wenn das veränderte Layout die Bedeutung des Inhalts verändert. Durch die Benutzung der Positionierungs-Eigenschaften von CSS2 können Inhalte an jeder Position im Ansichtsfenster des Benutzers angezeigt werden. Die Reihenfolge, in der Elemente auf dem Bildschirm erscheinen, kann anders sein als die Reihenfolge, in der man sie im Quelldokument findet. Assistierende Techniken verlassen sich auf den Quellcode oder eine andere durch Software bestimmte Reihenfolge, um den Inhalt in der korrekten Abfolge zu rendern. Daher ist es wichtig, dass man sich nicht auf CSS verlässt, um Inhalte visuell in einer bestimmten Reihenfolge zu positionieren, wenn diese Reihenfolge in einer Bedeutung resultiert, die sich von der durch Software bestimmten Lesereihenfolge unterscheidet.

Beispiele

Fehler-Beispiel 1

Das folgende Beispiel zeigt, wie CSS unsachgemäß benutzt wurde, um eine Reihe von Spalten zu erstellen. Darüber hinaus erscheint der Text im Browser visuell in einer anderen Reihenfolge als im Markup.

In diesem Beispiel wurde eine Klasse für jedes Objekt, das positioniert wird, definiert. Wenn Stylesheets angewendet werden, erscheint der Text in zwei Spalten. Elemente der Klasse „menu1“ (Products) und „menu2“ (Locations) erscheinen als Spaltenüberschriften. „Telephones“, „Computers“ und „Portable MP3 Players“ werden unter 'Products' und „Idaho“ und „Wisconsin“ werden unter 'Locations' aufgelistet (beachten Sie die unterschiedliche Reihenfolge von Idaho und Wisconsin in der Reihenfolge im Quellcode).

Da keine passenden strukturellen Elemente benutzt wurden erscheint der gesamte Text, wenn Stylesheets nicht angewendet werden, in einer Zeile in der Quellreihenfolge, „Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho.“

Hier ist der HTML-Inhalt:

Code-Beispiel:

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

Hier sind ein paar Styles für den oben genannten Inhalt:

Code-Beispiel:

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

Eine bessere Lösung für diesen Inhalt wäre es, bedeutungsvollere Elemente zu benutzen, wie zum Beispiel eine Tabelle oder eine Definitionsliste.

Ressourcen

Es gibt für diese Technik keine Ressourcen.

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 Lesereihenfolge des Inhalts korrekt ist und ob die Bedeutung des Inhalts beibehalten wird.

Erwartete Ergebnisse