WordPress barrierefrei machen: So geht's wirklich.

WordPress selbst ist nur das Fundament. Der Core wird nach Accessibility-Standards weiterentwickelt, das heißt aber nicht, dass deine Website automatisch barrierefrei ist. Ob sie es wird, entscheiden drei Dinge, auf die du selbst Einfluss hast: dein Theme (liefert HTML-Struktur, Navigation und Fokus-Verhalten), deine Plugins (jedes kann neue Barrieren einbauen) und deine Inhalte (Texte, Bilder, Formulare).

Der Maßstab dafür sind die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte. Ihre vier Prinzipien: wahrnehmbar, bedienbar, verständlich, robust. Übersetzt in die Praxis: Texte müssen lesbar sein (Kontrast, Schriftgröße), alles muss ohne Maus funktionieren, Bilder brauchen Alt-Texte, Formulare brauchen Beschriftungen. Kein Hexenwerk, aber Arbeit an vielen kleinen Stellen.

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist in Kraft: Wer online Produkte oder Dienstleistungen an Verbraucher verkauft, muss seine Website barrierefrei anbieten, das betrifft Onlineshops genauso wie Buchungsstrecken oder Terminvereinbarungen. Wen die Pflicht genau trifft, welche Ausnahmen es gibt und was konkret gefordert ist, habe ich im Ratgeber BFSG: Barrierefreie Website aufgeschlüsselt.

Aber auch ohne gesetzliche Pflicht lohnt sich der Aufwand: Du schließt niemanden aus, deine Seite wird für alle Besucher leichter bedienbar, und viele Maßnahmen, saubere Überschriften-Struktur, Alt-Texte, verständliche Linktexte, zahlen direkt auf dein SEO ein. Barrierefreiheit ist selten verschwendete Arbeit.

Das Theme liefert die technische Basis: HTML-Struktur, Menüs, Fokus-Verhalten, Skip-Links. Ein schlecht gebautes Theme reparierst du hinterher nicht mit Plugins. Im offiziellen Theme-Verzeichnis hilft das Tag „accessibility-ready": Diese Themes wurden auf Mindeststandards geprüft, Tastatur-Navigation, sichtbarer Fokus, Skip-Links. Das ist kein Zertifikat für eine barrierefreie Website, aber eine solide Basis, die Standard-Themes von WordPress oder GeneratePress gehören dazu.

Bei Page-Buildern wie Elementor oder Bricks hängt fast alles davon ab, wie du sie einsetzt: semantische HTML-Tags wählen statt Div-Suppe, die Überschriften-Hierarchie einhalten (H1 bis H3 der Reihe nach, nicht nach Optik), interaktive Elemente wie Slider und Akkordeons kritisch prüfen. Ich baue meine Kundenprojekte als WordPress-Agentur selbst mit einem Builder und weiß: Barrierefrei wird das nur, wenn man von Anfang an darauf achtet, nicht als Nachgedanke.

Eine ehrliche Warnung vorweg: Overlay-Widgets, die versprechen, deine Website „mit einem Plugin barrierefrei" zu machen, halten nicht, was sie versprechen. Sie legen eine Werkzeugleiste über die Seite (Kontrast-Schalter, Schriftgrößen-Buttons), beheben aber keinen einzigen Fehler im Code darunter. Screenreader-Nutzer stören solche Overlays oft mehr, als sie helfen, und rechtlich auf der sicheren Seite bist du damit auch nicht.

Sinnvoll sind dagegen Plugins, die dich beim Finden von Problemen unterstützen: Editor-Checks wie Sa11y oder Editoria11y weisen dich direkt im Backend auf fehlende Alt-Texte, übersprungene Überschriften oder schwache Linktexte hin. Das sind Werkzeuge, keine Lösungen, die eigentliche Arbeit passiert im Theme und in deinen Inhalten.

Die meistgestellte Frage zuerst: Eine feste Mindest-Schriftgröße schreiben die WCAG nicht vor. Bewährt hat sich 16 Pixel (1rem) als Basis für Fließtext, viel kleiner sollte es nirgends werden, auch nicht im Footer oder in Formular-Hinweisen. Wichtiger als die absolute Zahl: Nutze relative Einheiten (rem/em) statt fester Pixelwerte, damit die Schriftgrößen-Einstellung des Browsers greift. Und deine Seite muss sich auf 200 % zoomen lassen, ohne dass Inhalte abgeschnitten werden oder sich überlappen.

