WordPress-Theme barrierefrei prüfen: Darauf solltest du achten

Ein WordPress-Theme entscheidet über weit mehr als Farben, Schriftarten und die Position des Logos. Es liefert das Grundgerüst der Webseite. Navigation, Seitenaufbau, mobile Darstellung, Suchfunktion, Blogansicht, Fokusmarkierungen und viele andere Bereiche hängen zumindest teilweise vom Theme ab.

Genau deshalb lässt sich ein ungeeignetes Theme später nur begrenzt durch gute Inhalte ausgleichen.

Du kannst jedem Bild einen passenden Alt-Text geben und deine Überschriften sorgfältig ordnen. Wenn sich das Hauptmenü jedoch nicht mit der Tastatur öffnen lässt, bleibt die Webseite trotzdem schwer bedienbar. Ähnlich sieht es aus, wenn ein feststehender Header Inhalte verdeckt oder Links nur durch eine kaum erkennbare Farbänderung auffallen.

Die Prüfung sollte daher möglichst früh beginnen. Am besten noch bevor das Theme auf einer neuen Webseite eingesetzt wird. Bei einer bestehenden WordPress-Seite lohnt sich der Test ebenfalls. Viele Schwachstellen lassen sich korrigieren, ohne sofort das gesamte Design auszutauschen.

Das Theme ist nur ein Teil der Webseite

Zunächst ist eine wichtige Unterscheidung nötig: Ein barrierearmes Theme macht nicht automatisch alle Inhalte barrierefrei.

Das Theme steuert beispielsweise den Header, das Menü, den Footer, die Darstellung von Blogbeiträgen und häufig auch Formular- oder Buttonstile. Was später in die Seite eingebaut wird, liegt jedoch beim Websitebetreiber.

Auch mit einem guten Theme können neue Barrieren entstehen:

• Bilder werden ohne passende Alt-Texte hochgeladen.
• Überschriften werden nur nach ihrer Größe ausgewählt.
• Ein Page Builder fügt schlecht bedienbare Slider hinzu.
• Das Kontaktformular besitzt keine verständlichen Labels.
• Ein Cookie-Banner blockiert die Tastaturbedienung.
• Texte werden auf unruhigen Hintergrundbildern platziert.
• Ein zusätzliches Plugin erzeugt ein problematisches Popup.

Andersherum kann ein Theme mit einzelnen Schwächen häufig verbessert werden. Entscheidend ist, ob die Probleme überschaubar sind oder tief in der grundlegenden Struktur stecken.

Was bedeutet „Accessibility Ready“ bei einem Theme?

Im offiziellen WordPress-Theme-Verzeichnis kann nach Themes mit der Kennzeichnung „Accessibility Ready“ gesucht werden. Diese Bezeichnung ist ein hilfreicher Ausgangspunkt. Sie zeigt, dass das Theme bestimmte Anforderungen erfüllen musste.

Als vollständige Garantie sollte man die Kennzeichnung trotzdem nicht verstehen.

Nach der Installation können Einstellungen, Plugins und eigene Inhalte das Ergebnis verändern. Auch ein Theme, das ursprünglich gut geprüft wurde, kann durch einen individuell erstellten Header, ein neues Menü-Plugin oder ungünstige Farbanpassungen wieder Barrieren erhalten.

Die Kennzeichnung bedeutet daher nicht: installieren, aktivieren, fertig.

Sie bedeutet eher: Dieses Theme bietet wahrscheinlich eine bessere Grundlage als ein vergleichbares Theme, bei dem Barrierefreiheit gar keine erkennbare Rolle spielt.

Ein eigener Test bleibt notwendig.

Prüfe zuerst die öffentliche Demo

Viele Themes bieten eine Vorschau oder eine öffentliche Demoseite. Diese sollte nicht nur mit der Maus betrachtet werden.

Lege die Maus beiseite und drücke direkt nach dem Laden die Tab-Taste. Schon die ersten Sekunden verraten viel über die Qualität der Umsetzung.

Achte dabei auf folgende Fragen:

• Erscheint ein Sprunglink zum Hauptinhalt?
• Ist deutlich zu erkennen, welches Element gerade aktiv ist?
• Lässt sich die Navigation erreichen?
• Können Untermenüs geöffnet werden?
• Ist die Suchfunktion bedienbar?
• Gelangst du anschließend zum eigentlichen Seiteninhalt?
• Kannst du alle sichtbaren Buttons aktivieren?
• Bleibst du an irgendeiner Stelle hängen?

Funktioniert bereits die Theme-Demo nicht ohne Maus, sollte man vorsichtig sein. Natürlich kann ein Entwickler später nachbessern. Bei einem neuen Projekt ist es jedoch meist vernünftiger, eine sauberere Grundlage zu wählen.

