Ratgeber

WordPress barrierefrei machen: Theme, Plugins, Inhalte

Veröffentlicht am 27. Oktober 2026

WordPress machen Sie barrierefrei, indem Sie an fünf Stellen selbst Hand anlegen: ein Theme wählen und prüfen, Ihre Inhalte im Block-Editor sauber auszeichnen, Menüs tastaturbedienbar einstellen, jedes Formular- und Frontend-Plugin testen und am Ende selbst mit Tastatur, Zoom und einem automatischen Test nachprüfen. WordPress selbst liefert dafür eine gute Grundlage, denn Code für WordPress Core, die WordPress.org-Websites und offizielle Plugins soll laut den WordPress Accessibility Coding Standards WCAG 2.2 auf Stufe AA erfüllen; für Theme, Plugins und Inhalte sind Sie zuständig.

Wie WordPress im Vergleich zu Shopify, Shopware und anderen Systemen dasteht, zeigt die Übersicht Barrierefreier Onlineshop: Shopify, WooCommerce, Shopware und Co.. Dieser Artikel behandelt die WordPress-Website selbst: Startseite, Inhaltsseiten, Blog, Menü und Kontaktformular. Den Shop-Teil mit Produktseiten, Warenkorb und Checkout behandelt WooCommerce barrierefrei machen; wie Sie die Erklärung zur Barrierefreiheit als Seite anlegen und verlinken, steht in Barrierefreiheitserklärung in WordPress und WooCommerce einbinden.

Die Dokumentation von WordPress.org ist englisch. Wir nennen die englischen Bezeichnungen, damit Sie sie mit der Doku abgleichen können; in einem deutschsprachigen Dashboard stehen dort die übersetzten Namen. Alle Quellen gelesen am 27.10.2026.

Die fünf Bereiche im Überblick

Bereich 1: das Theme wählen und prüfen

Was „accessibility-ready“ bedeutet

Im WordPress-Theme-Verzeichnis können Sie nach dem Schlagwort „Accessibility ready“ filtern. Laut Theme Handbook: Accessibility dürfen eingereichte Themes das Schlagwort tragen, wenn sie eine manuelle Prüfung durch ein Mitglied des Accessibility-Teams bestanden haben. Dieselbe Seite stellt klar: Das Schlagwort bedeutet nicht, dass das Theme WCAG AA erfüllt, sondern dass es die Mindeststandards des Review-Teams erreicht.

Die Anforderungen für das Schlagwort umfassen derzeit 18 Punkte. Die wichtigsten mit dem, was die verlinkten Prüfanleitungen der WordPress Accessibility Knowledge Base konkret verlangen:

Die übrigen Punkte betreffen Landmarks, Bedienelemente mit Namen, Rolle und Zustand, eindeutige Linktexte, Alternativtexte, Audio, Video und Animationen, unerwartete Kontextwechsel, Inhalte bei Hover und Fokus sowie Text nur für Screenreader. Die Zuordnung zu WCAG-Kriterien in der Tabelle ist unsere; die Prüfanleitungen verlinken jeweils die passenden Understanding-Dokumente des W3C.

So gehen Sie bei der Theme-Wahl vor

1. Schlagwort prüfen. Auf der Theme-Seite im Verzeichnis steht „Accessibility ready“ unter den Schlagwörtern, etwa bei Twenty Twenty-Five.
2. accessibility.txt lesen. Laden Sie das Theme über Download von seiner Seite herunter, entpacken Sie es und öffnen Sie im Hauptordner die Datei accessibility.txt. Laut Prüfanleitung soll sie Website-Betreibern bei der Wahl helfen und nennt Prüfstand, Testweg, Funktionen und wie Sie Barrieren melden. Fehlt die Datei, fragen Sie beim Anbieter nach.
3. Theme von außerhalb des Verzeichnisses? Dann gibt es kein Schlagwort. Fragen Sie schriftlich nach einem Konformitätsbericht (ACR oder VPAT) und testen Sie das Theme selbst mit den Schritten unten.
4. Selbst testen, auch mit „accessibility-ready“. Das Schlagwort gilt für das Theme in Standardeinstellung. Ihre Farben, Schriften, eigenes CSS und Ihre Inhalte prüft niemand außer Ihnen.

Bereich 2: Inhalte im Block-Editor

Hier entstehen die meisten Barrieren, die nur Sie beheben können, weil sie in Ihren Texten und Bildern stecken.

Überschriften

• Echte Heading-Blöcke statt fetter Absätze. Laut Heading-Block-Doku tippen Sie in einem neuen Absatz ## und ein Leerzeichen für H2, ### für H3, oder /h2 und Enter.
• Keine zweite H1. Laut derselben Doku ist meist der Seitentitel die H1, weitere Heading-Blöcke folgen als H2, H3 und so weiter; je nach Theme und Vorlage kann das abweichen.
• Reihenfolge kontrollieren. Die Doku empfiehlt: „View the Outline tab in the Document Overview to see your page headings.“ Die Stufe ändern Sie über den Transform-Button in der Block-Werkzeugleiste oder die Schaltflächen H1 bis H6 in den Block-Einstellungen.
• Keine Überschrift nur für große Schrift. Die Prüfanleitung zu Überschriften nennt große Texte oder Zitate, die nur zur Gestaltung als Überschrift ausgezeichnet sind, ausdrücklich als Fehler.

Alternativtexte für Bilder

WordPress kennt zwei Stellen für den Alternativtext, und das ist die häufigste Fehlerquelle:

• Bilder auf bestehenden Seiten prüfen. Laut Edit Media ist ein einzeln eingefügtes Bild von den Daten der Mediathek getrennt. Einen Alt-Text, den Sie heute in der Mediathek nachtragen, bekommt das Banner auf Ihrer Startseite also nicht; Sie tragen ihn im Bild-Block selbst ein.
• Dekorative Bilder als solche markieren. Der Bild-Block hat die Option Mark as decorative; laut Image-Block-Doku nur für Bilder, die keine Information und keine Funktion tragen, damit Hilfstechnik sie überspringt. Ein verlinktes Bild ist nie dekorativ, denn es hat eine Funktion.
• Entscheidungshilfe nutzen. Der Link Describe the purpose of the image in den Block-Einstellungen führt laut Doku zu einem Entscheidungsbaum, welcher Alt-Text in welcher Situation passt.
• Text im Bild vermeiden. Steht ein Angebot oder ein Rabatt als Text in einem Bannerbild, muss er vollständig im Alt-Text stehen; einfacher ist echter Text in einem Cover- oder Absatz-Block. Unsere Empfehlung.

Links

• Linktext sagt, wohin es geht. Als mehrdeutig nennt die Prüfliste von WordPress Linktexte wie „read more“, „more“ oder „click here“, also auf Deutsch „mehr“ oder „hier klicken“; ein Linktext soll auch ohne Umgebung verständlich sein (No ambiguous link text). Schreiben Sie „Versandkosten nach Ländern“ statt „hier klicken“.
• Neuer Tab nur mit Hinweis. In der Link-Steuerung gibt es den Schalter Open in new tab. Lassen Sie ihn aus. Brauchen Sie ihn, schreiben Sie den Hinweis in den Linktext, etwa „Preisliste (PDF, öffnet in neuem Tab)“; ein Symbol allein reicht laut Prüfanleitung nicht.
• Ziel prüfen. Laut Link-Doku prüft WordPress nur das Format eines Links, „It does not confirm that the destination page exists or loads successfully.“

Tabellen

Versandkosten, Größen oder Lieferzeiten gehören in einen Table-Block, nicht in ein Bild und nicht in Leerzeichen-Spalten. Laut Table-Block-Doku schalten Sie in den Block-Einstellungen unter Settings die Option Header section ein; dann hat die Tabelle eine Kopfzeile. Über die Option Add or remove caption geben Sie ihr eine Beschriftung. Unsere Empfehlung: Prüfen Sie danach mit einem automatischen Test (Bereich 5), ob die Kopfzellen als solche erkannt werden; je nach Theme und Inhalt kann das abweichen.

Buttons

