2.1.2 Strukturieren Sie die Seite optisch und semantisch

Hintergrund

Webshops weisen häufig eine deutlich komplexere Struktur und eine größere Vielfalt an Informationen und Seitenelementen als reine Informationswebsites auf. Für BenutzerInnen ist es wesentlich, dass

  • nicht zusammengehörige Elemente (z.B. der Warenkorb und Kundenempfehlungen) auch klar von einander unterscheidbar sind, und
  • primäre Inhalte deutlich gegenüber sekundären hervorgehoben werden.

Die Strukturierung muss sich einerseits im visuellen Design und andererseits in der Struktur des HTML-Codes (semantische Strukturierung) widerspiegeln, um allen Benutzergruppen zu genügen.

Maßnahmen

  • Visuelle Strukturierung: trennen Sie Seitenelemente durch ausreichend Whitespace, Linien, Wechsel der Hintergrundfarbe, Kontrastwechsel etc.
  • Visuelle Betonung: heben Sie wesentliche Seitenelemente (z. B. Produktbeschreibung, Suchergebnisse) von sekundären Inhalten (z. B. Empfehlungen, ähnliche Produkt) deutlich ab: Schriftgröße, Kontraste, Positionierung im obersten Bereich der Contentspalte, entsprechende Überschriften oder Labels.
  • Semantische Strukturierung: trennen Sie Seitenelemente durch entsprechende HTML-Überschriften (ggf. visuell verborgen durch Hinausschieben aus dem Viewport mittels negativer absoluter Positionierung) oder sonstige strukturierende HTML-Elemente.
  • Semantische Betonung: positionieren Sie wesentliche Inhalte im Code vor sekundären Elementen. Ordnen Sie solchen Elementen ggf. höhere Überschriftenebenen zu. Machen Sie die Bedeutung solcher Seitenelemente in den optisch verborgenen Überschriften deutlich. Blinde Menschen orientieren sich besser auf Seiten, die mit Überschriften strukturiert sind. Sie können diese direkt anspringen und sich so einen schnellen Überblick verschaffen.
  • Positionieren Sie wesentliche Inhalte immer optisch und im Code an gleicher Stelle, dass Sie leichter wieder aufgefunden werden können.
  • Positionieren Sie zusammengehörige Informationen nicht nur visuell im Kontext sondern achten Sie auch im HTML-Code auf eine sinnvolle Abfolge der Inhalte. Die Linearisierbarkeit lässt sich durch Abschalten von CSS oder einen Screenreader-Emulator (z.B. Webformator, Fangs) einfach überprüfen.

Wer profitiert davon

  • Alle BenutzerInnen
  • BenutzerInnen mit Sehbehinderungen
  • Screenreader-NutzerInnen
  • NutzerInnen von Zoom-Software

Beispiele

Amazon klicken aus Neugier

amazon.de: Amazon liefert bei jedem Produkt über die Produktbeschreibung hinaus sehr viel Zusatzinformation, z.B. Empfehlungen, was andere NutzerInnen gekauft haben, Produktdetailinformation, Bewertungen... Die Information ist aber relativ gut strukturiert, wenn auch im Quellcode – in der semantischen Struktur – noch Optimierungsmöglichkeiten bestehen. Sie ist nach Wichtigkeit gereiht, d.h. wer die weitere Information nicht benötigt, muss nicht weiter nach unten scrollen. Die orangen Überschriften weisen nicht ganz ausreichende Kontrastwerte auf und sind daher nicht deutlich genug. Ein Proband bei unseren User-Tests übersah die Zwischenüberschriften und hielt die Thumbnail Bilder für seine Suchergebnisse statt diese als zusätzliche Empfehlungen zu identifizieren.

Hausfreund Braillezeilen Webformatoransicht

hausfreund.at: Die Ansicht im Webformator, einem Textbrowser, der dem Screenreader Virgo vorgeschalten wird, zeigt, dass die Seite linear aufgebaut und gut strukturiert ist.