Die Tastaturbedienung ist einer der wichtigsten Tests

Viele Menschen navigieren nicht mit einer klassischen Maus. Sie verwenden eine Tastatur, eine spezielle Steuerung, Sprachbefehle oder andere Hilfsmittel.

Alle wichtigen Funktionen müssen deshalb ohne Maus erreichbar sein.

Bei einem WordPress-Theme betrifft das vor allem:

• Hauptnavigation und Untermenüs
• mobile Menüschaltfläche
• Suchfunktion
• Links und Buttons
• Kommentarbereiche
• Seitennavigation bei Blogbeiträgen
• Akkordeons und Tabs
• Slider-Steuerungen
• Schließen-Schaltflächen von Overlays
• Warenkorb und Benutzerkonto bei Shops

Die Tab-Taste bewegt den Fokus normalerweise vorwärts. Mit Umschalt und Tab geht es zurück. Enter aktiviert Links und Schaltflächen. Bei bestimmten Bedienelementen werden zusätzlich Leertaste, Escape oder die Pfeiltasten benötigt.

Der Test muss nicht kompliziert sein. Bediene die Webseite einige Minuten konsequent ohne Maus. Wenn du selbst schnell die Orientierung verlierst, geht es anderen Nutzern wahrscheinlich genauso.

Der Tastaturfokus muss deutlich sichtbar bleiben

Manche Themes ermöglichen technisch eine Tastaturnavigation, zeigen aber kaum an, wo sich der Fokus befindet.

Der aktive Link erhält vielleicht nur einen sehr dünnen hellgrauen Rahmen. Manchmal verschwindet die Markierung sogar vollständig, weil sie in einer CSS-Datei entfernt wurde.

Das ist ein ernstes Problem.

Ein Tastaturnutzer muss jederzeit erkennen können, welches Element beim nächsten Drücken von Enter aktiviert wird. Ohne sichtbare Markierung wird die Navigation zum Ratespiel.

Ein guter Fokuszustand hebt sich klar vom normalen Element ab. Das kann durch einen kontrastreichen Rahmen, eine deutliche Unterstreichung oder eine gut erkennbare Änderung von Vorder- und Hintergrundfarbe geschehen.

Wichtig ist nicht, dass überall derselbe blaue Browserrahmen erscheint. Der Fokus darf zum Design passen. Er darf nur nicht unsichtbar werden.

Prüfe außerdem, ob feststehende Header, Cookie-Banner oder andere Elemente die aktuelle Markierung verdecken. Ein vorhandener Fokus nützt wenig, wenn er hinter einem Overlay verschwindet.

Ein Sprunglink erspart unnötige Wiederholungen

Ein Sprunglink wird häufig mit „Zum Hauptinhalt springen“ oder „Direkt zum Inhalt“ beschriftet. Er erscheint oft erst dann sichtbar, wenn die Tab-Taste gedrückt wird.

Seine Aufgabe ist einfach: Wiederkehrende Bereiche wie Logo und Hauptnavigation können übersprungen werden.

Ohne einen solchen Link müsste ein Tastaturnutzer auf jeder Unterseite erneut durch das gesamte Menü navigieren. Bei fünf Links ist das vielleicht noch überschaubar. Bei umfangreichen Navigationen mit mehreren Unterpunkten wird es schnell mühsam.

Teste den Sprunglink praktisch:

1. Öffne eine Unterseite.
2. Drücke einmal die Tab-Taste.
3. Aktiviere den angebotenen Sprunglink.
4. Prüfe, ob der Fokus tatsächlich beim Hauptinhalt landet.

Manche Themes zeigen zwar einen entsprechenden Link an, führen aber nicht zuverlässig an die richtige Stelle. Auch die Sichtbarkeit ist wichtig. Ein weißer Sprunglink auf weißem Hintergrund hilft niemandem.

Die Navigation verdient besondere Aufmerksamkeit

Das Menü ist auf fast jeder Unterseite vorhanden. Ein Fehler an dieser Stelle zieht sich daher durch die gesamte Webseite.

Eine gute Navigation sollte verständlich aufgebaut und vollständig per Tastatur nutzbar sein. Untermenüs dürfen nicht ausschließlich erscheinen, wenn der Mauszeiger über einem Eintrag schwebt.

Besonders genau solltest du folgende Punkte prüfen:

• Können Hauptpunkte mit der Tab-Taste erreicht werden?
• Sind Untermenüs ohne Maus zu öffnen?
• Wird verständlich vermittelt, ob ein Untermenü geöffnet oder geschlossen ist?
• Bleibt der Fokus in einer nachvollziehbaren Reihenfolge?
• Kann ein geöffnetes Menü wieder geschlossen werden?
• Funktionieren Links und Schaltflächen so, wie ihre Bezeichnung vermuten lässt?
• Ist der aktuelle Seitenbereich im Menü erkennbar?

