Der erste Schritt zu einer barrierefreien WordPress-Website ist die Wahl des Themes. Genauer: eines Themes, das Barrierefreiheit von Haus aus mitträgt – oder sich zumindest so weit anpassen lässt, dass du sie sauber umsetzen kannst. Aber so wichtig dieser erste Schritt ist: Das Theme allein macht eine Seite noch nicht barrierefrei. Entscheidend ist, dass du weißt, worauf es danach ankommt. Genau darum geht es in diesem Beitrag.
Was bedeutet Barrierefreiheit bei WordPress-Themes?
Barrierefreiheit heißt, dass eine Website für alle Menschen gleichermaßen zugänglich ist. Ein Theme muss dafür unter anderem sauber programmiert und responsiv sein und sich mit Hilfsmitteln wie Screenreadern sowie per Tastatur bedienen lassen. Den Maßstab liefern die Web Content Accessibility Guidelines (WCAG) des World Wide Web Consortium (W3C).
Wichtig ist mir aber gleich zu Beginn die Einordnung: Ein barrierefreies Theme liefert nur die Code-Grundlage. Ob eine Seite am Ende wirklich zugänglich ist, hängt genauso an der Struktur, die du aufbaust, und an den Inhalten, die du einpflegst – und schließlich auch an den Plugins, die du ergänzt, denn auch die müssen barrierefrei sein. Auf all das kommen wir noch.
Wie finde ich ein barrierefreies Theme?
Die „accessibility-ready“-Suche. Themes mit diesem Label hat das WordPress-Team selbst auf Barrierefreiheit geprüft, etwa auf Tastaturbedienung. Den Filter findest du direkt in deinem WordPress unter Design → Themes → „Neues Theme hinzufügen“ → „Funktionen filtern“ (oder auf wordpress.org). Ein guter Startpunkt – aber keine vollständige Liste, denn manche größeren Themes tragen das Label gar nicht.
Nach WCAG prüfen – oder nachfragen. Hast du ein bestimmtes Theme im Blick, kannst du prüfen oder bei den Entwicklern nachfragen, ob es den WCAG entspricht. Orientiere dich mindestens an WCAG 2.1 Level AA; aktuell ist WCAG 2.2 AA die maßgebliche Fassung. Schon aus der Antwort der Entwickler bekommst du ein Gefühl dafür, wie ernst sie das Thema nehmen.
Im Browser testen. Einen ersten Eindruck bekommst du mit Bordmitteln des Browsers und kostenlosen Werkzeugen. Wie das genau geht – von der Tastatur-Prüfung über die Tab-Taste bis zu kostenlosen Screenreadern –, zeige ich Schritt für Schritt in meinem Beitrag „Wie barrierefrei ist meine Website? So testest du es selbst“.
Der Knackpunkt, den viele übersehen: Menüs mit Unterebenen
Ein Detail, das in der Praxis oft schiefgeht, sind Menüs mit Unterebenen – also eine Hauptseite, der Unterseiten zugeordnet sind. Dafür gibt es zwei Wege, und beide sind ausdrücklich erlaubt – du musst nur wissen, welcher wann passt.
Der erste Weg: Der Hauptpunkt hat gar keine eigene Seite, sondern dient nur dazu, das Untermenü zu öffnen. Denk an einen Menüpunkt „Leistungen“, hinter dem keine eigene Seite liegt, sondern nur die einzelnen Leistungen als Unterpunkte. In WordPress legt man dafür einen Menüeintrag mit „#“ als Adresse an. Das ist keine Notlösung, sondern völlig zulässig: Das W3C nennt genau diesen Fall – wenn ein Menüpunkt das Untermenü nur zusammenfasst und selbst nicht verlinken muss, darf er als reiner Auf- und Zuklapp-Schalter funktionieren. Wichtig ist allein, dass er per Tastatur bedienbar ist und seinen Zustand ansagt (offen oder geschlossen, technisch über das Attribut `aria-expanded`).
Der zweite Weg – und hier wird es schwierig: wenn die Hauptseite selbst eine vollwertige, verlinkte Seite mit Inhalt ist und zusätzlich Unterseiten bekommen soll. Dann braucht es beides gleichzeitig – den Link zur Hauptseite und eine Möglichkeit, das Untermenü per Tastatur zu öffnen. Die vom W3C empfohlene Lösung ist hier ein eigener kleiner Schalter direkt neben dem Hauptpunkt – oft als „+“ dargestellt –, der ausschließlich das Auf- und Zuklappen übernimmt (ebenfalls über `aria-expanded`). So bleibt die Hauptseite ganz normal verlinkt, und das Untermenü ist trotzdem für alle bedienbar. Genau dieses Muster ist leider selten sauber umgesetzt.
Wenn du ein Theme prüfst, achte an der Demo genau darauf: Spring mit der Tab-Taste auf einen Menüpunkt mit Untermenü. Gibt es dort einen separaten Aufklapp-Button? Öffnet und schließt er per Enter oder Leertaste? Bleibt der Hauptpunkt weiterhin als Link erreichbar? Und schließt die Escape-Taste das Untermenü wieder?
Welche Themes ich empfehle – aus Erfahrung und aus Recherche
Aus eigener Erfahrung:
- Astra / Astra Pro – eine flexible, gut anpassbare Grundlage. Bei einfachen Menüs funktioniert das gut; bei aufwendigen Menüs mit mehreren Unterebenen stößt Astra allerdings an Grenzen und braucht Workarounds.
- Themes von WebMan Design (Oliver Juhas) – konsequent auf Barrierefreiheit ausgelegt. Mit Icelander habe ich gearbeitet: funktioniert gut, ist aber etwas sperrig. Sein moderneres, ebenfalls „accessibility-ready“ ausgezeichnetes Theme Michelle ist eine Überlegung wert.
- GeneratePress / GeneratePress Premium – ein schlankes, solides Fundament mit gutem Support in der Premium-Version.
- Bricks – bietet sehr viel Gestaltungsfreiheit, wenn man tiefer einsteigen möchte. Fürs barrierefreie Menü würde ich hier aber genau hinsehen: Bei der Tastaturbedienung von Untermenüs gibt es bekannte Schwächen – am besten die aktuelle Version testen.
Aus der Recherche – speziell mit Blick auf barrierefreie Menüs:
- Am saubersten setzen die WordPress-Standard-Block-Themes (z. B. Twenty Twenty-Four / Twenty Twenty-Five) zusammen mit dem Navigations-Block das oben beschriebene Aufklapp-Muster um. Wer besonderen Wert aufs Menü legt, ist hier gut aufgehoben – die Bearbeitung im Block-Editor ist allerdings gewöhnungsbedürftig.
- Kadence gilt als solide, hat bei der Tastaturbedienung des Menüs aber kleinere Schwächen – testen.
Ein Hinweis in eigener Sache: Themes und ihre Funktionen entwickeln sich weiter. Prüf vor der Entscheidung die aktuelle Version – am besten mit dem kleinen Menü-Test von oben. Die Premium-Versionen bieten dafür meist mehr Spielraum.
Ein Wort zu Page Buildern
Viele bauen mit einem Theme nicht „pur“, sondern setzen zusätzlich einen Page Builder ein – etwa Elementor, Beaver Builder oder Divi. Das ist völlig legitim, verschiebt die Frage der Barrierefreiheit aber noch einmal: Ein Page Builder erzeugt eigenen Code und eigene Strukturen. Ob dabei eine saubere Überschriften-Hierarchie, eine sinnvolle Reihenfolge, bedienbare Elemente und ein barrierefreies Menü herauskommen, hängt stark vom jeweiligen Builder und von der Sorgfalt bei der Umsetzung ab. Mit anderen Worten: Auch das beste barrierefreie Theme schützt nicht vor Barrieren, die erst im Page Builder entstehen. Das ist ein Thema für sich – dazu schreibe ich an anderer Stelle mehr.
Fazit
Wenn du eine barrierefreie Website erstellen möchtest, geh am besten diese Schritte durch:
- ein barrierefreies (oder ausreichend anpassbares) Theme finden,
- die Seitenstruktur barrierefrei aufbauen – eine logische Überschriften-Hierarchie und eine sinnvolle Reihenfolge der Inhalte, nicht allein nach der Optik,
- das Menü barrierefrei einrichten, gerade bei Untermenüs,
- die Plugins kritisch prüfen – auch sie müssen barrierefrei sein,
- die Inhalte barrierefrei erstellen (sinnvolle Alternativtexte, verständliche Überschriften, klare Linktexte),
- einen Abschluss-Test durchführen.
Das Theme ist die Grundlage – aber ob am Ende alles zugänglich ist, entscheidet vor allem, wie eine Seite aufgebaut wird: eine logische Überschriften-Hierarchie, eine sinnvolle Lese- und Bedienreihenfolge und eine saubere semantische Struktur. Das kann ein Template nicht für dich übernehmen; dafür braucht es Wissen und bewusste Entscheidungen bei der Umsetzung.
Und genau da liegt meine Erfahrung. Mein Part ist nicht das Umsetzen, sondern der Blick dafür, worauf es ankommt: Ich kenne WordPress gut, gebe dir die Tipps, die am Anfang oft fehlen, und sage dir, worauf du bei Theme, Struktur, Menü und Inhalten achten solltest. Und wenn du wissen willst, wo deine Seite wirklich steht, teste ich sie dir – ausführlich nach WCAG und BITV, oder erst einmal mit meinem schnellen Kurztest für barrierefreie Websites, wenn es nur ein grober Eindruck sein soll. Oft ist es genau dieser Blick von jemandem mit Übersicht, der den Unterschied macht.
