Navigation
Labyrinth mit tastbarem Bodenleitsystem für einen Blindenstock

Standortangaben (Breadcrumbs)
[Materialsammlung]

Standortangaben sind verlinkte Informationen zur Verzweigung ausgehend von der Startseite bis zur aktuellen Unterseite.

IT–Fachkräfte sind beim Ausdenken von Fachausdrücken oft märchenhaft kreativ. Hänsel hat auf seinem Weg mit Gretel Brotkrümel am Weg fallen lassen, um wieder zurückzufinden.

Auf Webseiten sind Breadcrumbs Navigationsmechanismen, die im Navigationsbaum des Webauftritts quasi vertikal von der aktuellen Seite zur Startseite zurückführen. Auf diese Weise können übergeordnete Webseiten bequem aufgerufen werden und die hierarchische Anordnung des Webauftritts verdeutlicht werden.

Technische Realisierung von Standortangaben

Standortangaben werden üblicherweise oberhalb des Hauptinhalts und manchmal redundant am Ende des Hauptinhalts eingeblendet. Die hierarchische Anordnung erfolgt in einer horizontalen Darstellung.

Standort: Startseite > Waren > Obst > Äpfel

Bezeichnung des Bereichs für den Standort

Bei der Benutzung eines Screen Readers ist es wichtig, den Kontext eines Inhalts zu verstehen. Wenn die Standortangaben über keine Überschrift im Kontext verfügen, benötigen sie eine Bezeichnung via aria-label oder aria-labelledby.

Es ist grundsätzlich fein bei der Nutzung eines Screen Readers, wenn Bereiche mit aria-label adäquat beschriftet sind. Der Screen Reader kann auf diese Weise nicht nur den Anfang, sondern auch das Ende des Abschnitts wiedergeben.

CSS Techniken für Standortangaben

Zwischen den hierarchischen Ebenen befindet sich visuell üblicherweise ein Zeichen, das auf eine andere Ebene hinweist, häufig ein "Größer Als" (>), das als spitze Klammer nach rechts erscheint. Ein solches Zeichen kann mittels CSS3 etwa folgendermaßen automatisch hinter jedes Link platziert werden:

#breadcrumbs a::after {content: "> " }

Die CSS3 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 Semantik ergibt sich aus der Tatsache, dass es sich um einen Navigationsbereich handelt, gegebenenfalls der Beschriftung, vor allem jedoch aus der Auflistung von Links.