Ein häufiges Problem entsteht, wenn ein Menüpunkt gleichzeitig zu einer Übersichtsseite führen und ein Untermenü öffnen soll. Das Theme muss dafür eine klare Bedienung anbieten. Ein kleiner Pfeil neben dem Link kann helfen, sofern dieser selbst als verständliche Schaltfläche umgesetzt ist.

Mobile Menüs getrennt vom Desktop testen

Das Desktop-Menü kann einwandfrei funktionieren, während die mobile Navigation kaum nutzbar ist.

Auf kleineren Bildschirmen wird das Menü meistens über ein Symbol mit drei Linien geöffnet. Für sehende Nutzer ist die Bedeutung häufig bekannt. Ein Screenreader benötigt jedoch eine verständliche Bezeichnung wie „Menü öffnen“.

Nach dem Öffnen sollte der Zustand ebenfalls erkennbar sein. Die Schaltfläche kann dann beispielsweise als „Menü schließen“ ausgegeben werden.

Achte auf dem Smartphone oder in einer schmalen Browseransicht auf diese Punkte:

• Ist die Menüschaltfläche groß genug?
• Hat sie einen ausreichenden Kontrast?
• Wird ihre Funktion verständlich benannt?
• Sind alle Menüeinträge erreichbar?
• Kann durch ein langes Menü gescrollt werden?
• Lassen sich Untermenüs bedienen?
• Funktioniert die Schließen-Schaltfläche?
• Bleibt der Seiteninhalt im Hintergrund ruhig?
• Kehrt der Fokus nach dem Schließen an eine sinnvolle Stelle zurück?

Ein mobiles Menü sollte nicht nur mit dem Finger getestet werden. Auch die Tastaturbedienung gehört dazu, da Smartphones und Tablets ebenfalls mit externen Tastaturen oder unterstützenden Technologien verwendet werden.

Eine logische Seitenstruktur hilft bei der Orientierung

Ein Theme sollte sinnvolle Bereiche für Kopfzeile, Navigation, Hauptinhalt, ergänzende Inhalte und Footer ausgeben.

Für sehende Besucher sind diese Bereiche durch das Design meistens erkennbar. Screenreader orientieren sich stärker an der technischen Struktur.

Ein gut aufgebautes Theme ermöglicht es, gezielt zur Navigation, zum Hauptinhalt oder zum Footer zu springen. Sind alle Bereiche nur aus beliebigen verschachtelten Containern zusammengesetzt, wird diese Orientierung schwieriger.

Das lässt sich mit Browser-Werkzeugen oder einem Screenreader genauer prüfen. Für einen ersten Eindruck reicht häufig bereits eine einfache Frage:

Kann ich mir die Seite auch ohne ihre Farben und ihre grafische Gestaltung als logisch gegliedertes Dokument vorstellen?

Wenn der gesamte Aufbau nur durch große Abstände und Hintergrundfarben verständlich wird, fehlt möglicherweise eine saubere Struktur.

Überschriften dürfen nicht vom Theme durcheinandergebracht werden

Die H1 sollte normalerweise das Hauptthema der jeweiligen Seite beschreiben. Danach folgen H2-Überschriften für die wichtigsten Abschnitte und bei Bedarf H3-Unterpunkte.

Ein Theme kann diese Struktur unterstützen oder unnötig erschweren.

Typische Probleme sind:

• Das Logo oder der Website-Name wird auf jeder Seite als zusätzliche H1 ausgegeben.
• Der sichtbare Seitentitel sieht groß aus, ist technisch aber nur normaler Text.
• Überschriften in der Sidebar springen ohne Zusammenhang zwischen verschiedenen Ebenen.
• Widget-Titel werden unnötig als hohe Überschriftenebenen ausgegeben.
• Der Blogtitel und der eigentliche Beitragstitel konkurrieren miteinander.
• Karten und Teaser erzeugen zahlreiche gleiche Überschriften.

Betrachte mehrere Seitentypen: Startseite, normale Unterseite, Blogbeitrag, Kategorieansicht, Suchergebnisse und gegebenenfalls Produktseite.

Eine gute Struktur auf der Startseite sagt noch nichts darüber aus, wie das Theme einen einzelnen Beitrag oder ein Archiv aufbaut.

Das Theme muss mit vergrößerter Darstellung funktionieren

Viele Nutzer vergrößern Texte oder die gesamte Browseransicht. Dabei darf die Webseite nicht auseinanderfallen.

Ein schneller Test gelingt über den Browser-Zoom. Vergrößere die Seite deutlich und beobachte, was passiert.