• Eindeutiger Text. „Jetzt ansehen“ dreimal auf einer Seite hilft niemandem, der die Buttons als Liste vorgelesen bekommt; schreiben Sie „Neue Kollektion ansehen“.
• Kein neuer Tab ohne Hinweis. Auch der Button hat laut Buttons-Block-Doku die Option, den Link in einem neuen Tab zu öffnen.
• Farben für jeden Zustand. Laut Buttons-Block-Doku wählen Sie oben in den Block-Einstellungen die Zustände Hover, Focus und Active und setzen für jeden eigene Farben. Prüfen Sie dabei, dass jeder Zustand ausreichend Kontrast hat und der Fokus-Zustand deutlich sichtbar bleibt.

Farben

Laut Color Settings Overview warnt der Editor, wenn Text vor der gewählten Hintergrundfarbe schwer lesbar werden könnte. Nehmen Sie die Warnung ernst, aber verlassen Sie sich nicht allein darauf: Messen Sie Ihre Farbpaare mit einem Kontrastwerkzeug gegen 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente (1.4.3, 1.4.11). Text auf Fotos in Cover-Blöcken prüfen Sie an der hellsten Stelle des Bildes. Unsere Einschätzung.

Bereich 3: Menüs und Navigation

Block-Theme: Navigation-Block

Laut Navigation-Block-Doku stellen Sie im Tab Settings unter Display ein:

• Submenu visibility: Hover öffnet Untermenüs beim Darüberfahren mit der Maus, Click beim Anklicken. Unsere Empfehlung: Click, zusammen mit Show arrow, damit Besucher sehen, dass es ein Untermenü gibt, und es nicht zufällig aufklappt. Testen Sie danach mit der Tastatur, ob Untermenüs auf- und zugehen.
• Overlay visibility: Mobile zeigt auf kleinen Bildschirmen ein Menü-Symbol. Mit ausgeschaltetem Show icon button stehen dort laut Doku stattdessen die Wörter „Menu“ und „Close“. Testen Sie das mobile Menü bei schmalem Fenster: öffnen, mit Tab durchgehen, schließen.
• Beschriftung der Menüpunkte: Diese Einstellung liegt nicht unter Display. Laut derselben Doku wählen Sie den Menüpunkt aus und ändern im Tab Content der Block-Einstellungen das Feld Text; besteht das Menü noch aus der automatischen Seitenliste, klicken Sie vorher in der Block-Werkzeugleiste auf Edit. Wählen Sie kurze, eindeutige Namen wie „Versand“ statt „Infos“.

Klassisches Theme: Appearance > Menus

Laut Menü-Doku blenden Sie über Screen Options die Felder Link Target und Title Attribute ein. Prüfen Sie bei jedem Menüpunkt, dass er nicht ungewollt in einem neuen Tab öffnet. Wie Untermenüs per Tastatur funktionieren, entscheidet hier das Theme; testen Sie es.

Was Sie im Menü testen

Die beiden Punkte zum mobilen Menü stammen aus der Prüfanleitung zur Tastaturbedienung, die verlangt, die Tests in der mobilen Ansicht zu wiederholen.

Bereich 4: Formulare und Plugins

Kontaktformulare

Ihr Kontaktformular stammt aus einem Plugin oder aus Ihrem Theme; wie Sie es einrichten, beschreibt dessen Anbieter. Unabhängig vom Plugin prüfen Sie:

Wie Labels, Fehlermeldungen und Pflichtfelder im Einzelnen richtig aussehen, zeigt Barrierefreie Formulare im Shop: Labels, Fehler, Pflichtfelder. Fällt Ihr Formular-Plugin durch, fragen Sie den Anbieter, ob eine Einstellung das behebt, und wechseln sonst das Plugin.

Plugins inventarisieren

Für Plugins gibt es kein Gegenstück zum Theme-Schlagwort: Die Richtlinien für das Pluginverzeichnis enthalten nach unserer Durchsicht keine Anforderung an Barrierefreiheit. Die Prüfung liegt also bei Ihnen.

