WordPress barrierefrei: Leitfaden für eine zugängliche WordPress-Website

Wichtige Erkenntnisse (Kurzfassung)

• Wenn Sie WordPress barrierefrei umsetzen möchten, starten Sie mit einem accessibility-ready Theme, sauberer Struktur und konsequenten Tests.
• WordPress Core und viele Standard-Themes arbeiten seit Jahren in Richtung WCAG 2.1/2.2 AA. Trotzdem entscheiden Inhalte, Erweiterungen und Plugins über Erfolg oder Probleme.
• Die digitale Barrierefreiheit ist seit dem 28. Juni 2025 für viele kommerzielle Websites in Deutschland gesetzlich verpflichtend.
• Eine barrierefreie Website hilft nicht nur Menschen mit Behinderungen, sondern verbessert oft Nutzererfahrung, Reichweite, Conversion und SEO-Performance.
• Empfohlene Reihenfolge: 1) Theme wählen, 2) Inhalte strukturieren, 3) Navigation und Formulare optimieren, 4) mit Tools und echten Nutzern testen.

Einführung: Was bedeutet Barrierefreiheit in WordPress konkret?

Digitale Barrierefreiheit bedeutet, dass Websites so gestaltet sind, dass alle Menschen, unabhängig von individuellen Einschränkungen oder der verwendeten Technologie, uneingeschränkt darauf zugreifen können. Barrierefreiheit im Web bedeutet außerdem, dass Websites so umgesetzt werden, dass alle Menschen sie uneingeschränkt nutzen können, unabhängig von individuellen Einschränkungen oder der verwendeten Technologie.

Die Web Content Accessibility Guidelines (WCAG) des W3C definieren konkrete Grundsätze wie Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit, die Webprojekte erfüllen sollten, um Barrierefreiheit zu gewährleisten. Die Web Content Accessibility Guidelines (WCAG) des W3C definieren konkrete Grundsätze, wie Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit oder Robustheit, die Webprojekte erfüllen sollten, um barrierefrei zu sein. Mehr dazu finden Sie direkt bei den WCAG 2.2 des W3C.

Barrierefreiheit in WordPress betrifft das öffentliche Frontend und das Backend. Das CMS ist mit über 40 % Marktanteil ein zentraler Teil digitaler Teilhabe. Seit 2023 ist WCAG 2.2 aktuell; in Deutschland hat das Barrierefreiheitsstärkungsgesetz, kurz BFSG, seit 2025 zusätzliche Kraft.

Das richtige Theme für eine barrierefreie WordPress-Website wählen

Die Auswahl des Themes ist die Grundlage jeder zugänglichen WordPress-Website. Semantisches HTML, Kontrast, Fokus, responsive Navigation und Tastaturnavigation entstehen nicht erst im Content, sondern im Design.

Die aktuellen Standard-Themes von WordPress sind oft als „accessibility-ready“ gekennzeichnet, was bedeutet, dass sie wichtige Voraussetzungen für barrierefreies Webdesign erfüllen. Dazu gehören Twenty Twenty-Four, Twenty Twenty-Three und Twenty Twenty-One. Auf wordpress.org können Sie nach „Accessibility Ready“ filtern. Bei Premium-Themes sollten Website-Betreiber prüfen: WCAG-Dokumentation, sichtbare Fokusrahmen, keine versteckten Buttons und echte Screenreader-Unterstützung.

Die Webseite sollte es ermöglichen, dass Texte auf bis zu 200 % vergrößert werden können, ohne Layoutfehler zu verursachen. Testen Sie jedes Theme mit WAVE, axe DevTools, Lighthouse, BITV-Test und VoiceOver oder NVDA.

Barrierefreie Inhalte: Texte, Überschriften, Bilder und Medien

Auch das beste Theme scheitert, wenn die Inhalte unklar sind. Alle Texte auf der Website sollten klar und verständlich formuliert sein, wobei Schachtelsätze vermieden werden sollten. Barrierefreie Webseiten sind für Menschen mit Behinderungen von entscheidender Bedeutung, da sie gleichberechtigten Zugang zu Informationen und Funktionen bieten, die für andere selbstverständlich sind.

WordPress bietet viele Möglichkeiten, um die Web Content Accessibility Guidelines (WCAG) einzuhalten, insbesondere durch die Auswahl von barrierefreien Themes und Plugins. Um eine WordPress-Website barrierefrei zu gestalten, sollten Best Practices wie die Auswahl barrierefreier Themes, die Verwendung von Alt-Texten für Bilder und die klare Strukturierung von Inhalten beachtet werden.

Texte und Struktur

Nutzen Sie genau eine H1 pro Seite, danach H2 und H3. Überschriften sind kein Layout-Werkzeug. Der Gutenberg-Editor unterstützt gute Struktur besser als der Classic Editor, aber er ersetzt keine redaktionellen Fähigkeiten.

<h1>Leistungen</h1> <h2>Beratung</h2> <h3>Erstgespräch</h3>

Erklären Sie Fachbegriffe. Schreiben Sie <abbr title=”Web Content Accessibility Guidelines”>WCAG</abbr> oder <abbr title=”Barrierefreiheitsstärkungsgesetz”>BFSG</abbr>. Vermeiden Sie Links wie „hier klicken“. Besser: „Preise für Beratung ansehen“. Aufzählungen helfen Menschen mit kognitiven Einschränkungen und sparen viel Suchaufwand.

Als Autor dieses Artikels gilt: Jede Leistungsseite, Startseite und jeder Blogbeitrag braucht ein klares Ziel.

Texte sauber strukturieren und auszeichnen

Für komplexe Inhalte sind Listen oft besser als lange Absätze:

• Ein Gedanke pro Absatz
• Klare Zwischenüberschriften
• Einfache Sprache
• Keine kryptischen Kürzel
• Sichtbare Links

Advanced Editor Tools oder Markdown-Erweiterungen können als Werkzeug helfen, saubere Auszeichnung im Content Management zu behalten. Wichtig ist aber der redaktionelle Prozess, nicht nur die Einrichtung.

Bilder & Medien

Jedes informative Bild auf einer Website sollte einen prägnanten Alternativtext (Alt-Text) haben. Alt-Texte beschreiben nicht jedes Detail, sondern den Zweck. Schlecht: „Bild“. Besser: „Tastaturnutzer öffnet ein Kontaktformular“. Dekorative Bilder dürfen alt=”” haben.

In WordPress unterscheiden sich Alt-Text, Titel und Beschriftung. Der Titel verwaltet Medien, der Alt-Text hilft Screenreadern, die Beschriftung ist sichtbar.

Bilder, Videos und PDFs barrierefrei einsetzen

Videos von YouTube oder Vimeo brauchen Untertitel, bei wichtigen visuellen Informationen auch Transkripte oder Audiodeskriptionen. PDFs sollten Tags, Überschriften, Listen und Alternativtexte enthalten; oft ist eine HTML-Seite besser.

Medien-Checkliste:

• Informative Bilder mit Alt-Text versehen
• Dekorative Bilder leer lassen
• Videos mit Untertiteln bereitstellen
• PDFs auf Tags prüfen
• Dateilinks eindeutig benennen

Formulare, Navigation und Page Builder: typische Stolpersteine

Kontaktformulare, Checkout, Newsletter und Menüs erzeugen häufig Barrieren. Genau dort verlieren Online-Shops und Angebote Geld, Vertrauen und Nutzer.

Formulare barrierefrei umsetzen

Eingabefelder in Webformularen müssen mit einem fest verknüpften <label>-Element versehen sein. Platzhalter ersetzen kein Label.

<label for=”email”>E-Mail-Adresse</label> <input id=”email” name=”email” type=”email”>

Alle interaktiven Elemente einer Website sollten ohne Maus ausschließlich über die Tab-Taste bedienbar sein. Fehlermeldungen müssen klar sein, am Feld stehen und mit aria-describedby oder role=”alert” unterstützt werden. Screenreader benötigen präzise ARIA-Labels, um komplexe dynamische Elemente verständlich zu machen; schreiben Sie also ARIA-Labels bewusst und sparsam.

Formulare barrierefrei gestalten

Contact Form 7 ist flexibel, braucht aber saubere Konfiguration. Gravity Forms und WPForms bieten viele Barrierefreiheitsfunktionen, müssen aber getestet werden. Ninja Forms ist einfach, doch auch hier gilt: Kein Formular ist automatisch perfekt.

Nutzen Sie Honeypot oder serverseitige Filter statt Bild-CAPTCHAs. Prüfen Sie Tab-Reihenfolge, Fokuszustände und Fehlermeldungen.

Navigation & Menüs

Sprunglinks (Skip Links) ermöglichen es Tastaturnutzern, direkt zum Hauptinhalt einer Seite zu springen. Menüs sollten maximal zwei bis drei Ebenen haben.

Barrierearme Navigation und Menüs

Checkliste:

• Skip-Links wie „Direkt zum Inhalt“
• Klare Menünamen
• Mobile Menüs per Tastaturnavigation bedienbar
• Hamburger-Menüs mit aria-expanded
• Test mit Tab, Shift+Tab, Enter, Space und Pfeiltasten

Page Builder (Elementor, Divi & Co.)

Ein Builder kann Zeit sparen, aber auch Div-Spam erzeugen. Elementor, Divi, WPBakery oder Beaver Builder bieten Funktionen, doch Semantik, Fokusmanagement und HTML-Struktur bleiben Herausforderungen.

Page Builder verantwortungsvoll nutzen

Für einfache Layouts ist Gutenberg oft robuster. Wenn Sie einen Page Builder verwenden, achten Sie auf Dokumentation zu Accessibility, ergänzen Sie bei Bedarf header, main, nav, footer und testen Sie jede Integration. Barrierefreiheitsfunktionen in Toolbars sind kein Ersatz für sauberen Code.

Plugins und Tools, die bei Barrierefreiheit in WordPress helfen

Plugins sind essenziell, um WordPress-Websites barrierefrei zu gestalten, da sie viele Funktionen schnell und effizient implementieren können, ohne tief in den Code eingreifen zu müssen. Aber kein Plugin macht eine Website per Klick vollständig konform.

Nützliche Optionen:

1. WP Accessibility für Skip-Links, Fokus und kleine Korrekturen.
2. Equalize Digital Accessibility Checker für Prüfhinweise im Editor.
3. axe DevTools für technische Audits.
4. WAVE für visuelle Fehleranalyse.
5. Google Lighthouse für schnelle Basischecks.
6. BITV-Selbstbewertung für deutsche Vorgaben.
7. NVDA, VoiceOver und JAWS für reale Screenreader-Tests.

Seien Sie vorsichtig mit Overlays wie AccessiBe, AudioEye oder ähnlichen Komfortleisten. Zoom, Farbwechsel und Kontrastschalter lösen viele Anforderungen nicht.

Rechtlicher Rahmen (BFSG, WCAG 2.2) und praktische Umsetzungsschritte

Das Barrierefreiheitsstärkungsgesetz setzt den European Accessibility Act in Deutschland um. Seit dem 28.06.2025 betrifft das Gesetz viele digitale Produkte und Dienstleistungen, etwa E-Commerce, Apps, Buchungsstrecken und bestimmte Plattformen. Informationen bietet auch das Bundesministerium für Arbeit und Soziales.

Betroffen sind vor allem Unternehmen mit kommerziellen Angeboten. Kleinstunternehmen können Ausnahmen haben, sollten aber die Richtlinien trotzdem ernst nehmen. Für Audits dienen meist WCAG 2.1/2.2 AA und BITV als Standards.

Praktische Roadmap:

1. Ist-Analyse von Technik, Inhalten und Hürden.
2. Kritische Funktionen zuerst prüfen: Shop, Login, Formulare.
3. Theme, Plugins und Erweiterungen bewerten.
4. Inhalte, Bilder, PDFs und Navigation überarbeiten.
5. Tests mit Tools und Nutzern mit Behinderungen durchführen.
6. Wartung, Schulung und jährliche Audits einplanen.

Frühe Maßnahmen sparen Geld, weil Reparaturen später teurer sind.

FAQ zur Barrierefreiheit in WordPress

Bin ich mit meiner WordPress-Website vom BFSG betroffen und was muss ich bis 2025 tun?

Wenn Ihre WordPress-Website Verträge, Käufe oder digitale Dienstleistungen für Verbraucher ermöglicht, sollten Sie das BFSG prüfen. Priorisieren Sie Shop, Login, Suche, Kontaktformulare und Zahlungsprozesse. Starten Sie mit einem BITV-Selbsttest und holen Sie bei Unsicherheit juristische Beratung ein. Diese Antwort ersetzt keine Rechtsberatung.

Kann ich eine bestehende WordPress-Website nachträglich barrierefrei machen?

Ja, aber Aufwand und Budget hängen von Theme-Qualität, Plugins und Content-Menge ab. Beginnen Sie mit Kontrast, Fokus, Navigation, Formularen und Alt-Texten. Nutzen Sie ein Child-Theme, damit Code-Anpassungen updatesicher bleiben. Redaktionelle Korrekturen sind genauso wichtig wie technische.

Welche Screenreader und Browser sollte ich zum Testen meiner barrierefreien Website verwenden?

Testen Sie mindestens NVDA mit Firefox oder Chrome sowie VoiceOver mit Safari auf macOS oder iOS. JAWS ist kostenpflichtig, wird aber in professionellen Audits oft genutzt. Definieren Sie einfache Szenarien, etwa: „Nur mit Tastatur ein Formular absenden.“ Wiederholen Sie diese Tests nach jedem größeren Update.

Wie viel Budget muss ich für eine barrierefreie WordPress-Website einplanen?

Eine kleine Website mit gutem Basis-Theme ist günstiger als ein komplexer Shop mit Nutzerkonten und Sonderfunktionen. Planen Sie Barrierefreiheit nicht als einmaliges Projekt, sondern als laufenden Prozess. Schulung, Wartung und Tests gehören ins Jahresbudget. Früh geplant ist fast immer günstiger als später repariert.

Verbessert Barrierefreiheit auch meine SEO-Performance?

Ja, häufig. Saubere Überschriften, klare Texte, schnelle Ladezeiten, Alt-Texte und verständliche Navigation helfen Nutzern und Suchmaschinen. Accessibility- und SEO-Audits lassen sich gut kombinieren. So vermeiden Sie Doppelarbeit und verbessern gleichzeitig Sichtbarkeit, Nutzererfahrung und Conversion.