Position innerhalb des Webauftritts
Breadcrumbs & Co

Terminologie

WCAG

In den WCAG wird im Erfolgskriterium 2.4.8 für eine Komponente mit verlinkten Bezügen innerhalb des Webauftritts der Ausdruck „Location“ verwendet. Der englische Ausdruck „Location" wird in der offiziellen Übersetzung des Erfolgskriteriums 2.4.8 mit dem deutschsprachigen Ausdruck „Position“ übersetzt. Die Ausdrücke „Position“ oder „Positionsangabe“ sollten daher zur Beschriftung von Breadcrumbs oder Ähnlichem verwendet werden.

Ausdrücke wie „Breadcrumbs“, „Lokation“ , „Brotkrümel“, „Standort“ oder „Pfadnavigation scheinen hingegen ungeeignet. Sie weisen im Hinblick auf die WCAG-Terminologie Nachteile durch potenzielle Missverständlichkeit, wegen des Sprachwechsels oder deren Länge auf. (Erfolgskriterium 2.4.6 Überschriften und Beschriftungen)

Arten von Positionsangaben

Breadcrumbs

Bei der Auswahl von Fachausdrücken wird auch schon einmal auf die Märchenwelt zugegriffen. Hänsel hat auf seinem Weg mit Gretel Brotkrümel auf dem Weg fallen lassen, um wieder zurückzufinden. Im Webdesign sollen Breadcrumbs den hierarchischen Weg von der Startseite über untergeordnete Kapitel bis zur aktuellen Seite verdeutlichen. Auf diese Weise wird eine hierarchisch vertikale Navigation innerhalb eines Webauftritts bereitgestellt.

Elternangabe

Der relevanteste Kontext innerhalb eines Webauftritts ist meist die thematisch übergeordnete Seite. Sie soll hier einmal „Elternseite“ heißen. Insbesondere bei der Darstellung von Positionsangaben auf dem Smart Phone wird vielfach lediglich zum übergeordneten Themenbereich verlinkt.

Geschwisteseiten

Strukturierte Verlinkungen zu verwandten Webseiten innerhalb des übergeordneten Themenbereichs sind gelegentlich zweckmäßig. Insbesondere in verzweigten Schulungsanleitungen sind etwa Hinweise zu vorherigen und nächsten Themen hilftreich. Sie sollen hier einmal "Geschwisterseiten" heißen.

Prozessangaben

Größere Formulare werden zweckmäßig auf mehrere Schritte zur Eingabe aufgegliedert. Abgeschlossene und weiter erforderliche Schritte zum Ausfüllen werden vielfach in einer nummerierten Liste dargestellt. Es kann überlegt werden, später folgende Formularschritte bis zum Abschluss der aktuellen Seite inaktiv zu stellen.

Zur Kennzeichnung des Status für Screen Reader stehen mehrere ARIA-Anweisungen zur Verfügung:

aria-current="step"

Information über den aktuellen Schritt innerhalb von Fortschrittssangaben.

aria-disabled

Indikator für deaktivierten Zustand eines Elements.

wf ARIA-step, inactive

Gemischte Positionsangaben

Die unterschiedlichen Arten von Positionsangaben können auch in Kombination erscheinen. So enthalten die Understanding-Dokumente zu Erfolgskriterien der WAI je einen Link zur übergeordneten Seite mit allen Understanding-Dokumenten, zur zugehörigen Richtlinie, sowie zum vorherigen und nächsten Erfolgskriterium:

Quelle: WCAG | Understanding SC 2.4.8:

Anordnung innerhalb einer Seite

Einbetten in den Hauptinhalt

Positionsangaben werden vielfach oberhalb des Hauptinhalts im Kopfbereich der Seite eingefügt. Dies führt jedoch erfahrungsgemäß zu Problemen im Hinblick auf das Erfolgskriterium 2.4.1 Blöcke umgehen . Darin werden unter anderem Einsprunglinks empfohlen, die zum Überspringen gleichbleibender Inhalte innerhalb eines Webauftritts dienen. Positionsangaben beziehen sich jedoch auf individuelle Inhalte, die innerhalb eines Webauftritts variieren.

Zweckmäßig werden daher die individuellen Positionsangaben zur aktuellen Webseite an den Beginn des Hauptinhalts (<main>) gesetzt. Führt der erste Einsprunglink direkt zum Hauptinhalt, stehen die Positionsangaben bei der Navigation mittels Tabulator unmittelbar zur Verfügung. Bei der Navigation mittels Screen Reader sind Seitenregionen ebenfalls gut erkennbar und navigierbar.

Vor oder nach der Hauptüberschrift?

Positionsangaben gehören also bevorzugt in den Hauptinhalt. Sollen sie dort aber unter der Hauptüberschrift erscheinen, oder doch vor ihr? Folgende Überlegungen können bei der Beantwortung dieser Frage getroffen werden:

• Es kann verwirren, wenn unter der Hauptüberschrift erst einmal Informationen über die Struktur des Webauftritts erscheinen.
• Die Anordnung von Positionsangaben vor oder nach der Hauptüberschrift kann auch auf lernpsychologischen Überlegungen basieren, die ins philosophische gehen: Lernen wir vom Allgemeinen zum Einzelnen oder umgekehrt?

Auf Zweiter Blick erscheinen Positionsangaben vor der Hauptüberschrift.

Code für die Anordnung

Die Einbettung von Positionsangaben sieht daher für eine Unterseite im Code etwa folgendermaßen aus:

<body>
  <a href="#main" >
    Hauptinhalt
  </a>
  <header>
    [Gleichbleibender Kopfbereich
  </header>]
  <main id="main">
    [Positionsangaben]
    <h1>Seitenüberschrift<>/h1>

Feldrecherche zur Anordnung innerhalb einer Seite

Wie machen es vorbildhafte und bekannte Webauftritte?

WebAIM (Stand Jänner 2025)

Die Positionsangaben werden unter der Hauptüberschrift und vor dem Inhaltsverzeichnis eingebettet.

Beispiel: Links and Hypertext

Web Content Accessibility Guidelines (WCAG)

Die WAI interpretiert de facto „wiederholten Inhalt“ aus dem Erfolgskriterium 2.4.1 nicht als exakt gleichbleibendem Code. Der Einsprunglink führt direkt zur Hauptüberschrift, oberhalb dessen sich Positionsangaben und ein Inhaltsverzeichnis befinden, die sich seitenspezifisch ändern.

Beispiel: Understanding SC 2.4.1: Bypass Blocks

#breadcrumbs li:not(:last-child):after {
  content:' >';
}

<li aria-current="location">
  [Titel der aktuellen Seite]
</li>