1. Liste anlegen. Unter Plugins > Installed Plugins (Manage Plugins) notieren Sie jedes Plugin, das Besucher sehen: Cookie-Banner, Pop-ups, Slider, Galerien, Formulare, Chat, Newsletter, Bewertungen.
2. Einzeln testen. Jedes davon nur mit der Tastatur bedienen: erreichen, auslösen, wieder heraus. Ein Fund geht an den Anbieter, mit Seite, Browser und gedrückter Taste.
3. Empfohlene Plugins des Themes einbeziehen. Die Prüfanleitung für accessibility-ready testet das Theme ausdrücklich mit seinen empfohlenen Plugins; machen Sie es genauso.
4. Ersetzen oder abschalten. Was sich nicht bedienen lässt und nicht behoben wird, deaktivieren Sie über den Link Deactivate in der Plugin-Liste und suchen Ersatz.

Kein Overlay als Abkürzung. Ein Plugin, das eine Leiste mit Schriftgrößen- und Kontrastknöpfen über die Website legt, ersetzt keinen der Schritte oben. Die Überwachungsstellen von Bund und Ländern schreiben in ihrer Gemeinsamen Einschätzung zum Einsatz von Overlay-Tools (Stand März 2025): „Aktuell sind Overlay-Tools nicht in der Lage, einen Webauftritt, der Barrieren aufweist, vollständig barrierefrei darzustellen.“

Bereich 5: der Selbsttest

Melden Sie sich ab oder öffnen Sie die Seite in einem anderen Browser, so wie es die Prüfanleitungen von WordPress etwa für den Tastaturtest vorsehen. Testen Sie mindestens Startseite, eine Inhaltsseite, einen Blogbeitrag, die Suchergebnisse, eine 404-Seite und die Kontaktseite.

1. Tastatur. Maus weglegen, mit Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten und Esc durch jede Seite. Laut Prüfanleitung muss der Fokus überall sichtbar sein, die Reihenfolge der sichtbaren Anordnung folgen und Sie dürfen nirgends hängen bleiben. Einen getakteten Ablauf mit Protokoll finden Sie in Tastaturtest in 10 Minuten: den Shop ohne Maus prüfen.
2. Zoom. Laut Prüfanleitung zu Reflow: Browserfenster auf 1280 Pixel Breite, mit Strg und Plus (Mac: Cmd und Plus) auf 200 Prozent, dann auf 400 Prozent. Inhalte stapeln sich, nichts ist abgeschnitten oder überlappt, kein waagrechtes Scrollen außer bei Tabellen, alles bleibt bedienbar.
3. Textabstände. Ebenda: Zeilenhöhe auf das 1,5-Fache, Buchstabenabstand 0,12, Wortabstand 0,16 und Absatzabstand das 2-Fache der Schriftgröße setzen, etwa mit einem Text-Spacing-Bookmarklet. Kein Text darf abgeschnitten werden (1.4.12).
4. Automatischer Test. Die Prüfanleitung zum Kontrast nennt WAVE und axe DevTools als Werkzeuge, die alle Kontraste einer Seite auf einmal prüfen. Hover- und Fokuszustände prüfen solche Werkzeuge laut derselben Anleitung in der Regel nicht; die testen Sie von Hand.
5. Überschriften. Die Prüfanleitung zu Überschriften nutzt die Browser-Erweiterung HeadingsMap: eine H1, keine übersprungenen Ebenen, keine leeren Überschriften.

Ein automatischer Test findet nur einen Teil der Barrieren; ob ein Alt-Text das Bild sinnvoll beschreibt oder ein Untermenü per Tastatur aufgeht, sehen nur Sie.

Checkliste je Bereich mit WCAG-2.2-Kriterium

Die Kriterien stammen aus den WCAG 2.2, W3C Recommendation vom 12. Dezember 2024. Alle genannten Kriterien sind Stufe A oder AA, außer 3.2.5 (AAA, nur als Hinweis). Die Spalte „Wer behebt“ ist unsere Einschätzung für eine typische Shop-Website.

Prüfen Sie die Liste erneut nach jedem Theme-Wechsel oder Theme-Update, nach jedem neuen Plugin, das Besucher sehen, und nach Änderungen an Farben oder eigenem CSS. Unsere Empfehlung.

Ihr nächster Schritt

Der Gratis-Scan prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte.

Stand: 27.10.2026. Quellen gelesen am 27.10.2026.