Problematisch sind unter anderem:

• Menüpunkte liegen übereinander.
• Texte werden abgeschnitten.
• Buttons verlieren ihre Beschriftung.
• Der Inhalt kann nur noch durch seitliches Scrollen gelesen werden.
• Ein feststehender Header nimmt einen großen Teil des Bildschirms ein.
• Popups passen nicht mehr vollständig in das Fenster.
• Spalten werden zu schmal.
• Formulare ragen aus dem sichtbaren Bereich.

Ein Theme muss nicht bei jeder Vergrößerung genauso aussehen wie vorher. Elemente dürfen umbrechen und untereinander rutschen. Entscheidend ist, dass Inhalte erhalten bleiben und weiterhin bedient werden können.

Achte auf feststehende Header und Leisten

Sticky Header sind beliebt. Die Navigation bleibt dabei am oberen Bildschirmrand stehen, während der Nutzer nach unten scrollt.

Das kann praktisch sein. Bei Vergrößerung wird aus einem schmalen Header jedoch schnell eine große Fläche, die einen erheblichen Teil des Bildschirms verdeckt.

Ähnliche Probleme verursachen:

• feststehende Cookie-Leisten,
• Chat-Schaltflächen,
• klebende Kontaktbuttons,
• dauerhaft sichtbare Werbebanner,
• „Nach oben“-Schaltflächen und
• mobile Navigationsleisten.

Prüfe, ob diese Elemente Inhalte oder den Tastaturfokus überdecken. Besonders auf kleinen Bildschirmen kann eine Kombination aus Header, Cookie-Banner und Chat-Widget fast den gesamten nutzbaren Bereich blockieren.

Nicht jedes feste Element muss entfernt werden. Seine Größe und Position sollten aber sinnvoll bleiben.

Farbkontraste in allen Theme-Bereichen prüfen

Ein Theme bietet häufig mehrere Farbschemata und umfangreiche Anpassungsmöglichkeiten. Dadurch kann eine ursprünglich gut lesbare Vorlage mit wenigen Änderungen unzugänglich werden.

Kontrolliert werden sollten nicht nur normale Texte. Auch diese Bereiche brauchen ausreichend Kontrast:

• Menüpunkte
• Untermenüs
• Links
• Buttons
• Formularfelder
• Platzhalter
• Fehlermeldungen
• Seitennavigation
• Kategorien und Schlagwörter
• Fokusmarkierungen
• Icons
• Trennlinien wichtiger Bedienelemente

Besonders tückisch sind halbtransparente Header über wechselnden Bildern. Auf einem dunklen Foto ist die weiße Navigation gut lesbar, auf einer hellen Aufnahme verschwindet sie beinahe.

Auch Hover-Zustände sollten geprüft werden. Wenn ein Button beim Darüberfahren plötzlich eine schwächere Farbkombination erhält, wird aus einem guten Ausgangszustand ein neues Problem.

Links müssen auch ohne Farbsehen erkennbar sein

Viele Themes unterscheiden Links im Fließtext ausschließlich durch eine andere Farbe.

Das kann funktionieren, wenn der Unterschied deutlich genug ist. Häufig ist die Abweichung jedoch sehr gering. Ein dunkles Grau und ein leicht bläuliches Grau sehen für manche Nutzer fast gleich aus.

Eine Unterstreichung ist eine einfache und bekannte Möglichkeit, Links erkennbar zu machen. Sie muss nicht bei jeder Navigation oder jedem Button eingesetzt werden. Im normalen Fließtext ist sie jedoch oft hilfreich.

Prüfe außerdem die Zustände beim Darüberfahren und beim Tastaturfokus. Ein Link sollte nicht erst dann erkennbar werden, wenn jemand zufällig mit dem Mauszeiger darüberfährt.

Das Theme sollte verständliche Linktexte unterstützen

Ein Theme erzeugt an einigen Stellen eigene Links. Dazu gehören beispielsweise:

• „Weiterlesen“-Links in Blogübersichten
• Navigation zu älteren und neueren Beiträgen
• Seitenzahlen
• Links zu Kommentaren
• Schaltflächen in Suchergebnissen
• Autoren- und Kategorieverlinkungen

Wenn unter zehn Beitragsvorschauen zehnmal nur „Weiterlesen“ steht, sind diese Links außerhalb ihres sichtbaren Zusammenhangs kaum unterscheidbar.

Besser wäre eine ergänzende Bezeichnung, die den jeweiligen Beitragstitel einbezieht. Sichtbar kann weiterhin „Weiterlesen“ stehen, während die zugängliche Bezeichnung genauer erklärt, welcher Beitrag geöffnet wird.

