Barrierefreies Webdesign: Landmarks in WordPress richtig nutzen
Landmarks sind ausgezeichnete Bereiche einer Website (etwa Header, Hauptinhalt und Footer), an denen sich Screenreader und andere Hilfstechnologien orientieren. Für Menschen mit Beeinträchtigungen sind sie das Navigationsgerüst einer Seite, und damit ein Grundbaustein für barrierefreies Webdesign.
Das Thema ist längst nicht mehr freiwillig: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen zu barrierefreien digitalen Angeboten. Höchste Zeit also, die eigene Website darauf abzuklopfen.
Barrierefreiheit ist Pflicht: das BFSG
Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025. Es verpflichtet Unternehmen, die digitale Produkte oder Dienstleistungen für Verbraucher anbieten, zur Barrierefreiheit. Betroffen sind vor allem Websites, über die Verträge angebahnt oder geschlossen werden, also Online-Shops, Buchungs- und Terminfunktionen. Reine Informations-Websites ohne solche Funktionen fallen in der Regel nicht darunter.
Eine wichtige Ausnahme gibt es für Kleinstunternehmen, die Dienstleistungen erbringen: Wer weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz hat, ist von der Pflicht ausgenommen. Als technischer Maßstab gilt die europäische Norm EN 301 549, die auf die WCAG 2.1 in der Stufe AA verweist.
Unabhängig von der rechtlichen Pflicht gilt: Barrierefreiheit vergrößert deine Zielgruppe, verbessert die Bedienbarkeit für alle Besucher und zahlt über sauberen, strukturierten Code auch auf die Suchmaschinenoptimierung ein.
Was sind Landmarks?
Landmarks sind speziell ausgezeichnete Bereiche einer Website, die Screenreadern die Struktur der Seite mitteilen: Hier ist die Navigation, hier beginnt der Hauptinhalt, hier kommt die Fußzeile. Nutzer von Hilfstechnologien können so direkt zwischen den Bereichen springen, statt sich Element für Element durch die Seite zu arbeiten.
Definiert werden Landmarks über semantische HTML-Elemente: <header> für die Kopfzeile, <nav> für die Navigation, <main> für den Hauptinhalt und <footer> für die Fußzeile. Für Sehende ändert sich dadurch nichts, für Screenreader-Nutzer ist es der Unterschied zwischen Orientierung und Blindflug.
Landmarks in WordPress und im Kadence Theme
WordPress selbst nutzt bereits semantische HTML-Elemente, den Rest entscheidet dein Theme. Und da gibt es große Unterschiede: Manche Themes setzen Landmarks vorbildlich, andere lückenhaft. Bei Mängeln kann ein Plugin wie WP Accessibility helfen, besser ist aber ein Theme, das Barrierefreiheit von Haus aus ernst nimmt.
Das Kadence Theme, das ich für die meisten Projekte einsetze, gehört zu den Positivbeispielen: Landmarks werden standardmäßig korrekt gesetzt, und auch weitere Aspekte der Barrierefreiheit sind sauber umgesetzt. Mehr dazu liest du in meinem Beitrag Diese WordPress Themes sind die Besten.
Landmarks mit Elementor setzen (Hello Theme)
Beim Pagebuilder Elementor mit dem Hello Theme musst du die Landmarks den Bereichen manuell zuweisen. Genau das wird leider oft vergessen, ich habe schon viele Elementor-Websites ohne ein einziges korrektes Landmark gesehen. So gehst du vor:
Landmarks für Header und Footer
Navigiere im WordPress Dashboard zu Templates und öffne deinen Header im Theme Builder mit Elementor.
Klicke unten links auf das Zahnrad (Einstellungen) und stelle unter HTML-Tag den Wert header ein. Damit ist das Landmark gesetzt. Beim Footer gehst du genauso vor: Footer-Template öffnen, Zahnrad anklicken, HTML-Tag auf footer stellen.
Landmark für den Hauptinhalt (Main)
Den Hauptinhalt versieht Elementor leider nicht automatisch mit dem main-Landmark. Die Lösung ist ein eigenes Template: Gehe zu Templates, füge ein neues Template vom Typ Single Page hinzu, vergib einen Namen (zum Beispiel „Seite“) und lasse es zunächst leer.
Klicke im Elementor-Editor auf das Zahnrad (Einstellungen) und wähle unter HTML Wert die Option main aus.
Jetzt muss das Template noch für die normalen Seiten aktiviert werden: Klicke auf die Pfeilspitze neben dem Veröffentlichen-Button, wähle Bedingungen anzeigen und setze die Bedingung auf Alle Singular.
Zum Abschluss fügst du in das Template einen Abschnitt in voller Breite ein und platzierst darin das Element Beitrag Inhalt. Speichern, fertig: Der Inhalt deiner Seiten wird nun mit dem main-Landmark ausgegeben.
Weitere Aspekte der Barrierefreiheit
Landmarks sind ein wichtiger Baustein, aber längst nicht alles. Diese Punkte solltest du ebenfalls im Blick haben:
Fazit
Landmarks kosten kaum Aufwand und bringen enorm viel: Sie geben Menschen mit Beeinträchtigungen die Orientierung, die Sehende visuell bekommen. Mit dem Kadence Theme bekommst du sie geschenkt, bei Elementor musst du selbst Hand anlegen. Und spätestens seit das BFSG gilt, ist Barrierefreiheit für viele Unternehmen keine Kür mehr, sondern Pflicht.
Du möchtest wissen, wo deine Website in Sachen Barrierefreiheit steht und ob das BFSG dich betrifft? Mit meiner Webseiten-Analyse und Beratung gehe ich deine Website strukturiert mit dir durch.
Hinweis: Dieser Beitrag gibt allgemeine Informationen wieder und ersetzt keine Rechtsberatung. Bei konkreten rechtlichen Fragen wende dich an eine Anwältin oder einen Anwalt für IT- und Datenschutzrecht.
FAQ: Häufige Fragen zum barrierefreien Webdesign
Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.
