WCAG 2.4.8: Standort

WCAG 2.4.8 verlangt, dass Nutzerinnen und Nutzer erkennen können, wo sie sich innerhalb einer Gruppe von Webseiten befinden – zum Beispiel durch Breadcrumbs, Sitemaps oder hervorgehobene Navigationslinks. Dies hilft Menschen mit kognitiven Beeinträchtigungen, Screenreader-Nutzenden und allen, die komplexe Websites navigieren, sich zu orientieren und sich selbstbewusst durch Inhalte zu bewegen.

Was diese Regel bedeutet

WCAG 2.4.8 Location ist ein Kriterium der Stufe AAA unter dem Prinzip „Bedienbar“. Es besagt: „Informationen über den Standort des Benutzers innerhalb einer Gruppe von Webseiten sind verfügbar.“ Praktisch bedeutet dies, dass Ihre Website klare, dauerhafte Signale bereitstellen muss, die den Nutzern jederzeit genau mitteilen, wo sie sich innerhalb der übergeordneten Struktur der Website befinden.

Dieses Kriterium gilt immer dann, wenn eine Website aus mehreren Seiten besteht, die in einer sinnvollen Hierarchie oder Abfolge organisiert sind – zum Beispiel eine E-Commerce-Website mit Kategorien, Unterkategorien und Produktseiten oder ein Regierungsportal mit Abteilungen und Unterbereichen. Wenn ein Nutzer auf einer Seite landet, sollte er die Frage „Wo bin ich auf dieser Website?“ beantworten können, ohne raten zu müssen oder sich ausschließlich auf sein Gedächtnis zu verlassen.

Zulässige Techniken zur Erfüllung dieses Kriteriums umfassen unter anderem:

Brotkrumennavigation (Breadcrumbs) – eine Navigationshilfe, die den Pfad von der Startseite der Website zur aktuellen Seite anzeigt (z. B. Home > Products > Laptops > 15-inch Models).
Sitemaps – eine eigene Seite oder ein Panel, das die Gesamtstruktur der Website anzeigt und den aktuellen Standort hervorhebt oder markiert.
Hervorgehobene oder visuell unterscheidbare Navigationslinks – Navigationsmenüs, die den aktiven Bereich oder die aktive Seite deutlich markieren, häufig ergänzt durch ein aria-current-Attribut für Nutzer von unterstützenden Technologien.
Nummerierte Schritte in einem mehrstufigen Prozess – Indikatoren wie „Step 2 of 5“ in einem Checkout oder Formularassistenten, die die Position in der Abfolge vermitteln.

Eine Seite besteht dieses Kriterium, wenn mindestens ein zuverlässiger Mechanismus verfügbar ist, der den Nutzer über seinen aktuellen Standort innerhalb der Struktur der Website informiert. Eine Seite verfehlt das Kriterium, wenn kein solcher Mechanismus existiert – zum Beispiel, wenn die Navigationsleiste keinen visuellen oder programmatischen Hinweis auf die aktuelle Seite enthält, kein Breadcrumb vorhanden ist und kein Schrittindikator angezeigt wird.

Es ist wichtig zu beachten, dass WCAG 2.4.8 keine bestimmte Technik vorschreibt; es verlangt, dass irgendein wirksamer Standortindikator vorhanden ist. Damit der Indikator jedoch wirklich barrierefrei ist, muss er auch für unterstützende Technologien wie Screenreader wahrnehmbar sein und darf nicht nur für sehende Nutzer visuell erkennbar sein. Das bedeutet, dass rein visuelle Indikatoren (wie ein fett formatierter Link ohne Änderung der zugänglichen Bezeichnung) für sich genommen unzureichend sein können, wenn sie nicht programmatisch exponiert werden.

Es gibt keine offiziellen Ausnahmen, die WCAG für dieses Kriterium vorsieht, abgesehen von dem allgemeinen Verständnis, dass es für Gruppen verwandter Seiten gilt. Eine einzelne, eigenständige Webseite, die nicht Teil einer größeren Gruppe ist, muss dieses Kriterium nicht erfüllen, da es keinen „Standort innerhalb einer Gruppe“ zu vermitteln gibt.

Warum es wichtig ist

Zu wissen, wo man sich in einer digitalen Umgebung befindet, ist ein grundlegendes Orientierungsbedürfnis, das die meisten Nutzer als selbstverständlich ansehen – bis die Hinweise fehlen. WCAG 2.4.8 adressiert eine reale und weit verbreitete Barriere, von der mehrere unterschiedliche Nutzergruppen betroffen sind.

Nutzer mit kognitiven Beeinträchtigungen gehören zu den am stärksten Betroffenen. Bedingungen wie Aufmerksamkeitsdefizitstörung, Gedächtnisbeeinträchtigungen und erworbene Hirnverletzungen können es erschweren, den eigenen Weg durch eine komplexe Website nachzuvollziehen. Ohne Breadcrumb oder ein ähnliches Signal kann ein Nutzer desorientiert werden, unsicher sein, wie er zu einer übergeordneten Kategorie zurückkehrt, oder nicht verstehen, wie die aktuelle Seite mit Inhalten zusammenhängt, die er bereits gesehen hat. Laut Weltgesundheitsorganisation leben weltweit über eine Milliarde Menschen mit irgendeiner Form von Behinderung, und kognitive Beeinträchtigungen stellen einen bedeutenden und oft unterversorgten Teil dieser Bevölkerung dar.

Screenreader-Nutzer – die in der Regel blind oder sehbehindert sind – sind stark auf die programmatische Struktur angewiesen, um den Kontext einer Seite zu verstehen. Ein sehender Nutzer kann einen hervorgehobenen Navigationslink oder ein fett dargestelltes Breadcrumb-Element mit einem Blick erfassen und sich sofort orientieren. Ein Screenreader-Nutzer hingegen muss die Seite über sequentielle Audioausgabe interpretieren. Ohne ein aria-current="page"-Attribut am aktiven Navigationslink oder ein korrekt strukturiertes Breadcrumb mit zugänglichen Bezeichnungen erhält er kein gleichwertiges Orientierungssignal und muss möglicherweise umfangreich navigieren, nur um herauszufinden, wo er sich befindet.

Nutzer mit motorischen Beeinträchtigungen, die per Tastatur, Schaltersteuerung oder Augensteuerung navigieren, profitieren von Standortindikatoren, weil sie den Bedarf an redundanter, anstrengender Navigation verringern. Wenn ein Nutzer bereits weiß, dass er sich im Bereich „Support“ einer Unternehmenswebsite befindet, muss er nicht bei jedem Laden einer neuen Seite die gesamte Navigationsstruktur erneut durchsuchen.

Betrachten Sie ein konkretes Szenario: Eine Nutzerin mit beginnender Demenz surft im Online-Portal einer türkischen Bank, um Informationen zu Hypothekenzinsen zu finden. Sie klickt sich durch mehrere Seiten und ist sich nicht mehr sicher, ob sie sich noch im Bereich Privatkundengeschäft befindet oder bereits in den Bereich Firmenkundengeschäft geraten ist. Ohne Breadcrumb oder hervorgehobenes Navigationselement, das ihren aktuellen Bereich klar markiert, könnte sie den Browser frustriert schließen oder einen kostspieligen Fehler machen – etwa den falschen Produkttyp zu beantragen. Ein einfaches, gut implementiertes Breadcrumb (z. B. Ana Sayfa > Bireysel Bankacılık > Krediler > Konut Kredisi) würde diese Verwirrung sofort auflösen.

Über die Barrierefreiheit hinaus bieten Standortindikatoren messbare Vorteile für Usability und SEO. Strukturierte Breadcrumb-Daten (unter Verwendung von Schema.org BreadcrumbList) können direkt in den Google-Suchergebnissen als Rich Snippets erscheinen und die Klickraten verbessern. Eine klare Seitenstruktur senkt außerdem die Absprungraten, da Nutzer, die verstehen, wo sie sich befinden, eher dazu neigen, verwandte Inhalte zu erkunden, statt die Website zu verlassen.

Wie man testet

