Informationen
Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

Position innerhalb des Webauftritts
Breadcrumbs & Co

[Materialsammlung]

Positionsangaben sind verlinkte Informationen zur Verzweigung der aktuellen Seite im Kontext des aktuellen Webauftritts. Als Breadcrumbs werden dabei Positionsangaben bezeichnet, die ausgehend von der Startseite über untergeordnete Elternseiten zur aktuellen Unterseite führen. Ähnlich dienen Links zur Positionsangabe, die lediglich zur übergeordneten Seite, zu vorherigen und nachfolgenden Seiten etwa in einer Schritt-für-Schritt-Anleitung oder Ähnlichem führen.

Terminologie

WCAG

In den WCAG wird im Erfolgskriterium 2.4.8 für eine solche Komponente der Ausdruck „Location“ verwendet. Location wird in der offiziellen Übersetzung des Erfolgskriteriums 2.4.8 mit dem Ausdruck „Position“ übersetzt. Die Ausdrücke „Position“ oder „Positionsangabe“ sollten daher zur Beschriftung von Breadcrumbs oder Ähnlichem verwendet werden. (Erfolgskriterium 2.4.6 Überschriften und Beschriftungen)

Ausdrücke wie „Breadcrumbs“, „Lokation“ , „Brotkrümel“, „Standort“ oder „Pfadnavigation scheinen hingegen ungeeignet. Sie enthalten im Hinblick auf die WCAG-Terminologie potenzielle Missverständlichkeit, Sprachwechsel oder Länge Nacheile.

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 aktuellen Seite über übergeordnete Kapitel bis zur Startseite verdeutlichen. Auf diese Weise wird eine vertikale Navigation innerhalb eines Webauftritts bereitgestellt.

Es handelt sich bei Breadcrumbs also um eine Unterart der Positionsangaben. Daneben sind in bestimmten Kontexten auch andere Arten von Positionsangaben üblich.

Elternangabe

Der relevanteste Kontext innerhalb eines Webauftritts ist meist die Seite von der aus in der Sitemap eines Webauftritts verlinkt würde („Elternseite“). Insbesondere bei der Darstellung von Positionsangaben auf dem Smart Phone wird vielfach lediglich zum übergeordneten Themenbereich verlinkt.

Angaben zu 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.

Prozessangaben

Größere Formulare werden zweckmäßig auf mehrere Schritte zur Eingabe aufgegliedert. Abgeschlossene und weiter erforderliche Schritte zum Ausfüllen werden in einer nummerierten Liste dargestellt.

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

Kombination von Positionsangaben

Die unterschiedlichen Arten von Positionsangaben können natürlich auch in einer vermischten Positionsangabe zusammengeführt werden.

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:

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

Technische Realisierung von Positionsangaben

Bezeichnung vorsehen!

Beim Arbeiten mit einem Screen Reader ist es wichtig, den Kontext eines Inhalts zu verstehen. Es ist daher sehr zu empfehlen, die Positionsangaben mit einer Bezeichnung mittels aria-label zu versehen.

Ein Screen Reader kann auf diese Weise nicht nur den Anfang, sondern auch das Ende einer Komponente wiedergeben.

CSS Techniken für Positionsangaben

Zwischen den Listenelementen hierarchischer oder benachbarter Links befindet sich visuell üblicherweise ein Zeichen, das auf ein Verhältnis zur aktuellen Seite hinweist. Eine hierarchische Relation wird häufig mit dem Zeichen > dargestellt. Ein solches Zeichen kann mittels CSS-Anweisungen etwa folgendermaßen automatisch hinter jeden Link platziert werden:

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

Die CSS Anweisungen after und before dürfen natürlich nicht eingesetzt werden, um relevante Texte in den HTML-Code zu schummeln. In diesem Fall geht jedoch kein Inhalt für den Screen Reader verloren, egal ob er diese CSS Anweisungen interpretiert oder nicht. Die Bedeutung des Zeichens ergibt sich aus der Tatsache, dass es sich um einen Navigationsbereich handelt, gegebenenfalls der Beschriftung, vor allem jedoch aus der Auflistung von Links.