Dieser Beitrag gehört zur Artikelserie Richtlinien für barrierefreie Webinhalte WCAG 2.0. Er soll die Erfolgskriterien, Bedeutung und Umsetzung der Richtlinie 1.3 Anpassbar darstellen sowie Website Beispiele aufzeigen.

„Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z.B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.“

Erfolgskriterien der Richtlinie 1.3

  • 1.3.1 Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung. (Stufe A)
  • 1.3.2 Bedeutungstragende Reihenfolge: Wenn die Reihenfolge, in der Inhalte präsentiert werden, sich auf deren Bedeutung auswirkt, kann die korrekte Leseabfolge durch Software bestimmt werden. (Stufe A)
  • 1.3.3 Sensorische Eigenschaften: Anweisungen, die für das Verständnis und die Bedienung von Inhalt bereitgestellt werden, stützen sich nicht nur auf sensorische Eigenschaften von Komponenten wie Form, Größe, visuelle Position, Ausrichtung oder Ton. (Stufe A)

Bedeutung der Richtlinie

Die Richtlinie sagt aus, dass Informationen und Strukturen so vorhanden sein sollen, dass sie auch dann erhalten bleiben, wenn sich die Art der Präsentation ändert, also z. B. wenn ein Benutzer sich eine Website durch einen Screenreader vorlesen lässt oder eigene Einstellungen verwendet und dadurch beispielsweise Schriftfarben ändert. Das Erfolgskriterium 1.3.1 wird dann nicht erfüllt, wenn z. B. Überschriften nicht als solche im Quelltext ausgezeichnet, sondern lediglich per CSS-Formatierung größer gestaltet sind. Ein sehender Besucher kann die Strukturierung des Inhalts durch die größer dargestellten Wörter als Überschriften erkennen, ein Screenreader jedoch nicht.

Ein weiteres Erfolgskriterium der Richtlinie 1.3 gibt vor, dass die Reihenfolge der Inhalte sich auch im Quellcode widerspiegeln sollte, wenn sie für die Bedeutung erforderlich ist. Wird mittels CSS eine Positionierung von Inhalten erreicht, die von der Reihenfolge im Quelltext abweicht, kann es zu Verwirrungen und Problemen beim Bedienen der Website kommen. Dies kann dann der Fall sein, wenn beim Bedienen der Seite per Tastatur die Inhalte in unterschiedlicher Reihenfolge angesprungen werden, als sie visuell verfügbar sind, oder beim Vorlesen der Seite durch Screenreader.

Wird auf einer Seite Farbe verwendet zur Hervorhebung von beispielsweise Links, Buttons („Klicken Sie den grünen Button um zu bestellen“) oder Pflichtfeldern in einem Formular, so ist diese Information nicht für alle Besucher erkennbar. Beim Vorlesen durch einen Screenreader oder der Änderung der Farbschemata durch benutzerdefinierte Einstellungen geht diese Information verloren.

Umsetzung der Richtlinie

Um die Richtlinie 1.3 umzusetzen, wird empfohlen, durch Farbe gekennzeichnete Hervorhebungen zusätzlich durch beispielsweise Symbole oder Unterstreichungen (bei Links) zu hinterlegen. Andere Elemente, die nicht verlinkt sind, sollten aus Gründen der besseren Unterscheidung nicht unterstrichen dargestellt werden. Innerhalb der Navigation ist eine Unterstreichung von Links nicht zwingend erforderlich, da es gelernt ist, dass diese Elemente, die in der Regel auf jeder Seite vorhanden sind, verlinkt sind.

Texte können durch entsprechende HTML-Tags derart formatiert werden, dass Überschriften, Listen oder Abschnitte als solche erkannt werden können, auch wenn sich die Art der Präsentation ändert. Erfolgt eine Auszeichnung dieser Elemente nicht durch die dafür gedachten HTML-Tags sondern beispielsweise lediglich eine Formatierung über grafische Bulletpoints mit Zeilenumbrüchen anstelle von <li>-Tags, kann dies von Screenreadern nicht als Liste erkannt werden. Sogenannte Phrase-level-Elemente wie em, abbr und cite können in HTML dazu genutzt werden, um semantische Informationen zur Hervorhebung auszuzeichnen (em) oder Abkürzungen (abbr) und Zitate (cite) zu kennzeichnen. Durch die Verwendung von strong oder em werden Hervorhebungen, durch z. B. einen veränderten Tonfall beim Vorlesen durch Screenreader, ermöglicht.

Die Reihenfolge des Quellcodes sollte einer logischen Reihenfolge entsprechen. Bei der Benutzung eines Screenreaders oder der Tastatur zum Navigieren kann es sonst leicht zu Verwirrungen kommen, wenn die Inhalte zwar visuell sinnvoll platziert sind, aber im Quellcode beispielsweise getrennt voneinander auftauchen.

Layouttabellen per se sind durch die WCAG 2.0 nicht verboten, allerdings widerspricht ihre Nutzung der Trennung von Layout und Inhalt.

Beispiele zur Richtlinie

Ein Beispiel für die Hervorhebung durch Farbe haben wir in einem Online-Shop gefunden. Ironischerweise verkauft der Shop Kontaktlinsen, richtet sich also an Menschen, die eine Einschränkung in ihrer Sehfähigkeit haben. Abhilfe könnte in diesem Fall derart geschaffen werden, indem hinter alle Pflichtfelder ein Asterisk platziert wird und die Anmerkung am Formularende angepasst wird: „Pflichtfelder sind rot markiert und mit einem Asterisk (*) gekennzeichnet“. Eine Platzierung dieser Anmerkung sollte sinnvollerweise – nebenbei bemerkt – auch nicht am Seitenende stehen, sondern zu Beginn des Formulars.

Hervorhebung durch Farbe in Formular

Eine Website, die mittels Layouttabellen gestaltet ist, ist unter Umständen beim Vorlesen durch Screenreader in linearisierter Form schwer verständlich. Das nachfolgende Beispiel zeigt einen Online-Shop, der lediglich Tabellen zur Gestaltung des Layouts nutzt und nicht CSS, wie auch in den WCAG empfohlen. Die Tabellenzellen sind farbig hervorgehoben um zu verdeutlichen, wie stark Tabellen auf dieser Seite genutzt werden:

Seitengestaltung durch Layouttabellen, markiert mithilfe Web Developer Toolbar

Hier wäre der Einsatz von HTML-Elementen zur Strukturierung und eine Gestaltung per CSS empfehlenswert. Beispielsweise könnte die Aufzählung der Vorteile im oberen Seitenbereich durch eine Liste (<li>) im HTML ausgezeichnet werden. Die Darstellung der Listenpunkte untereinander würde dann per CSS-Style (display:block;) erfolgen. Ebenso könnten die Seitenbereiche durch DIVs ausgezeichnet und über CSS positioniert werden. In diesen Bereichen sind keine Tabellen erforderlich. Sinnvolle Einsatzmöglichkeiten von Tabellen könnten z. B. die Darstellung von Fahrplänen oder Sportergebnissen als Datentabellen sein.

Die Inhalte und Erfolgskriterien der Richtlinie 1.3 Anpassbar sind in der deutschen Übersetzung nachzulesen unter www.w3.org.

Der nächste Artikel beschäftigt sich mit der WCAG 2.0 Richtlinie 1.4 Unterscheidbar.

Mehr zum Thema: