Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) stehen Unternehmen vor neuen Herausforderungen bei der digitalen Barrierefreiheit. ARIA Landmarks sind dabei ein zentrales technisches Feature, das explizit geprüft wird und maßgeblich zur Navigation und Orientierung für Menschen mit Behinderungen beiträgt. In diesem Artikel erfahren Sie, was ARIA Landmarks sind, warum sie für die BFSG-Konformität unverzichtbar sind und wie Sie sie korrekt implementieren.
ARIA Landmarks sind spezielle HTML-Attribute, die verschiedene Bereiche einer Webseite semantisch kennzeichnen. ARIA steht für "Accessible Rich Internet Applications" und wurde vom World Wide Web Consortium (W3C) entwickelt, um die Barrierefreiheit von Webanwendungen zu verbessern.
Diese Landmarks fungieren als Wegweiser für assistive Technologien wie Screenreader. Sie ermöglichen es Nutzern mit Sehbehinderungen, schnell zwischen verschiedenen Seitenbereichen zu navigieren, ohne den gesamten Inhalt linear durchlaufen zu müssen. Während sehende Nutzer die Struktur einer Webseite visuell erfassen können, bieten ARIA Landmarks diese strukturelle Information in maschinenlesbarer Form.
Es gibt verschiedene Landmark-Rollen, die jeweils unterschiedliche Funktionen erfüllen:
Das Banner kennzeichnet den Kopfbereich der Website, der typischerweise das Logo, die Hauptnavigation und andere einleitende Elemente enthält. In HTML5 entspricht dies meist dem <header>-Element auf oberster Ebene.
Dieser Landmark identifiziert Navigationsbereiche wie Hauptmenüs, Breadcrumbs oder Seitenleisten mit Links. Websites können mehrere Navigationselemente enthalten, die durch aussagekräftige Labels unterschieden werden sollten.
Das Main-Landmark markiert den Hauptinhalt der Seite. Es sollte nur einmal pro Seite verwendet werden und umfasst den zentralen Content, um den es auf der jeweiligen Seite geht. In HTML5 wird dies durch das <main>-Element repräsentiert.
Dieser Bereich kennzeichnet ergänzende Inhalte, die zum Hauptinhalt in Beziehung stehen, aber auch eigenständig verständlich sind. Typische Beispiele sind Sidebars mit verwandten Artikeln oder zusätzlichen Informationen.
Das Contentinfo-Landmark markiert den Fußbereich der Seite mit Informationen wie Copyright, Impressum oder Kontaktdaten. Es entspricht dem <footer>-Element auf oberster Ebene.
Formular-Bereiche können mit role="form" gekennzeichnet werden, während Suchfunktionen das spezifische role="search" erhalten sollten. Dies hilft Nutzern, interaktive Elemente schnell zu identifizieren.
Das BFSG verlangt von Unternehmen ab dem 28. Juni 2025, dass ihre digitalen Angebote barrierefrei gestaltet sind. Die korrekte Implementierung von ARIA Landmarks ist dabei ein wesentlicher Bestandteil der technischen Prüfung und trägt direkt zur Erfüllung der EN 301 549 bei, dem europäischen Standard für digitale Barrierefreiheit.
ARIA Landmarks sind besonders relevant für folgende WCAG-Kriterien (Web Content Accessibility Guidelines), die auch im BFSG berücksichtigt werden:
Bei einer BFSG-Prüfung wird explizit untersucht, ob die Website über eine logische Landmark-Struktur verfügt und ob diese korrekt implementiert ist. Fehlen wichtige Landmarks oder sind sie falsch eingesetzt, kann dies zu Mängeln im Audit führen.
Die Implementierung von ARIA Landmarks erfolgt auf zwei Arten: durch die Verwendung semantischer HTML5-Elemente oder durch explizite ARIA-Rollen.
Moderne HTML5-Elemente haben bereits implizite Landmark-Rollen. Das <header>-Element auf oberster Ebene fungiert automatisch als Banner, <nav> als Navigation, <main> als Main-Content und <footer> als Contentinfo. Dies ist die bevorzugte Methode, da sie gleichzeitig die HTML-Semantik und die Barrierefreiheit verbessert.
Bei älteren Websites oder wenn HTML5-Elemente nicht verwendet werden können, lassen sich ARIA-Rollen explizit über das role-Attribut hinzufügen. Beispielsweise wird aus einem <div role="navigation"> ein Navigations-Landmark.
Wenn mehrere Landmarks desselben Typs auf einer Seite existieren, sollten sie eindeutig beschriftet werden. Dies geschieht über aria-label oder aria-labelledby. Zum Beispiel: <nav aria-label="Hauptnavigation"> und <nav aria-label="Fußzeilen-Navigation">.
Bei der Implementierung von ARIA Landmarks können verschiedene Fehler auftreten, die die Barrierefreiheit beeinträchtigen:
Die manuelle Prüfung von ARIA Landmarks kann komplex sein. BFSG-Checken bietet automatisierte Tests, die überprüfen, ob Ihre Website über eine korrekte Landmark-Struktur verfügt. Das Tool erkennt fehlende, falsch implementierte oder redundante Landmarks und gibt konkrete Hinweise zur Optimierung.
Die automatisierte Prüfung umfasst unter anderem:
Regelmäßige Tests mit BFSG-Checken helfen Ihnen, frühzeitig Probleme zu identifizieren und Ihre Website kontinuierlich BFSG-konform zu halten.
ARIA Landmarks sind mehr als nur ein technisches Detail – sie sind ein fundamentaler Bestandteil barrierefreier Webseiten und unverzichtbar für die BFSG-Konformität. Durch die richtige Implementierung schaffen Sie eine klare Struktur, die allen Nutzern, insbesondere Menschen mit Behinderungen, eine effiziente Navigation ermöglicht. Mit den automatisierten Prüfungen von BFSG-Checken stellen Sie sicher, dass Ihre Landmarks korrekt implementiert sind und Ihre Website den gesetzlichen Anforderungen entspricht.