Barrierefreie Websites mit WordPress erstellen

Wie erstelle ich eine barrierefreie WordPress-Website?

Wichtig ist: „Accessibility Ready“ bedeutet nicht automatisch barrierefrei. Erst die korrekte Umsetzung von Inhalten, Farben, Kontrasten, Navigation und Interaktionen entscheidet darüber, ob eine Website tatsächlich barrierefrei und BFSG-konform ist.

In 6 Schritten zur barrierefreien WordPress-Website

Die Umsetzung einer barrierefreien Website nach dem Barrierefreiheitsstärkungsgesetz (BFSG) muss kein technisches Labyrinth sein. Mit diesen sechs Schritten bringst du deine Seite auf einen deutlich besseren Stand:

1. Wähle ein „Accessibility Ready“ Theme

Starte direkt mit einem soliden Fundament. Nutze entweder die WordPress-Standard-Themes wie Twenty Twenty-Four oder ein schlankes Framework wie GeneratePress. Achte im Theme-Verzeichnis explizit auf das Schlagwort „Accessibility Ready“. Diese Themes bringen bereits wichtige Funktionen wie Tastatur-Fokus und eine saubere Grundstruktur mit.

2. Baue eine klare Überschriften-Hierarchie auf

Strukturiere deine Inhalte logisch für Mensch und Maschine. Nutze genau eine H1-Überschrift pro Seite für den Titel. Danach folgen Unterüberschriften streng chronologisch von H2 bis H6. Benutze Überschriften niemals nur, um Text größer zu machen – sie sind das Inhaltsverzeichnis für Screenreader.

3. Verpasse deinen Bildern Alt-Texte

Beschreibe bei jedem informativen Bild kurz und klar, was darauf zu sehen ist. Nutze dafür das Feld „Alternativer Text“ in der WordPress-Mediathek. So wissen auch Menschen mit Sehbehinderung, welcher Kontext vermittelt wird. Rein dekorative Grafiken wie Trennlinien oder Schmuckelemente lässt du leer, damit sie den Lesefluss nicht stören.

4. Optimiere Kontraste und Lesbarkeit

Sorge dafür, dass dein Text gut lesbar ist. Der Kontrast zwischen Schrift und Hintergrund muss hoch genug sein. Verzichte darauf, Informationen nur durch Farben zu vermitteln, zum Beispiel mit Formulierungen wie „Klicke auf den grünen Button“. Wähle außerdem eine Schriftgröße, die man auch ohne Lupe gut erkennen kann.

5. Mach alles per Tastatur bedienbar

Lege die Maus beiseite und versuche, dich nur mit der Tab-Taste durch deine Website zu navigieren. Erreichst du alle Menüpunkte, Buttons und Formulare? Siehst du jederzeit klar, wo du dich gerade befindest? Wenn nicht, musst du hier technisch nachbessern.

6. Prüfe dein Ergebnis mit Lighthouse und WAVE

Verlasse dich nicht nur auf dein Bauchgefühl, sondern nutze Werkzeuge für den Endcheck:

• Google Lighthouse: Öffne deine Seite in Chrome, drücke F12 und starte unter „Lighthouse“ ein Audit für „Accessibility“. Ein hoher Score ist ein guter Start, ersetzt aber keine manuelle Prüfung.
• WAVE Website: Dort kannst du jede Seite per URL-Eingabe analysieren lassen.
• WAVE Browser-Tool: Das Add-on zeigt dir direkt auf der Seite, wo Kontraste fehlen oder Alt-Texte vergessen wurden.

Wichtig: Automatisierte Tools helfen beim Einstieg, ersetzen aber keine manuelle Prüfung. Wirklich aussagekräftig wird der Test erst dann, wenn du deine Website zusätzlich mit Tastatur, Zoom und idealerweise auch mit einem Screenreader prüfst.

Welche barrierearmen WP-Themes gibt es?

Barrierefreiheit resultiert aus Konzept, Layout, Technik und Inhalt. WordPress bietet seit Jahren Standard-Themes, die eine gute technische Basis für barrierearme Websites liefern. Auf der WordPress-Website kannst du außerdem unter „Accessibility Ready“ nach weiteren Themes suchen, die eine solide Grundlage für barrierefreie Projekte bieten.

Wenn du ein selbst entwickeltes Theme bevorzugst, findest du relevante Informationen zur Barrierefreiheit auf der Entwicklerseite von WordPress:

• WordPress Developer: Accessibility für Themes

Barrierearme oder sogar besonders zugängliche WordPress-Themes

Einige WordPress-Standard-Themes sind besonders empfehlenswert. Sie gelten als gute Basis für BFSG, SEO und KI-Lesbarkeit:

• Twenty Twenty-One
• Twenty Twenty-Two
• Twenty Twenty-Three
• Twenty Twenty-Four

Warum sie so gut sind:

• Saubere HTML5-Struktur
• Korrekte Landmark-Rollen
• Skip-to-Content-Link
• Tastatur- und Screenreader-freundliche Basis
• Regelmäßige Pflege durch WordPress

GeneratePress (Premium) – eine sehr gute Wahl für professionelle Projekte

Premium-Themes wie GeneratePress bieten ebenfalls eine sehr gute barrierearme Basis:

• Offiziell Accessibility Ready
• Sehr schlank und performant
• Klare Struktur, wenig visuelle Barrieren
• Hervorragend mit Gutenberg
• Auch mit Elementor gut kombinierbar

Vergleichstabelle mit WordPress-Themes

Hinweis: Bei kleinem Monitor oder schmalem Fenster kannst du die Tabelle horizontal scrollen.

Kriterium	WordPress-Standard-Themes	Premium-Themes (z. B. GeneratePress, Neve, Astra)
Beispiele	Twenty Twenty-One bis Twenty Twenty-Four	GeneratePress, Neve, Astra, Kadence
Accessibility-Status	Sehr hohe Basis-Barrierefreiheit	Unterschiedlich, abhängig vom Anbieter
Accessibility Ready	Ja, oft als Referenz-Implementierung	Teilweise, Theme-Basis meist geprüft
HTML5 & Semantik	Sehr sauber, vorbildlich	Meist sauber, teils komplexer
Landmark-Rollen	Vollständig und korrekt	In der Regel vorhanden
Skip-to-Content-Link	Standardmäßig integriert	Häufig vorhanden, aber prüfen
Tastaturbedienung	Umfassend getestet	Abhängig von Theme und Einstellungen
Screenreader-Kompatibilität	Sehr gut	Gut bis sehr gut
Design-Flexibilität	Eher minimalistisch	Hoch (Layouts, Header, Optionen)
Performance	Sehr gut	Gut bis sehr gut
Page-Builder-Kompatibilität	Gutenberg-optimiert	Gutenberg und Elementor geeignet
Risiko für Barrieren	Sehr gering	Mittel, vor allem durch Optionen und Demos
BFSG-Eignung	Sehr hoch	Hoch, bei sauberer Umsetzung
SEO- & KI-Lesbarkeit	Exzellent	Sehr gut
Zielgruppe	Öffentliche Stellen, Informationsseiten, rechtssichere Projekte	Unternehmen, Agenturen, professionelle Websites

Zusammenfassung: WordPress-Standard-Themes gelten als technische Referenz für Barrierefreiheit und bieten die höchste Grundsicherheit. Premium-Themes sind ebenfalls gut geeignet, erfordern jedoch mehr Sorgfalt bei Konfiguration, Design und Inhaltsaufbau, um Barrieren zu vermeiden.

Ist eine barrierefreie Website mit Elementor möglich?

Ja, aber mit Einschränkungen. Eine barrierefreie Website mit Elementor ist grundsätzlich möglich, gelingt aber nicht automatisch. Der Page Builder bietet inzwischen verschiedene Funktionen, welche die Barrierefreiheit unterstützen. Dennoch erfüllt Elementor nicht von Haus aus vollständig die Anforderungen der WCAG.

Elementor stellt selbst umfangreiche Informationen zum Thema Barrierefreiheit bereit und entwickelt den Builder kontinuierlich weiter. Dazu gehören unter anderem semantischere HTML-Strukturen, Verbesserungen bei der Tastaturbedienung, ARIA-Attribute sowie Einstellungen für Überschriften und Alternativtexte. Diese Maßnahmen bilden eine technische Grundlage, ersetzen jedoch keine barrierefreie Umsetzung im Detail.

Entscheidend ist: Barrierefreiheit entsteht durch die konkrete Gestaltung und Nutzung von Elementor, nicht allein durch das Tool. Viele Widgets, Templates und Animationen können – je nach Einsatz – Barrieren erzeugen, etwa für Screenreader- oder Tastaturnutzer. Auch Vorlagen und Website-Kits sind nicht automatisch barrierefrei und müssen individuell geprüft und angepasst werden.

Eine barrierearme Umsetzung mit Elementor ist vor allem dann realistisch, wenn:

• ein barrierearmes Theme verwendet wird,
• Inhalte semantisch korrekt aufgebaut sind,
• Kontraste, Fokus-Stile und Tastaturbedienung beachtet werden,
• problematische Widgets bewusst vermieden oder angepasst werden,
• und abschließend manuelle Tests mit Tastatur, Screenreader und WCAG-Checks erfolgen.