Prüfe eine Blogübersicht deshalb nicht nur optisch. Lass dir die Links mit einem Screenreader auflisten oder untersuche ihre zugänglichen Namen mit einem Browser-Werkzeug.

Formulare gehören ebenfalls zur Theme-Prüfung

Selbst wenn ein Kontaktformular später über ein Plugin eingebaut wird, beeinflusst das Theme häufig seine Darstellung.

Außerdem bringt WordPress selbst verschiedene Formulare mit:

• Suchformular
• Kommentarformular
• Login-Bereiche
• Passwortfelder
• Newsletter- oder Shopfunktionen, wenn sie integriert sind

Achte auf dauerhaft sichtbare Beschriftungen. Ein Suchfeld, das nur einen Platzhalter mit dem Wort „Suchen“ besitzt, kann problematisch sein. Auch Buttons sollten verständlich benannt werden.

Prüfe außerdem:

• Sind Feldränder deutlich erkennbar?
• Ist der Fokus sichtbar?
• Können Checkboxen gut bedient werden?
• Sind Fehlermeldungen lesbar?
• Reichen die Abstände auf dem Smartphone?
• Werden Pflichtfelder verständlich gekennzeichnet?

Ein Theme, das Formularfelder beinahe unsichtbar gestaltet, verursacht später auf jeder eingebundenen Formularseite zusätzlichen Aufwand.

Icons dürfen nicht ohne Bedeutung bleiben

Viele Themes setzen stark auf Symbole. Eine Lupe öffnet die Suche, drei Linien das Menü, eine Person das Benutzerkonto und ein Einkaufswagen den Warenkorb.

Für Screenreader muss die Funktion dieser Icons verständlich benannt sein.

Eine Schaltfläche darf nicht nur als „Button“ oder mit einem unverständlichen Dateinamen ausgegeben werden. Sie sollte beispielsweise als „Suche öffnen“, „Warenkorb anzeigen“ oder „Benutzerkonto öffnen“ erkannt werden.

Gleichzeitig sollten dekorative Symbole nicht unnötig vorgelesen werden. Wenn neben dem Text „Telefon“ zusätzlich ein Telefonsymbol erscheint, muss der Screenreader nicht zweimal dieselbe Information ausgeben.

Das Theme sollte also zwischen funktionalen und dekorativen Grafiken unterscheiden.

Logo und Header richtig betrachten

Das Logo verlinkt in vielen Themes zur Startseite. Der zugängliche Name sollte entsprechend verständlich sein.

Problematisch wäre eine Ausgabe wie:

„logo-final-2026.png, Grafik, Link“

Hilfreicher ist der Name des Unternehmens oder eine Bezeichnung wie:

„Unternehmensname – Startseite“

Auch die sichtbare Alternative zum Logo muss betrachtet werden. Wenn ausschließlich eine Grafik verwendet wird und diese nicht lädt, sollte der Seitenkopf trotzdem verständlich bleiben.

Bei Block-Themes können Logo, Seitentitel und Navigation relativ frei zusammengestellt werden. Dadurch steigt die Flexibilität, aber auch die Verantwortung des Websitebetreibers. Ein sauberer Standardheader kann durch ungünstige Anpassungen schnell verschlechtert werden.

Animationen und Bewegung sparsam prüfen

Einige Themes werben mit weichen Einblendungen, Parallax-Effekten, animierten Zahlen und automatischen Slidern.

Solche Effekte können eine Webseite lebendiger wirken lassen. Sie können aber auch ablenken oder körperliche Beschwerden auslösen.

Achte besonders auf:

• automatisch wechselnde Slider,
• dauerhaft laufende Animationen,
• große Zoombewegungen,
• Parallax-Hintergründe,
• schnell einfliegende Inhalte,
• blinkende Elemente und
• Bewegung, die beim Scrollen ausgelöst wird.

Automatische Inhalte sollten kontrollierbar sein. Besucher brauchen genügend Zeit zum Lesen und sollten Bewegung nach Möglichkeit anhalten können.

Ein Theme, bei dem jede Überschrift erst nach einer Animation sichtbar wird, ist nicht nur aus Sicht der Barrierefreiheit fragwürdig. Es kann die Webseite auch unnötig langsam und unruhig wirken lassen.

Inhalte auf Hover oder Fokus müssen erreichbar bleiben

Manche Themes zeigen zusätzliche Informationen nur dann, wenn sich der Mauszeiger über einem Bild oder einer Karte befindet.

Das können Produktdetails, Buttons, Bildbeschreibungen oder Untermenüs sein.

Diese Inhalte müssen auch per Tastatur erreichbar sein. Außerdem dürfen sie nicht sofort verschwinden, wenn der Mauszeiger oder Fokus minimal bewegt wird. Nutzer brauchen genügend Zeit, um den eingeblendeten Bereich wahrzunehmen und zu bedienen.

Auf Touchscreens existiert der klassische Hover-Zustand ohnehin nicht. Ein Theme, das wichtige Informationen ausschließlich dort versteckt, funktioniert bereits auf normalen Smartphones nicht zuverlässig.

Blog, Archive und Suchergebnisse nicht vergessen

Viele Theme-Tests konzentrieren sich auf die Startseite. Dabei werden andere Ansichten häufig übersehen.

Öffne deshalb auch:

• einen einzelnen Blogbeitrag,
• eine Kategorie,
• eine Schlagwortseite,
• das Autorenarchiv,
• die Suchergebnisse,
• eine Seite ohne Suchtreffer,
• die 404-Fehlerseite und
• ältere oder neuere Beitragsseiten.

Gerade dort zeigen sich Probleme wie unklare Überschriften, mehrfach verwendete „Weiterlesen“-Links oder schlecht beschriftete Navigationspfeile.

Eine barrierearme Startseite reicht nicht aus, wenn Besucher nach einer Suche in einer unübersichtlichen Ergebnisliste landen.

Block-Theme, klassisches Theme oder Page Builder?

Ob ein Theme mit dem Site Editor, dem klassischen Customizer oder einem Page Builder arbeitet, sagt allein noch wenig über seine Barrierefreiheit aus.

Block-Themes können eine klare und moderne Grundlage bieten. Gleichzeitig lassen sich Header, Navigationen und Vorlagen sehr frei verändern. Dadurch können Websitebetreiber auch versehentlich wichtige Strukturen entfernen.

Klassische Themes sind oft stärker vorgegeben. Das kann Einschränkungen bedeuten, verhindert aber manchmal problematische Eigenkonstruktionen.

Page-Builder-Themes bieten besonders viele Gestaltungsmöglichkeiten. Dabei entstehen schnell verschachtelte Layouts, doppelte mobile Inhalte oder unklare Bedienelemente.

Entscheidend ist nicht die Kategorie des Themes, sondern das fertige Ergebnis.

Ein schlichtes klassisches Theme kann hervorragend funktionieren. Ein modernes Block-Theme kann schlecht angepasst sein. Und eine sorgfältig erstellte Divi- oder Elementor-Seite kann besser zugänglich sein als eine unüberlegte Standardinstallation.

Theme und Plugins immer zusammen testen

Ein Theme funktioniert selten allein. Auf einer typischen WordPress-Seite kommen mehrere Plugins hinzu:

• Kontaktformular
• Cookie-Banner
• SEO
• Shop
• Slider
• Popup
• Buchungssystem
• Mehrsprachigkeit
• Social-Media-Integration

Jedes Plugin kann eigene Stile und Bedienelemente mitbringen. Manche übernehmen die Farben des Themes, andere nicht. Einige verändern die Navigation oder laden zusätzliche Overlays.

Nach der Installation eines wichtigen Plugins sollte deshalb erneut getestet werden.

Ein Theme kann beispielsweise einen sehr guten Tastaturfokus besitzen. Das Popup-Plugin entfernt ihn jedoch innerhalb seines Dialogfensters. Oder das Cookie-Banner liegt über dem mobilen Menü und verdeckt dessen Schließen-Schaltfläche.

Barrierefreiheit entsteht im Zusammenspiel aller Komponenten.

WooCommerce stellt zusätzliche Anforderungen

Bei einem WordPress-Shop muss das Theme wesentlich mehr leisten als bei einem einfachen Blog.

Zu prüfen sind unter anderem:

• Produktübersichten
• Produktbilder und Galerien
• Variantenwahl
• Mengenfelder
• Warenkorb
• Gutscheine
• Fehlermeldungen
• Checkout
• Benutzerkonto
• Bestellbestätigung

Ein Theme kann als „WooCommerce-kompatibel“ beworben werden und trotzdem schlecht erkennbare Buttons oder unklare Variantenfelder anzeigen.

Führe daher einen vollständigen Testkauf bis kurz vor der tatsächlichen Zahlung durch. Verwende dabei nicht nur die Maus, sondern auch die Tastatur.

Achte darauf, ob Fehler verständlich erklärt werden. Wenn eine Lieferadresse fehlt, sollte der Nutzer nicht nur einen roten Rahmen sehen. Er muss erfahren, welche Angabe benötigt wird.

Prüfe das Theme mit echten Inhalten

Eine Theme-Demo verwendet meist sorgfältig ausgewählte Bilder und ideal lange Überschriften. In der eigenen Webseite sieht das später anders aus.

Teste deshalb unterschiedliche Inhalte:

• sehr lange Seitentitel,
• kurze und lange Menüpunkte,
• Bilder im Hoch- und Querformat,
• Beiträge ohne Bild,
• lange Wörter,
• verschachtelte Listen,
• Tabellen,
• Zitate,
• Videos und
• Formulare mit Fehlermeldungen.

Ein Theme sollte nicht nur mit perfektem Demomaterial funktionieren.

Besonders bei deutschen Texten treten durch lange zusammengesetzte Wörter schneller Umbruchprobleme auf. Ein Button mit „Barrierefreiheitserklärung öffnen“ braucht mehr Platz als das kurze englische „Read more“.

Updates und Pflege des Themes berücksichtigen

Ein technisch gutes Theme kann langfristig problematisch werden, wenn es nicht mehr gepflegt wird.

Prüfe vor der Auswahl:

• Wann erschien das letzte Update?
• Wird das Theme mit aktuellen WordPress-Versionen getestet?
• Reagiert der Anbieter auf Fehlermeldungen?
• Gibt es eine verständliche Dokumentation?
• Werden bekannte Barrierefreiheitsprobleme offen behandelt?
• Funktioniert das Theme mit aktuellen Browsern und Geräten?

Sehr alte Themes können weiterhin laufen. Das bedeutet aber nicht, dass sie moderne Anforderungen erfüllen oder mit neuen Plugins zuverlässig zusammenspielen.

Bei kommerziellen Themes lohnt sich auch ein Blick auf den Support. Kann der Anbieter konkrete Fragen zur Tastaturbedienung oder zu Fokuszuständen beantworten, oder wird nur allgemein mit „barrierefreiem Design“ geworben?

Werbeaussagen kritisch betrachten

Bezeichnungen wie „100 % barrierefrei“, „vollständig BFSG-konform“ oder „automatisch WCAG-konform“ sollten bei einem Theme skeptisch machen.

Eine vollständige Webseite besteht nicht nur aus dem unveränderten Theme. Inhalte, Erweiterungen und individuelle Einstellungen spielen ebenfalls eine Rolle.

Ein seriöser Anbieter erklärt eher, welche Bereiche berücksichtigt wurden und wo Websitebetreiber selbst Verantwortung tragen.

Hilfreicher als eine große Werbeaussage sind konkrete Angaben:

• vollständige Tastaturbedienung,
• sichtbare Fokuszustände,
• vorhandener Sprunglink,
• semantische Struktur,
• geprüfte Kontraste,
• zugängliche mobile Navigation,
• Unterstützung bei vergrößerter Darstellung.

Je genauer die Angaben, desto besser lassen sie sich praktisch überprüfen.

Automatische Prüfprogramme sind nur ein Teil des Tests

Automatische Werkzeuge können einige Probleme schnell aufdecken. Dazu gehören fehlende Beschriftungen, bestimmte Kontrastprobleme, leere Links oder auffällige Strukturen.

Das ist hilfreich, besonders bei der ersten Bestandsaufnahme.

Trotzdem erkennen automatische Tests nur einen Teil der tatsächlichen Barrieren. Ein Werkzeug weiß nicht zuverlässig, ob ein Menü angenehm bedienbar ist. Es erlebt nicht, wie verwirrend eine Fokusreihenfolge wirkt. Auch die Verständlichkeit von Linktexten oder Fehlermeldungen lässt sich nur begrenzt automatisch bewerten.

Eine sinnvolle Prüfung kombiniert deshalb:

• automatischen Scan,
• Tastaturbedienung,
• Vergrößerung,
• Smartphone-Test,
• Screenreader-Test und
• menschliche Bewertung.

Die beste Punktzahl eines Prüfprogramms ist kein Ersatz für echte Nutzung.

Ein einfacher Ablauf für die Theme-Prüfung

Du musst nicht jede technische Einzelheit auf einmal kontrollieren. Ein strukturierter Ablauf macht den Test überschaubarer.

Schritt 1: Tastaturtest

Bediene Startseite, Menü, Suche, Formulare und Footer ohne Maus. Prüfe Fokus, Reihenfolge und Untermenüs.

Schritt 2: Mobile Navigation

Öffne die Seite auf einem Smartphone. Teste Menü, Unterpunkte, Schließen-Funktion und lange Inhalte.

Schritt 3: Vergrößerung

Vergrößere die Browseransicht deutlich. Achte auf abgeschnittene Texte, Überlagerungen und seitliches Scrollen.

Schritt 4: Farben und Zustände

Prüfe Texte, Links, Buttons, Fokus, Hover-Zustände und Fehlermeldungen auf ausreichenden Kontrast.

Schritt 5: Seitenstruktur

Kontrolliere H1, H2 und H3 sowie Navigation, Hauptinhalt und Footer.

Schritt 6: Formulare

Teste Suche, Kommentare, Kontaktformular und gegebenenfalls Checkout mit korrekten und fehlerhaften Eingaben.

Schritt 7: Screenreader

Höre dir wenigstens Navigation, Überschriften, Buttons und wichtige Formulare an.

Schritt 8: Weitere Seitentypen

Prüfe nicht nur die Startseite, sondern auch Beiträge, Archive, Suchergebnisse und Fehlerseiten.

Damit findest du bereits einen großen Teil der typischen Theme-Probleme.

Wann lohnt sich eine Korrektur?

Nicht jedes Problem rechtfertigt einen kompletten Theme-Wechsel.

Ein fehlender Sprunglink, ein schwacher Fokusrahmen oder ein schlechter Linkkontrast lassen sich häufig gezielt korrigieren. Auch einzelne Beschriftungen im mobilen Menü können durch ein Child-Theme oder eine passende Anpassung verbessert werden.

Eine Überarbeitung lohnt sich besonders, wenn:

• das Theme ansonsten stabil läuft,
• nur wenige klar begrenzte Fehler vorhanden sind,
• der Anbieter weiterhin Updates liefert,
• keine umfangreichen Sonderlösungen nötig sind und
• die bestehende Seite viele individuelle Inhalte enthält.

Wichtig ist, Änderungen sauber zu dokumentieren. Direkte Anpassungen im Haupt-Theme können beim nächsten Update überschrieben werden.

Wann ist ein Theme-Wechsel sinnvoller?

Ein Wechsel sollte erwogen werden, wenn grundlegende Probleme zusammenkommen.

Dazu gehören beispielsweise:

• Menüs sind ohne Maus kaum nutzbar.
• Der HTML-Aufbau ist unübersichtlich und schwer korrigierbar.
• Fokuszustände werden an vielen Stellen entfernt.
• Das Theme ist seit langer Zeit ungepflegt.
• Mobile Ansichten brechen bei Vergrößerung auseinander.
• Wichtige Funktionen hängen von unzugänglichen Zusatzplugins ab.
• Der Anbieter reagiert nicht auf bekannte Fehler.
• Jede Korrektur erzeugt an anderer Stelle ein neues Problem.

Bei einer kleinen Webseite kann ein Theme-Wechsel dann schneller und günstiger sein als zahlreiche Einzelreparaturen.

Bei großen Seiten sollte vorher genau geplant werden. Ein Wechsel kann Layouts, Widgets, Shortcodes und individuelle Funktionen beeinflussen.

Was das Theme im Zusammenhang mit dem BFSG bedeutet

Das Theme allein entscheidet nicht darüber, ob eine Webseite Anforderungen des BFSG erfüllt.

Es bildet jedoch einen wichtigen Teil der technischen Grundlage. Besonders bei Shops, Buchungen und anderen digitalen Verbraucherangeboten können schlecht bedienbare Menüs, Formulare oder Auswahlfelder den gesamten Vorgang blockieren.

Ein barrierearmes Theme erleichtert die weitere Arbeit. Es ersetzt aber nicht die Prüfung des vollständigen Angebots.

Bei einem Online-Shop muss beispielsweise der gesamte Weg von der Produktauswahl bis zur Bestätigung funktionieren. Bei einer Terminbuchung gehören Kalender, Formular und Rückmeldung dazu.

Ein guter Header ist wichtig. Er reicht allein jedoch nicht aus.

Fazit: Ein Theme muss mehr können als gut aussehen

Bei der Auswahl eines WordPress-Themes stehen häufig Farben, Demo-Layouts und Gestaltungsmöglichkeiten im Mittelpunkt. Die entscheidenden Fragen zeigen sich aber erst bei der Bedienung.

Kann das Menü ohne Maus verwendet werden? Ist der Fokus deutlich sichtbar? Funktioniert die mobile Navigation? Bleibt die Seite bei Vergrößerung lesbar? Sind Formulare, Links und Buttons verständlich?

Ein Theme mit einer ruhigen Gestaltung und sauberer Grundstruktur ist langfristig häufig die bessere Wahl als eine spektakuläre Vorlage mit unzähligen Effekten.

Die Prüfung muss nicht sofort jedes Detail abdecken. Schon ein konsequenter Tastaturtest, eine starke Vergrößerung und ein Blick auf das mobile Menü zeigen viele Schwachstellen.

Verlasse dich weder auf eine schöne Demo noch auf eine einzelne Kennzeichnung. Entscheidend ist die fertige Webseite – mit echten Inhalten, Plugins und den Einstellungen, die später tatsächlich verwendet werden.

Ein gutes WordPress-Theme fällt bei der Bedienung kaum auf. Es stellt sich nicht in den Weg, sondern sorgt dafür, dass Besucher zuverlässig zu den Inhalten und Funktionen gelangen, die sie benötigen.

Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.