Webseitenstruktur

Alle Webseiten haben eine sichtbare Struktur, die für Sehende visuell als verschiedene Seitenbereiche wahrgenommen, unterschieden und als solche erkennbar sind. Sie sehen durch Überschriften und Spalten, Kästen oder Trennlinien was zusammengehört und können somit den Inhalt leicht überblicken. Das erleichtert den Zugriff auf die gesuchte Information.

Für Nutzende von assistiven Technologien gilt dies nicht. Für sie muss der Seitenaufbau unabhängig von der Darstellung deutlich werden. Überschriften-Elemente unterstützen dabei den Seiteninhalt zu strukturieren. Absätze und Texthervorhebungen mit geeigneten Strukturelementen erleichtern die Handhabung und das Verständnis des Inhalts. Darüber hinaus sind diese Nutzenden auf programmatisch ermittelbare Bereichsauszeichnungen angewiesen. Das können Bereichsüberschriften, Sprunglinks (Skip-Links oder Anker) zu einzelnen Seitenbereichen, HTML5-Elemente für Regionen bzw. WAI-ARIA document landmarks sein.

Oft werden die Überschriften nicht richtig deklariert, deutlich sichtbare Überschriften werden nicht mit HTML-Strukturelementen ausgezeichnet. Außerdem werden die Ebenen der Überschriftenstruktur häufig durcheinandergebracht oder übersprungen. Meistens werden Überschriften aus visuellen Gründen ausgewählt und die inhaltliche Struktur wird dabei nicht berücksichtigt. Dies führt zu einer erschwerten Orientierung und einer schlechten Verständlichkeit. Beispielsweise wird der Überschrift auf Ebene 3 eine Überschrift der Ebene 2 zugeordnet, obwohl sie inhaltlich nicht dazu gehört oder es werden Ebenen übersprungen, so das auf Ebene 1 auf einmal Ebene 5 folgt.

<h3>Überschrift</h3>
   <h2>Überschrift</h2>

<h1>Überschrift</h1>
   <h5>Überschrift</h5>

Ein weiteres Problem ist die mangelhafte Auszeichnung der Bereiche und Regionen. Der Kopfbereich (header) und der Fußbereich (Footer) sind gekennzeichnet, der Hauptbereich (main) aber nicht. Bei mehreren Navigations-Bereichen wird keine Unterscheidung vorgenommen. Sie werden alle nur mit Navigation (nav) gekennzeichnet. Dabei sind das meist das Hauptmenü und das Seitenmenü oder der Brotkrummenpfad (breadcrumb).

• 9.1.3.1 Info und Beziehungen
• 9.2.4.1 Blöcke überspringen

Eine technische Ursache kann die Benutzung von Content Management Systemen sein, die eine korrekte Setzung von Bereichsüberschriften oder die Deklarierung von Bereichen oder Regionen reglementieren bzw. verhindern.

Die eigentliche Ursache ist aber keine technische, sondern eher eine menschliche. Mangelndes Wissen um die programmatische Auszeichnung von Überschriftenstrukturen und einzelnen Seitenbereichen führt zu eben jenen Problemen, die hier aufgeführt sind.

Um eine schnelle Navigation auf einem Webauftritt zu gewährleisten sind für Personen mit oder ohne Hilfsmittel unterschiedliche Voraussetzung erforderlich. So sind zum Beispiel Tastaturnutzer ohne Hilfsmittel zwingend auf Sprunglinks angewiesen, wenn der Webauftritt eine besonders hohe Anzahl an Bedienelementen enthält. Weitere Möglichkeiten sind:

• Es werden sinnvolle Bereichsüberschriften mit den HTML-Strukturelementen h1 - h6 eingesetzt (auch visuell versteckte Überschriften sind möglich).
• Es sind Sprunglinks vorhanden, mit denen zu den verschiedenen Seitenbereichen gesprungen werden kann.
• HTML5 Elemente zur Auszeichnung von Bereichen (z. B. header, nav, main, aside, footer) erschließen den Seitenaufbau sinnvoll.
• Bei Verwendung von mehreren nav-Strukturelementen sind diese mit einer eindeutigen Bezeichnung mit Hilfe von z.B.: aria-label ausgezeichnet. Dabei ist der Name des Bereichs nicht Teil der Bezeichnung.
• WAI-ARIA document landmarks (z. B. role=“navigation“, role=“main“, role=“search“) strukturieren die Seitenbereiche sinnvoll, sofern keine HTML5-Elemente verwendet wurden.
• iFrames verfügen über ein title-Attribut mit einer sinnvollen, kurzen Beschreibung zum Inhalt.

Es wird empfohlen die genannten Möglichkeiten zu nutzen um einen gut strukturierten Webauftritt für alle Nutzende gleichermaßen bereitzustellen.

• WebAIM: Semantische Struktur
• Überschriften-Tags
• W3C: Seitenstruktur Tutorial
• W3C: ARIA Authoring Practices Guide

Informationen zu diesem Artikel

Datum:

8.03.2023

Lizenz:

CC-BY-SA 4.0

Version:

1.0

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!