Identifizieren Sie die Seitengruppe: Bestimmen Sie, ob die zu testende Seite zu einer Gruppe verwandter Seiten mit definierter Hierarchie gehört (z. B. eine mehrstufige Navigationsstruktur, ein Schritt-für-Schritt-Assistent oder eine kategorisierte Inhaltsbibliothek). Wenn es sich um ein eigenständiges Dokument handelt, ist dieses Kriterium möglicherweise nicht anwendbar.
Führen Sie einen automatisierten Scan als Basis durch: Verwenden Sie axe DevTools (Browser-Erweiterung) oder Lighthouse in den Chrome DevTools, um ein Accessibility-Audit auszuführen. Auch wenn keines der Tools 2.4.8 direkt prüft, achten Sie auf verwandte Probleme wie fehlende aria-current-Attribute an Navigationslinks, nicht beschriftete <nav>-Landmarks und fehlende Breadcrumb-Struktur. Diese Ergebnisse unterstützen – ersetzen aber nicht – die manuelle Überprüfung.
Überprüfen Sie visuell, ob ein Standortmechanismus vorhanden ist: Suchen Sie nach einem Breadcrumb, einem hervorgehobenen oder visuell unterscheidbaren aktiven Link in der Navigation, einem Schrittzähler oder einem Link zur Sitemap. Vergewissern Sie sich, dass der Mechanismus die Position der aktuellen Seite in der Seitenhierarchie korrekt widerspiegelt.
Testen Sie mit einem Screenreader – NVDA + Firefox: Öffnen Sie NVDA, rufen Sie die Seite auf und drücken Sie D, um durch die Landmarks zu wechseln. Suchen Sie die Navigations-Landmarks und achten Sie auf Hinweise auf die aktuelle Seite oder den aktuellen Bereich. Prüfen Sie, ob das aktive Navigationselement anders angekündigt wird (z. B. „current page“ oder ähnlich, typischerweise über aria-current="page" vermittelt). Durchlaufen Sie das Breadcrumb, falls vorhanden, und vergewissern Sie sich, dass jede Ebene mit ihrem Linktext angekündigt wird und der aktuelle Standort klar identifiziert ist.
Testen Sie mit VoiceOver + Safari (macOS/iOS): Aktivieren Sie VoiceOver (Command + F5), navigieren Sie mit VO + U zum Breadcrumb oder zur Hauptnavigation, um den Rotor zu öffnen, und wählen Sie „Links“ oder „Landmarks“. Hören Sie, wie das aktive Navigationselement oder das aktuelle Breadcrumb-Element angekündigt wird. Vergewissern Sie sich, dass sich der aktuelle Standort von anderen Navigationselementen unterscheidet.
Testen Sie mit JAWS + Chrome: Verwenden Sie Insert + F7, um die Linkliste zu öffnen, und Insert + F6, um die Überschriftenliste zu öffnen. Navigieren Sie zum Breadcrumb oder zum Navigationsbereich und bestätigen Sie, dass die aktuelle Seite oder der aktuelle Bereich programmatisch identifizierbar ist. Prüfen Sie, ob aria-current vorgelesen wird (JAWS kündigt dies als „current“ für das betreffende Element an).
Testen Sie über mehrere Seiten der Gruppe hinweg: Navigieren Sie durch mindestens drei bis fünf Seiten innerhalb desselben Bereichs oder derselben Hierarchie und bestätigen Sie, dass der Standortmechanismus sich auf jeder Seite korrekt aktualisiert und durchgängig in der gesamten Gruppe vorhanden ist.
Untersuchen Sie das DOM: Verwenden Sie die DevTools des Browsers, um zu prüfen, dass Breadcrumb-Links aussagekräftige zugängliche Namen haben, dass das aktuelle Element aria-current="page" (für die aktuelle Seite) oder aria-current="true" (für den aktuellen Schritt in einem Prozess) verwendet und dass das Breadcrumb in ein <nav>-Element mit einer zugänglichen Bezeichnung wie aria-label="Breadcrumb" eingebettet ist.

Wie man es behebt

Fehlende Breadcrumb-Navigation – Falsch

<!-- No breadcrumb or location indicator present.
     Users have no way to determine their location in the site hierarchy. -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

Fehlende Breadcrumb-Navigation – Richtig

<!-- A breadcrumb nav is added above the main content.
     aria-label distinguishes it from main navigation.
     aria-current="page" marks the current location for screen readers.
     The list structure communicates hierarchy. -->
<nav aria-label='Breadcrumb'>
  <ol>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
    <li><a href='/products/laptops/15-inch' aria-current='page'>15-inch Laptops</a></li>
  </ol>
</nav>
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

Aktiver Navigationslink ohne programmatischen Indikator – Falsch

<!-- The active link is styled differently in CSS, but there is no
     programmatic signal. Screen reader users cannot distinguish it
     from the other navigation links. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Aktiver Navigationslink ohne programmatischen Indikator – Richtig

<!-- aria-current="page" is added to the active link.
     Screen readers will announce this link as "current" or "current page"
     depending on the assistive technology, giving users a clear
     programmatic location signal in addition to the visual styling. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active' aria-current='page'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Mehrstufiges Formular ohne Schrittindikator – Falsch

<!-- A multi-step checkout form with no indication of current step.
     Users cannot determine how far they are through the process
     or how many steps remain. -->
<form>
  <h1>Shipping Information</h1>
  <!-- form fields -->
  <button type='submit'>Next</button>
</form>

Mehrstufiges Formular ohne Schrittindikator – Richtig

<!-- A progress indicator communicates the user's position in the sequence.
     aria-label on the nav provides context.
     aria-current="step" marks the active step for assistive technologies.
     The visible text "Step 2 of 4" is also available for all users. -->
<nav aria-label='Checkout progress'>
  <ol>
    <li><a href='/checkout/cart'>Cart</a></li>
    <li aria-current='step'><strong>Shipping</strong></li>
    <li>Payment</li>
    <li>Confirmation</li>
  </ol>
</nav>
<form>
  <h1>Shipping Information <span>(Step 2 of 4)</span></h1>
  <!-- form fields -->
  <button type='submit'>Next: Payment</button>
</form>

Häufige Fehler

Breadcrumbs nur auf der Startseite oder nur auf Blattseiten bereitstellen: Das Breadcrumb muss auf allen Seiten innerhalb der Gruppe konsistent vorhanden sein. Es nur auf Produktdetailseiten, aber nicht auf Kategorieseiten anzuzeigen, führt zu Lücken in den Orientierungsinformationen.
Verwendung eines visuell gestalteten aktiven Links ohne Hinzufügen von aria-current="page": Ein fett oder unterstrichen dargestellter aktiver Navigationslink vermittelt den Standort visuell, aber Screenreader-Nutzer profitieren nicht, sofern aria-current="page" nicht ebenfalls auf diesem Element vorhanden ist.
Das Breadcrumb in ein <div> statt in ein <nav>-Element einbetten: Die Verwendung eines nicht-semantischen Containers bedeutet, dass das Breadcrumb nicht als Navigations-Landmark exponiert wird, was es für Screenreader-Nutzer schwieriger macht, es zu finden und zu interpretieren.
Weglassen von aria-label am Breadcrumb-<nav>, wenn auch ein Hauptnavigations-Landmark existiert: Zwei nicht beschriftete <nav>-Landmarks auf derselben Seite erzeugen Mehrdeutigkeit. Screenreader könnten beide einfach als „navigation“ ankündigen, sodass Nutzer sie nicht unterscheiden können.
Verwendung von aria-current="true" anstelle von aria-current="page" bei einem Seitenlink: Der Wert page ist der semantisch korrekte Wert, um die aktuelle Seite in einem Navigationskontext zu kennzeichnen. Die Verwendung von true ist weniger aussagekräftig und kann von unterstützenden Technologien anders oder weniger klar angekündigt werden.
Sich ausschließlich auf den Seitentitel zur Standortangabe verlassen: Ein beschreibendes <title>-Element (z. B. „Laptops — 15-inch Models | Acme Store“) ist hilfreich und wird von WCAG 2.4.2 gefordert, erfüllt aber allein nicht 2.4.8, das einen Mechanismus verlangt, der die Position innerhalb der Struktur der Seitengruppe vermittelt, nicht nur den Namen der aktuellen Seite.
Breadcrumbs aufbauen, die die URL-Struktur statt der Navigationshierarchie widerspiegeln: URLs und Navigationsstrukturen stimmen nicht immer überein. Breadcrumbs sollten die logische Informationsarchitektur widerspiegeln, die ein Nutzer versteht, nicht den zugrunde liegenden URL-Pfad, der technisch oder unverständlich sein kann.
Das Breadcrumb als reinen Text ohne Links für übergeordnete Ebenen anzeigen: Wenn nur die aktuelle Seite angezeigt wird oder übergeordnete Ebenen nicht verlinkt sind, verliert das Breadcrumb seinen Nutzen als Standortindikator und Navigationshilfe. Übergeordnete Elemente sollten verlinkt sein, damit Nutzer in der Hierarchie nach oben navigieren können.
Das aktuelle Breadcrumb-Element nur durch eine visuelle Trennzeichenänderung statt mit aria-current markieren: Die Farbe zu ändern oder die Unterstreichung beim letzten Breadcrumb-Element zu entfernen, vermittelt Screenreadern nicht, dass es die aktuelle Seite darstellt. aria-current="page" muss explizit hinzugefügt werden.
Vergessen, den Standortindikator in Single-Page-Applications (SPAs) nach clientseitiger Navigation zu aktualisieren: In SPAs, die mit Frameworks wie React oder Vue erstellt wurden, erfolgen Seitenübergänge ohne vollständiges Neuladen des Browsers. Wenn das Breadcrumb oder der aktive Navigationsindikator bei Routenwechsel nicht programmatisch aktualisiert wird, zeigt es veraltete Standortinformationen an – was schlechter ist, als gar keinen Indikator zu haben.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Die türkische Präsidialverfügung 2025/10, veröffentlicht im Amtsblatt Nr. 32933 am 21. Juni 2025, legt verbindliche Anforderungen an die Web- und mobile Barrierefreiheit für eine breite Palette von Organisationen fest, die in der Türkei tätig sind. Die Verfügung schreibt die Einhaltung international anerkannter Barrierefreiheitsstandards vor – de facto die Übernahme des WCAG-Rahmenwerks – und gilt für eine definierte Gruppe von Organisationstypen, darunter öffentliche Institutionen und Behörden, E-Commerce-Plattformen, Banken und Finanzinstitute, Krankenhäuser und Gesundheitsdienstleister, Telekommunikationsunternehmen mit 200.000 oder mehr Abonnenten, lizenzierte Reisebüros, private Transportunternehmen und Privatschulen, die vom Bildungsministerium (MoNE) zugelassen sind.

WCAG 2.4.8 Location ist als Kriterium der Stufe AAA eingestuft, was bedeutet, dass es nicht zu den grundlegenden rechtlich geforderten Kriterien unter der Verfügung gehört, die Konformität mit den Stufen A und AA als Mindestschwelle nennt. Die Unterscheidung ist jedoch in mehrfacher Hinsicht für von der Regulierung erfasste Organisationen wichtig.

Erstens kann von bestimmten spezialisierten Diensten – insbesondere solchen, die Nutzer mit erheblichen kognitiven oder navigationsbezogenen Herausforderungen bedienen, wie Gesundheitsportale für ältere Patienten oder Bildungsplattformen für Schüler mit Lernschwierigkeiten – erwartet werden, dass sie über die AA-Basis hinausgehen, um dem Geist der Barrierefreiheitsverpflichtungen nach türkischem Recht und verwandten Gesetzen wie dem Gesetz über Menschen mit Behinderungen Nr. 5378 tatsächlich gerecht zu werden. Die Umsetzung von 2.4.8 in diesen Kontexten zeigt ein substanzielles, nicht nur formales Bekenntnis zur Inklusion.

Zweitens unterliegen türkische öffentliche Institutionen und regulierte private Einrichtungen zunehmend Prüf- und Beschwerdemechanismen. Der Nachweis einer Konformität auf AAA-Niveau – einschließlich WCAG 2.4.8 – bietet eine belastbare Dokumentation der Umsetzung von Best Practices und reduziert das regulatorische Risiko im Falle einer formellen Barrierefreiheitsbeschwerde.

Drittens haben Standortindikatoren wie Breadcrumbs insbesondere für E-Commerce-Plattformen und Banken neben ihrer barrierefreien Funktion einen direkten kommerziellen Wert. Ein Online-Hypothekenantragsprozess einer türkischen Bank, der klare Schrittindikatoren und Breadcrumb-Navigation enthält, wird nicht nur Nutzer mit kognitiven Beeinträchtigungen effektiver bedienen, sondern auch Abbruchraten senken und die Conversion unterstützen – und damit Investitionen in Barrierefreiheit mit messbaren Geschäftsergebnissen in Einklang bringen.

Organisationen, die das Accsible-Overlay-SDK verwenden, können dessen integrierte Breadcrumb-Verbesserung und aria-current-Injection-Funktionen nutzen, um bestehende Websites näher an die Konformität mit 2.4.8 heranzuführen, ohne eine vollständige Überarbeitung des Codebestands zu benötigen. Für eine vollständige und robuste Konformität – insbesondere für Einrichtungen, die von der Präsidialverfügung 2025/10 erfasst sind – bleibt jedoch die serverseitige oder Build-Time-Implementierung semantischer Breadcrumb-Markups und Navigationsindikatoren der empfohlene Ansatz, da Overlay-Lösungen die grundlegende barrierefreie Auszeichnung ergänzen, aber nicht ersetzen.