Barrierefreie Websites mit WordPress erstellen

**TL;DR:**

Barrierefreiheit bei WordPress entsteht nicht allein durch ein Theme, sondern durch das Zusammenspiel von Konzept, Layout, Technik und Inhalten. Dennoch gibt es Themes, die eine besonders gute technische Grundlage bieten.

WordPress selbst stellt seit Version 5.9 barrierearme Standard-Themes bereit. Dazu zählen Twenty Twenty-One, Twenty Twenty-Two, Twenty Twenty-Three und Twenty Twenty-Four.

Darüber hinaus existieren weitere Themes mit dem offiziellen WordPress-Label „Accessibility Ready“, die grundlegende Anforderungen der BITV und WCAG berücksichtigen. Eine Übersicht dieser Themes findest du direkt im WordPress-Theme-Verzeichnis unter dem Filter „Accessibility Ready“.

Inhalt der Themen:

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.

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:

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

Vergleich: WordPress-Standard-Themes vs. Premium-Themes (Barrierefreiheit)
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:

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: