Barrierefreie Websites mit WordPress erstellen

Wie erstelle ich eine barrierefreie WordPress-Website?

Barrierefreiheit in WordPress ist das Ergebnis aus dem Zusammenspiel von Konzept, Technik und Inhalten. Während das Theme die technische Basis bildet, entscheiden Layout und Redaktion über die tatsächliche Zugänglichkeit nach WCAG und BITV.

Empfohlene barrierearme WordPress-Themes:

• Standard-Themes: Twenty Twenty-One bis Twenty Twenty-Four (ab Version 5.9).
• Zertifizierte Themes: Alle Themes mit dem offiziellen WordPress-Label „Accessibility Ready“.
• Suche: Du findest diese im WordPress-Verzeichnis über den Filter „Barrierefrei“ (Accessibility Ready).

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 den neuesten 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 die richtige Code-Struktur mit.

2. Baue eine klare Überschriften-Hierarchie auf

Strukturiere deine Inhalte logisch für Mensch und Maschine. Das bedeutet für dich: 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 jedem Bild kurz und knackig, 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) 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 (laut WCAG 2.1 mindestens ein Verhältnis von 4,5:1). Verzichte darauf, Informationen nur durch Farben zu vermitteln (z. B. „Klicke auf den grünen Button“), und wähle eine Schriftgröße, die man auch ohne Lupe gut erkennt.

5. Mach alles per Tastatur bedienbar

Test-Check für dich: Leg die Maus beiseite und versuche, dich nur mit der Tab-Taste durch deine Website zu navigieren. Erreichst du alle Menüpunkte und Formulare? Siehst du immer ganz genau, wo du dich gerade befindest (Fokus-Rahmen)? Wenn nicht, musst du hier technisch nachbessern.

6. Prüfe dein Ergebnis mit Lighthouse & WAVE

Verlasse dich nicht auf dein Bauchgefühl, sondern nutze Profi-Tools für den Endcheck:

• Google Lighthouse: Öffne deine Seite in Chrome, drücke F12 und starte unter „Lighthouse“ ein Audit für „Accessibility“. Dein Ziel ist ein Score von 90 bis 100.
• Wave-Website: Dort kannst du jede Seite per URL -Eingabe analysieren lassen
• WAVE Tool: Dieses Browser-Add-on zeigt dir optisch direkt auf der Seite an, wo Kontraste fehlen oder Alt-Texte vergessen wurden.

Welche barrierefreien WP-Themes gibt es?

Barrierefreiheit resultiert aus dem Konzept, dem Layout, der Technik und dem Inhalt. Seit Version 5.9 bietet WordPress das erste barrierefreie Standard-Theme namens „Twenty Twenty-Two“ an, gefolgt von „Twenty Twenty-Three“ in Version 6.1. Auf der WordPress-Website kannst du selbst unter „Accessibility Ready“ nach weiteren Themes suchen, die den BITV-Standards entsprechen. Wenn du ein selbst entwickeltes Theme bevorzugst, findest du relevante Informationen zur Barrierefreiheit auf der Entwicklerseite von WordPress:

• https://developer.wordpress.org/themes/functionality/accessibility/

Barrierearme oder sogar barrierefreie Themes von WordPress

Einige WordPress Standard-Themes sind sehr empfehlenswert, diese Themes sind ideal für BFSG, SEO & KI-Lesbarkeit und gelten als Referenz für Barrierefreiheit:

• 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 & Screenreader getestet
• Regelmäßig gepflegt

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

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

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

Vergleichstabelle mit WordPress-Themes

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 (Referenz-Implementierung)	Teilweise, Theme-Basis meist geprüft
HTML5 & Semantik	Sehr sauber, vorbildlich	Meist sauber, teils komplexer
Landmark-Rollen	Vollständig & korrekt	In der Regel vorhanden
Skip-to-Content-Link	Standardmäßig integriert	Häufig vorhanden, prüfen
Tastaturbedienung	Umfassend getestet	Abhängig von Theme & 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 & Elementor geeignet
Risiko für Barrieren	Sehr gering	Mittel (durch Optionen & 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. Grundätzlich ist eine barrierefreie Website mit  Elementor grundsätzlich möglich, jedoch gelingt das nicht automatisch. Der Page Builder bietet inzwischen verschiedene Funktionen, welche die Barrierefreiheit unterstützen, erfüllt aber nicht von Haus aus vollständig die Richtlinien der WCAG.

Elementor stellt selbst umfangreiche Informationen zum Thema Barrierefreiheit bereit und entwickelt den Builder kontinuierlich weiter. Dazu gehören unter anderem semantische HTML-Strukturen, verbesserte 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 die in Elementor Pro enthaltenen Vorlagen und Website-Kits sind nicht automatisch barrierefrei und müssen individuell geprüft und angepasst werden.

Eine barrierefreie Umsetzung mit Elementor ist daher nur dann realistisch, wenn:

• ein barrierearmes Theme (z. B. ein minimalistisches Basis-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 (z. B. Tastatur, Screenreader, WCAG-Checks) erfolgen.

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

 Weiterlesen: Auf der Elementor-Website findest du hilfreiche Informationen:

• https://elementor.com/blog/wordpress-accessibility/.

WordPress-Plugins für Barrierefreiheit

Mittlerweile gibt es eine Vielzahl von WordPress-Plugins, mit denen sich Websites barrierefrei optimieren lassen. Beachte jedoch, dass wahrscheinlich kein einzelnes Plugin alle Aspekte der Barrierefreiheit abdecken kann. Die Verwendung mehrerer Plugins in Kombination mit einem durchdachten Design und Inhaltserstellung ist eine effektivere Methode, damit deine WordPress-Website für Nutzer:innen mit Behinderungen reibungslos zugänglich ist. Hier eine Auswahl:

One Click Accessibility ist das schnellste Plugin, um deine WordPress-Website barrierefreier zu gestalten. Es ermöglicht dir, schnell auf Funktionen wie Hochkontrastmodus, Schriftgrößenanpassung und Link-Unterstreichungen zuzugreifen.

Obwohl die meisten Barrierefreiheitsprobleme nicht ohne direkte Änderung des Inhalts behoben werden können, fügt One Click Accessibility eine Reihe hilfreicher Barrierefreiheitsfunktionen hinzu, mit minimalem Setup-Aufwand und ohne Expertenwissen.

Die Barrierefreiheits-Symbolleiste ermöglicht folgende Optimierungen:

• Schriftgröße ändern (vergrößern/verkleinern)
• Graustufen
• Negativer Kontrast
• Hoher Kontrast
• Heller Hintergrund
• Unterstrichene Links
• Lesbare Schrift

Link: https://wpaccessibility.io/

WP Accessibility: Dieses Plugin fügt verschiedene Funktionen hinzu, um die Barrierefreiheit zu verbessern, darunter Tastaturnavigation, Überschriftenstruktur und verbesserte Bild-Alt-Texte.

Link: https://wordpress.org/plugins/wp-accessibility/

WP ADA Compliance Check Basic überprüft deine Website auf ADA-Konformität (Americans with Disabilities Act) und bietet Vorschläge zur Verbesserung.

Link: https://wordpress.org/plugins/wp-ada-compliance-check-basic/

Access Monitor überwacht deine Website auf Barrierefreiheitsprobleme und benachrichtigt dich, wenn solche Probleme auftreten.

Link: https://www.joedolson.com/access-monitor/

UserWay Accessibility Widget bietet personalisierbare Tools, um die Barrierefreiheit zu verbessern, wie z. B. Schriftgrößenanpassung, Kontrastanpassung und Sprachauswahl.

Link: https://userway.org/

WordPress Accessibility Helper: Dieses Plugin hat den Anspruch, eine eine grundlegende Barrierefreiheit für jede Website zu bieten und enthält u.a. folgende Features:

• Kontrastmodus (Farbgamma)
• Schneller Wechsel zur Schriftfamilie Arial
• Schriftgröße anpassen
• Entladen aller CSS-Dateien (Anzeige der Seite in reinem HTML)
• CSS-Animationen entfernen
• Unterstreiche aller Links
• Attachments Control Center mit der Möglichkeit, Bildtitel und Alt-Tags hinzuzufügen/zu bearbeiten
• Alt+Z – Zugänglichkeits-Seitenleiste öffnen, Alt+X – Zugänglichkeits-Seitenleiste schließen
• Kontrastmodus mit Benutzer-Cookies speichern, Auswahl aus Cookies löschen
• Position der Seitenleiste (links oder rechts)
• Steuerelemente für Graustufenbilder, dunkle und helle Themes, Schriftfamilien (CSS Web Safe Font Combinations)
• Farben und Bilder invertieren

Link: https://accessibility-helper.co.il/

Eine jeweils aktuelle Liste des Plugin-Angebots für barrierefreie Websites findest Du unter:

• https://de.wordpress.org/plugins/tags/a11y/

Checkliste Barrierefreiheit für Freiberufler