In WordPress stellst du das zentral ein: über die theme.json bzw. die Theme-Einstellungen mit sauber definierten Schriftgrößen-Presets, statt Größen pro Seite von Hand zu setzen. Dazu gehören eine Zeilenhöhe von etwa 1,5, Zeilenlängen von grob 60 bis 80 Zeichen und ausreichend Abstand zwischen Absätzen. Wer fluide Typografie mit clamp() nutzt, sollte prüfen, dass das Minimum lesbar bleibt und der Browser-Zoom weiterhin funktioniert.

Der häufigste Fehler überhaupt: hellgrauer Text auf weißem Grund. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von 4,5:1, für große Schrift (ab ca. 24 Pixeln, oder ab ca. 19 Pixeln fett) und für Bedienelemente 3:1. Prüfen kannst du das kostenlos mit dem WebAIM Contrast Checker oder direkt in den Entwickler-Tools deines Browsers, die zeigen das Verhältnis beim Farbwähler an.

Zweite Regel: Farbe darf nie das einzige Signal sein. Links im Fließtext nicht nur einfärben, sondern unterstreichen; Fehler in Formularen nicht nur rot markieren, sondern mit Text erklären. In WordPress lohnt es sich, die Farbpalette zentral im Theme zu definieren, dann stimmen die Kontraste überall, statt dass du sie auf jeder Seite einzeln fixen musst.

Viele Menschen bedienen Websites ohne Maus, per Tastatur, Schalter oder Screenreader. Der einfachste Test: Leg die Maus weg und navigiere nur mit der Tab-Taste durch deine Seite. Erreichst du jedes Menü, jeden Button, jedes Formularfeld? Und siehst du jederzeit, wo du gerade bist? Wenn das Theme den Fokus-Ring per CSS entfernt hat (outline: none), fliegst du blind, einer der häufigsten Fehler in WordPress-Themes.

Dazu gehören ein Skip-Link, der direkt zum Inhalt springt, Dropdown-Menüs, die sich per Tastatur öffnen und schließen lassen, und Modals oder Offcanvas-Menüs, die den Fokus halten und sich mit Escape schließen. Genau an diesen Stellen patzen viele Page-Builder-Setups: Der Burger-Button ist ein Div statt ein Button, der Slider schluckt den Fokus, das Offcanvas lässt sich öffnen, aber nicht mehr verlassen.

Jedes Bild, das Inhalt transportiert, braucht einen Alt-Text, in WordPress trägst du ihn direkt in der Mediathek oder am Block ein. Beschreibe, was zu sehen ist und welche Funktion das Bild hat; rein dekorative Bilder bekommen bewusst einen leeren Alt-Text, damit Screenreader sie überspringen. Kein Keyword-Stuffing, das hilft weder Nutzern noch Google. Bei Videos gilt: Untertitel anbieten, auf Autoplay verzichten.

Formulare sind die zweite große Baustelle: Jedes Feld braucht ein sichtbares Label, ein Platzhalter-Text reicht nicht, er verschwindet beim Tippen. Pflichtfelder klar kennzeichnen (nicht nur farblich), Fehlermeldungen verständlich formulieren und direkt am betroffenen Feld ausgeben. Die gängigen Formular-Plugins können das alles, wenn man sie richtig konfiguriert, die Standardeinstellungen sind es oft nicht.

Für den ersten Durchgang reichen kostenlose Tools: WAVE (Browser-Extension) und axe DevTools finden Kontrastfehler, fehlende Alt-Texte und Label-Probleme direkt auf der Seite, Lighthouse in Chrome liefert einen groben Accessibility-Score. Aber wichtig zu wissen: Automatische Tools finden nur einen Teil der Probleme. Ein grünes Ergebnis heißt nicht, dass deine Seite barrierefrei ist.

Den Rest testest du selbst: mit der Tastatur durch die Seite, Zoom auf 200 %, und einmal mit einem Screenreader, VoiceOver ist auf dem Mac schon eingebaut, NVDA gibt es für Windows kostenlos. Und weil jedes Update und jedes neue Plugin neue Barrieren einbauen kann, gehört Barrierefreiheit in die laufende WordPress-Wartung, nicht auf eine einmalige Checkliste. Wenn du das nicht selbst stemmen willst: Ich baue barrierefreie Websites von Grund auf, oder mache deine bestehende Seite fit.