Fazit: Elementor kann Teil einer barrierearmen Website sein, bietet aber keine automatische oder garantierte Barrierefreiheit. Für rechtssichere und nachhaltige Ergebnisse sind Fachwissen, sorgfältige Umsetzung und Prüfung unverzichtbar.

Barrierefreiheit im WordPress-Backend

Barrierefreiheit betrifft nicht nur deine Besucher, sondern auch die Menschen, die Inhalte pflegen. Damit eine Website langfristig barrierearm bleibt, sollte auch das Backend möglichst klar, verständlich und gut bedienbar sein. Eine saubere Arbeitsweise im Editor hilft dabei, spätere Fehler bei Überschriften, Medien und Formularen zu vermeiden.

Weiterlesen: Auf der Elementor-Website findest du hilfreiche Informationen: WordPress Accessibility bei Elementor

WordPress-Plugins für Barrierefreiheit

Mittlerweile gibt es eine Vielzahl von WordPress-Plugins, mit denen sich Websites barriereärmer gestalten lassen. Wahrscheinlich kann jedoch kein einzelnes Plugin alle Aspekte der Barrierefreiheit abdecken. Sinnvoller ist die Kombination aus gutem Theme, sauberem Design, durchdachten Inhalten und gezielten Hilfs-Plugins.

One Click Accessibility

One Click Accessibility ist ein schneller Einstieg, um eine WordPress-Website barriereärmer zu gestalten. Das Plugin ermöglicht Funktionen wie Hochkontrastmodus, Schriftgrößenanpassung und Link-Unterstreichungen.

Die Symbolleiste bietet unter anderem:

• Schriftgröße ändern
• Graustufen
• Negativer Kontrast
• Hoher Kontrast
• Heller Hintergrund
• Unterstrichene Links
• Lesbare Schrift

WP Accessibility

Dieses Plugin fügt verschiedene Funktionen hinzu, um die Barrierefreiheit zu verbessern, darunter Unterstützung für Tastaturnavigation, Überschriftenstruktur und Bild-Alt-Texte.

Zum Plugin WP Accessibility

WP ADA Compliance Check Basic

WP ADA Compliance Check Basic überprüft deine Website auf Konformität und liefert Hinweise, wo Nachbesserungen sinnvoll sind.

Zum Plugin WP ADA Compliance Check Basic

Access Monitor

Access Monitor überwacht deine Website auf Barrierefreiheitsprobleme und meldet Auffälligkeiten.

Mehr zu Access Monitor

UserWay Accessibility Widget

UserWay bietet personalisierbare Werkzeuge zur Verbesserung der Barrierefreiheit, zum Beispiel Schriftgrößen- und Kontrastanpassungen.

Mehr zu UserWay

WordPress Accessibility Helper

Dieses Plugin möchte eine grundlegende Barrierefreiheit für Websites unterstützen und enthält unter anderem folgende Funktionen:

• Kontrastmodus
• Schneller Wechsel zur Schriftfamilie Arial
• Schriftgröße anpassen
• Anzeige der Seite in reinem HTML
• CSS-Animationen entfernen
• Links unterstreichen
• Bildtitel und Alt-Texte ergänzen oder bearbeiten
• Tastenkürzel für die Zugänglichkeits-Seitenleiste
• Position der Seitenleiste wählen
• Graustufen, dunkle und helle Themes, sichere Schriftfamilien
• Farben und Bilder invertieren

Mehr zum WordPress Accessibility Helper

Wichtiger Hinweis: Plugins und Overlays können Barrierefreiheit unterstützen, lösen aber keine grundlegenden Strukturprobleme. Viele Quick-Fix-Lösungen versprechen mehr, als sie in der Praxis tatsächlich leisten.

Eine aktuelle Übersicht über Plugins zum Thema Barrierefreiheit findest du außerdem hier:

• WordPress Plugin-Verzeichnis: a11y

Das POUR-Prinzip als Grundlage barrierefreier Websites

Die WCAG orientieren sich an vier Grundprinzipien, die häufig unter dem Kürzel POUR ( Perceivable (wahrnehmbar), Operable (bedienbar), Understandable (verständlich) und Robust) zusammengefasst werden. Diese Prinzipien helfen dir dabei, Barrierefreiheit nicht nur technisch, sondern auch inhaltlich besser zu verstehen:

• Wahrnehmbar: Inhalte müssen für verschiedene Sinne zugänglich sein.
• Bedienbar: Alle Funktionen müssen auch ohne Maus nutzbar bleiben.
• Verständlich: Inhalte und Navigation müssen klar und nachvollziehbar sein.
• Robust: Inhalte müssen mit unterschiedlichen Geräten, Browsern und Hilfstechnologien kompatibel bleiben.

Checkliste Barrierefreiheit für Freiberufler

Die folgende Tabelle zeigt dir typische Maßnahmen und einen schnellen Praxis-Check für kleine WordPress-Websites.

Multimedia-Barrierefreiheit: Video, Audio und Transkripte

Barrierefreiheit endet nicht bei Bildern. Auch Videos, Podcasts und andere Multimedia-Inhalte sollten so aufbereitet werden, dass möglichst viele Menschen sie nutzen können.

• Untertitel: helfen Menschen mit Hörbehinderungen und verbessern zugleich die Verständlichkeit in stillen Nutzungssituationen.
• Transkripte: machen Audio- und Videoinhalte zusätzlich als Text zugänglich und helfen auch Suchmaschinen und KI-Systemen bei der Einordnung.
• Audiobeschreibungen: können bei wichtigen visuellen Inhalten sinnvoll sein, wenn Informationen sonst verloren gehen.

BFSG: Ausnahmen und Übergangsregelungen

Nicht jede Website und nicht jedes Unternehmen ist in gleicher Weise vom Barrierefreiheitsstärkungsgesetz betroffen. Neben der grundsätzlichen Pflicht gibt es wichtige Ausnahmen und Übergangsregelungen, die du im Blick behalten solltest.

• Kleinstunternehmen: Unternehmen mit weniger als 10 Mitarbeitenden und unter 2 Mio. € Jahresumsatz sind bei reinen Dienstleistungen oft ausgenommen.
• B2B-Angebote: Leistungen, die sich ausschließlich an andere Unternehmen richten, fallen häufig nicht unter das BFSG.
• Bestandsregelungen: Für ältere Verträge, Systeme oder Produkte können Übergangsfristen gelten.

Auch wenn im Einzelfall keine unmittelbare Pflicht besteht, bleibt Barrierefreiheit aus Sicht von Nutzerfreundlichkeit, SEO und KI-Sichtbarkeit ein klarer Qualitätsfaktor.

Häufige Fragen zu barrierefreien WordPress-Websites

Ist WordPress automatisch barrierefrei?

Nein. WordPress bietet eine gute technische Basis, ist aber nicht automatisch barrierefrei. Entscheidend sind das gewählte Theme sowie die Umsetzung der Inhalte. Bilder, Texte, Navigation und Kontraste müssen aktiv barrierefrei gestaltet werden.

Welche WordPress-Themes sind für barrierefreie Websites geeignet?

Geeignet sind Themes, die im WordPress-Verzeichnis als „Accessibility Ready“ gekennzeichnet sind. Besonders empfehlenswert sind die WordPress-Standard-Themes wie Twenty Twenty-One bis Twenty Twenty-Four. Wichtig: Das Label ist nur eine Grundlage – die tatsächliche Barrierefreiheit entsteht erst durch die richtige Umsetzung.

Wie unterscheiden sich Standard-Themes und Premium-Themes in Bezug auf Barrierefreiheit?

WordPress-Standard-Themes gelten als Referenz für Barrierefreiheit und bieten eine sehr saubere technische Basis. Premium-Themes wie GeneratePress, Neve oder Astra können ebenfalls gut geeignet sein, erfordern jedoch mehr Sorgfalt bei Konfiguration, Design und Interaktionen, um Barrieren zu vermeiden.

Ist eine barrierefreie Website mit Elementor möglich?

Ja, grundsätzlich – aber nicht automatisch. Elementor bietet unterstützende Funktionen, erfüllt jedoch nicht von Haus aus alle Anforderungen der WCAG. Entscheidend sind saubere Struktur, bewusste Widget-Auswahl, gute Kontraste, Tastaturbedienbarkeit und abschließende Tests.

Welche WordPress-Plugins helfen bei Barrierefreiheit?

Plugins wie WP Accessibility, UserWay oder ADA Compliance Check können bestimmte Aspekte verbessern, etwa Kontraste oder Zusatzfunktionen. Sie ersetzen jedoch keine saubere technische und inhaltliche Umsetzung. Barrierefreiheit entsteht nicht durch Plugins allein.

Was sind die häufigsten Barrierefreiheits-Fehler?

Typische Fehler sind fehlende Alternativtexte für Bilder, zu geringe Farbkontraste, nicht per Tastatur bedienbare Navigation und eine unlogische Überschriftenstruktur. Auch komplexe Sprache oder Inhalte ohne Textalternativen können Barrieren darstellen.

Wie teste ich die Barrierefreiheit meiner Website?

Nutze eine Kombination aus automatisierten Tools und manuellen Tests. Tools wie WAVE oder Lighthouse liefern erste Hinweise. Zusätzlich solltest du deine Website ausschließlich per Tastatur bedienen und – wenn möglich – mit einem Screenreader testen. Erst diese Kombination zeigt die tatsächliche Nutzbarkeit.