Barrierefreiheit für Websites wird immer wichtiger – nicht nur aus ethischer Sicht, sondern auch aufgrund neuer gesetzlicher Regelungen. Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) wird die digitale Zugänglichkeit zur Pflicht für viele Unternehmen. Die Übergangsfrist endet im Juni 2025, danach drohen Konsequenzen bei Nichtbeachtung. Besonders BetreiberInnen von Websites, Onlineshops oder digitalen Dienstleistungen sollten jetzt aktiv werden, um ihre Webangebote entsprechend anzupassen.
In diesem Artikel zeigen wir, was das Gesetz konkret bedeutet, welche Funktionen für Barrierefreiheit erforderlich sind und wie sich diese mit WordPress technisch umsetzen lassen. Ein besonderer Fokus liegt auf praktischen Plugins und Tools, mit denen NutzerInnen ihre WordPress-Website barrierefrei gestalten können.
Das Barrierefreiheitsstärkungsgesetz 2025 – Was steckt dahinter?
Das BFSG ist die deutsche Umsetzung der EU-Richtlinie 2019/882 (European Accessibility Act). Ziel ist es, digitale Produkte und Dienstleistungen für alle Menschen zugänglich zu machen – insbesondere für Menschen mit Behinderungen. Das Gesetz betrifft eine Vielzahl von Anbietern:
- Online-Shops
- Banken und Versicherungen
- Reiseanbieter
- Telekommunikationsunternehmen
- E-Book- und Ticketplattformen
BetreiberInnen dieser digitalen Angebote müssen sicherstellen, dass ihre Websites und Anwendungen barrierefrei nutzbar sind. Die Anforderungen orientieren sich an den international anerkannten WCAG 2.1 (Web Content Accessibility Guidelines) auf dem Level AA.
Wichtig: Die Übergangsfrist endet im Juni 2025. Ab diesem Zeitpunkt sind die Anforderungen verbindlich – und Verstöße können abgemahnt oder mit Bußgeldern sanktioniert werden.
WordPress und Barrierefreiheit – eine gute Grundlage
WordPress bietet eine solide technische Basis, um barrierefreie Websites zu erstellen. Der WordPress Core selbst wird fortlaufend hinsichtlich Barrierefreiheit optimiert. Viele Standard-Funktionen sind bereits gut zugänglich.
Wichtig zu beachten: Die Barrierefreiheit einer WordPress-Seite hängt stark von den verwendeten Themes und Plugins ab. Nicht alle sind von Haus aus barrierefrei. Auch der Einsatz von Page Buildern (z. B. Elementor, WPBakery) kann Probleme verursachen, wenn sie nicht korrekt konfiguriert sind oder Barrierefreiheitsstandards nicht einhalten.
Welche technischen Maßnahmen sollten mit WordPress umgesetzt werden?
Digitale Barrierefreiheit bedeutet, dass Websites für möglichst viele Menschen uneingeschränkt nutzbar sind – unabhängig von Einschränkungen in Sehen, Hören, Bewegung oder Kognition. Konkret müssen folgende Funktionen und Eigenschaften gegeben sein:
Barrierefreie Themes wählen
Die Wahl des richtigen WordPress-Themes ist der erste und wichtigste Schritt auf dem Weg zur barrierefreien Website. Nicht jedes Theme ist gleich gut geeignet – viele kostenlose oder kommerzielle Themes setzen vor allem auf visuelle Effekte und Designspielereien, vernachlässigen dabei jedoch die strukturelle und semantische Basis, die für Screenreader und Tastaturnavigation entscheidend ist.
Achten Sie auf das Label „accessibility-ready“, das von WordPress selbst vergeben wird. Dieses Siegel erhalten nur Themes, die bestimmte Mindestanforderungen an Barrierefreiheit erfüllen, z. B. ausreichende Farbkontraste, korrekt strukturierte HTML-Elemente und eine nutzbare Tastaturnavigation.
Sofern Sie WordPress-Themes aus dem Internet oder von externen Marktplätzen verwenden, achten Sie besonders darauf, ob das Theme barrierefrei entwickelt wurde oder zumindest grundlegende Accessibility-Prüfungen durchlaufen hat. Nicht jedes optisch ansprechende Theme erfüllt die technischen Standards, die für eine inklusive Website erforderlich sind.
Tipp: Im offiziellen WordPress-Theme-Verzeichnis können Sie gezielt nach „Barrierefrei“-Themes filtern. Ein guter Ausgangspunkt ist das Standard-Theme Twenty Twenty-One, das bei neuen WordPress-Installationen bereits vorinstalliert ist und als „accessibility-ready“ gilt.
Saubere HTML-Struktur verwenden
Die Grundlage jeder barrierefreien Website ist semantisch korrektes HTML. Das bedeutet: Inhalte werden mit den HTML-Elementen ausgezeichnet, die ihrer Bedeutung entsprechen. Überschriften sollten beispielsweise mit <h1> bis <h6> gekennzeichnet sein – und nicht einfach durch eine fette Schrift in einem <div>-Element dargestellt werden.
Warum ist das so wichtig? Screenreader lesen Seiten strukturiert aus. Wenn Inhalte keine saubere HTML-Semantik aufweisen, können NutzerInnen mit Sehbehinderung nicht effektiv navigieren oder sich orientieren. Auch für Suchmaschinen (SEO) ist eine klare Struktur von Vorteil.
Vermeiden Sie Layouts, die auf <div>-Suppe oder visuelle Tricks setzen, und nutzen Sie stattdessen echte Listen (<ul>, <ol>), Tabellen nur für tabellarische Daten und Formularelemente mit echten <label>-Tags.
ARIA-Roles und Landmarks nutzen
ARIA (Accessible Rich Internet Applications) ist ein Standard, der es erlaubt, zusätzliche semantische Informationen für Screenreader bereitzustellen. Insbesondere bei dynamischen Inhalten oder komplexen BenutzerInnen-Oberflächen helfen sogenannte ARIA-Roles und Landmarks, um klar zu kommunizieren, welche Funktion ein bestimmter Bereich erfüllt.
Beispiele für ARIA-Rollen und Landmarks:
- role=“navigation“ für das Hauptmenü
- role=“main“ für den Hauptinhalt
- aria-label=“Hauptnavigation“ zur besseren Beschreibung von Elementen
- aria-expanded für aufklappbare Menüs
Aber Achtung: ARIA sollte ergänzend, nicht ersetzend genutzt werden. Die HTML-Semantik hat Vorrang. Wer sich zu stark auf ARIA verlässt, läuft Gefahr, neue Barrieren zu schaffen – insbesondere, wenn die Rollen falsch verwendet werden.
Alternative Texte für Bilder pflegen
Bilder, Grafiken und multimediale Inhalte müssen aussagekräftige Alternativtexte enthalten. Die korrekte Verwendung des alt-Attributs im HTML-Code ist für Screenreader-NutzerInnen elementar. Alternative Texte, sogenannte ALT-Texte, beschreiben den Bildinhalt und ermöglichen so, dass auch Menschen mit Sehbehinderung die Information erfassen können, die im Bild vermittelt wird.
Best Practices für ALT-Texte:
- Kurz, aber präzise: Was zeigt das Bild? Welche Information vermittelt es?
- Keine Redundanz: Wenn das Bild rein dekorativ ist, sollte es mit alt=““ versehen werden.
- Keine „Bild von …“ oder „Grafik zeigt …“ – das ergibt sich bereits aus dem Kontext des Screenreaders.
In WordPress lassen sich ALT-Texte direkt in der Mediathek oder beim Einfügen eines Bildes in den Editor hinterlegen. Wichtig ist, dass dies systematisch gepflegt wird – auch bei nachträglichen Bild-Uploads oder Theme-Wechseln.
Klare und logische Navigationsstrukturen
Eine klar strukturierte Navigation ist für alle NutzerInnen wichtig, für Menschen mit Behinderungen jedoch unverzichtbar. Sie muss sowohl per Maus als auch per Tastatur erreichbar sein und logisch aufgebaut sein.
Tipps zur barrierefreien Navigation:
- Vermeiden Sie verschachtelte, mehrstufige Menüs, die nur mit Maus-Hover funktionieren.
- Sorgen Sie für klare Fokus-Markierungen beim Navigieren mit der Tabulator-Taste.
- Verwenden Sie sprechende Linktexte wie „Mehr über unsere Leistungen“, statt „Mehr erfahren“ oder „Hier klicken“.
- Bauen Sie sogenannte „Skiplinks“ ein, mit denen NutzerInnen direkt zum Hauptinhalt springen können.
Viele WordPress-Themes bieten entsprechende Navigationsstrukturen bereits an oder lassen sich mit Plugins wie WP Accessibility entsprechend erweitern.
Kontrastverhältnisse testen
Menschen mit Sehbeeinträchtigungen, Farbfehlsichtigkeit oder altersbedingtem Sehverlust profitieren stark von guten Kontrasten zwischen Text und Hintergrund. Auch bei Nutzung im Freien (z. B. am Handy) ist dies ein entscheidender Faktor.
Empfohlen wird ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Schrift. Für gesetzliche Konformität nach WCAG 2.1 Level AA ist das verpflichtend.
Nutzen Sie Tools wie:
- WebAIM Contrast Checker
- Colorable
- Browser-Erweiterungen wie „Accessibility Insights“ oder „Axe DevTools“
In WordPress lassen sich viele Kontraste über das Theme Customizer-Panel einstellen – bei individuellen Themes sollte dies im CSS geschehen.
Formulare verbessern
Formulare sind oft ein Stolperstein bei der Barrierefreiheit. Damit sie zugänglich sind, müssen sie strukturell korrekt aufgebaut sein und auch mit Tastatur vollständig bedienbar sein.
Wichtige Punkte für barrierefreie Formulare:
- Labels immer mit dem jeweiligen Eingabefeld verknüpfen (<label for=“id“>)
- Feldbeschreibungen und Hinweise eindeutig platzieren, z. B. durch aria-describedby
- Fehlermeldungen klar benennen und visuell wie akustisch hervorheben
- Fokusführung nicht vergessen: Wenn ein Fehler auftritt, sollte der Fokus automatisch auf das betroffene Feld springen
Viele Formulare-Plugins wie Gravity Forms, WPForms oder Contact Form 7 bieten inzwischen Barrierefreiheitsfunktionen oder lassen sich entsprechend erweitern.
Automatisierte Tests durchführen
Automatisierte Tests helfen dabei, offensichtliche Barrieren schnell zu identifizieren. Sie ersetzen keine manuelle Prüfung, sind aber ein guter Einstieg und eignen sich hervorragend für die regelmäßige Überwachung.
Beliebte Tools sind:
- Google Lighthouse (integriert in Chrome DevTools)
- WAVE Accessibility Tool (Browser-Extension)
- axe DevTools von Deque Systems
Diese Tools scannen HTML, CSS und ARIA-Strukturen und liefern konkrete Hinweise zu Problemen wie fehlende ALT-Texte, ungültige ARIA-Rollen oder schwache Kontraste.
In WordPress lassen sich diese Tests über EntwicklerInnen-Plugins oder extern per URL-Scan durchführen. Besonders hilfreich in der Entwicklungsphase und vor dem Go-Live.
Screenreader manuell testen
Auch wenn automatisierte Tests viel abdecken – den echten Nutzungsalltag von Menschen mit Screenreader können sie nicht simulieren. Daher ist es empfehlenswert, regelmäßig manuelle Tests mit gängigen Screenreadern durchzuführen.
Zwei gängige Optionen sind:
- NVDA (NonVisual Desktop Access) – kostenlos für Windows
- VoiceOver – standardmäßig auf macOS und iOS verfügbar
Beim Testen sollte geprüft werden:
- Wird die Seite logisch vorgelesen?
- Lassen sich alle Bereiche per Tab und Screenreader erreichen?
- Gibt es blinde Stellen oder irreführende Bezeichnungen?
Diese Tests helfen besonders dabei, Schwachstellen in der Content-Struktur und Navigation aufzudecken – und schaffen ein echtes Verständnis für die Perspektive betroffener NutzerInnen.
WordPress-Plugins für Barrierefreiheit – unsere Empfehlungen
Mit den richtigen Plugins lässt sich die Barrierefreiheit deutlich verbessern. Hier eine Auswahl bewährter Tools:
One Click Accessibility
Ein vielfach eingesetztes Plugin, das ohne Programmierkenntnisse viele Features bietet:
- Skiplinks einfügen
- Kontrast- und Schriftgrößenschalter
- ALT-Text-Erinnerungen
- Fokus-Management
(Wir setzen dieses Plugin häufig bei Kundenprojekten ein, da es stabil, vielseitig und gut wartbar ist.)
Accessibility by UserWay
- Bekannt durch die sichtbare Barrierefreiheits-Toolbar
- Ermöglicht viele Anpassungen direkt durch die NutzerInnen
- Achtung: Rechtlich nicht als alleinige Maßnahme ausreichend
WP ADA Compliance Check Basic
- Scannt Seiten nach bekannten Barrierefreiheitsproblemen
- Gibt Hinweise zur Behebung
- Eher für fortgeschrittene BetreiberInnen
Equalize Digital Accessibility Checker
- Echtzeit-Prüfung von Beiträgen und Seiten im Editor
- Sehr hilfreich für Redaktionen und Content-Teams
Hinweis: Plugins ersetzen keine individuelle Optimierung. Sie sind Werkzeuge, keine Komplettlösung. Oft braucht es zusätzliche Anpassungen im Theme oder direkt im Code.
Praxisbeispiel: So setzen wir Barrierefreiheit bei Fivecode um
Bei Fivecode ist Barrierefreiheit kein Nebenthema, sondern ein fester Bestandteil der Projektarbeit. In KundInnen-Projekten analysieren wir von Anfang an, wie Inhalte, Design und Technik zusammenspielen.
Ein mögliches Vorgehen könnte wie folgt aussehen – kann aber projektabhängig variieren:
- Audit & Analyse der bestehenden WordPress-Website
- Entwicklung eines barrierefreien Themes
- Integration des One Click Accessibility Plugins
- Technische Anpassungen in HTML, CSS und JavaScript
- Schulung der KundInnen zur barrierefreien Content-Pflege
- Abschlusstests mit Lighthouse, WAVE und NVDA
Diese Kombination aus Plugin, Technik und redaktioneller Schulung sorgt für nachhaltige Barrierefreiheit und sichert Sie rundum ab.
Fazit
Das Barrierefreiheitsstärkungsgesetz schafft klare Rahmenbedingungen für digitale Inklusion. Wer heute eine Website betreibt, sollte sich nicht nur wegen der gesetzlichen Pflicht mit Barrierefreiheit befassen, sondern auch aus Verantwortung gegenüber allen NutzerInnen.
WordPress bietet dafür viele gute Möglichkeiten. Mit den richtigen technischen Anpassungen, passenden Plugins und etwas Sensibilität beim Content lassen sich barrierefreie Angebote effizient umsetzen.
Noch ist Zeit bis Juni 2025 – aber gerade für größere Webprojekte lohnt es sich, jetzt aktiv zu werden.
Häufig gestellte Fragen
Das Barrierefreiheitsstärkungsgesetz ist die deutsche Umsetzung des European Accessibility Acts (EAA). Es verpflichtet BetreiberInnen bestimmter digitaler Angebote, ihre Websites und Anwendungen bis Juni 2025 barrierefrei zu gestalten. Ziel ist die digitale Teilhabe aller Menschen, insbesondere mit Behinderungen.
Das Gesetz gilt für Unternehmen, die digitale Produkte oder Dienstleistungen bereitstellen, z. B.:
- Online-Shops
- Banken & Versicherungen
- Buchungs- und Ticketportale
- Telekommunikations- und Transportdienste
Auch kleinere Unternehmen können betroffen sein, wenn sie digitale Leistungen vertreiben oder bereitstellen.
Barrierefreiheit bedeutet, dass alle Inhalte unabhängig von Einschränkungen nutzbar sind. Dazu gehören:
- Bedienung mit Tastatur und Screenreader
- Gute Kontraste und skalierbare Schriftgrößen
- Klare Seitenstruktur mit korrekt eingesetzten Überschriften
- Alternativtexte für Bilder
- Verständliche Formulare mit Fehlermeldungen und Hilfestellung
Nein. Barrierefreie Websites sind für alle angenehmer nutzbar – z. B. bei Nutzung mit dem Smartphone, unter Zeitdruck, bei schlechtem Internet oder altersbedingter Sehschwäche. Sie verbessern auch SEO, Nutzerfreundlichkeit und Conversion-Raten.
Nicht unbedingt. Der WordPress-Kern ist barrierefreundlich, aber Themes, Plugins und Inhalte können Barrieren verursachen. Eine genaue Prüfung und ggf. Anpassung ist nötig. Besonders Themes und Page Builder können Schwachstellen enthalten.
Ab Juni 2025 drohen Abmahnungen, Bußgelder und rechtliche Konsequenzen. Zusätzlich kann eine nicht barrierefreie Website den Ruf eines Unternehmens schädigen oder Zielgruppen ausschließen.
Teilweise, ja. WordPress bietet viele Möglichkeiten, um die Website-Barrierefreiheit selbst zu verbessern – z. B. durch die Verwendung barrierefreier Themes, das Einfügen von ALT-Texten oder die Optimierung der Farbkontraste. Allerdings stoßen BetreiberInnen ohne technisches Hintergrundwissen schnell an Grenzen: Die korrekte Umsetzung von Tastaturnavigation, Screenreader-Kompatibilität, semantischem HTML und ARIA-Rollen erfordert fundiertes Wissen in Webentwicklung und Barrierefreiheitsstandards (z. B. WCAG 2.1). Daher kann es oft sinnvoll sein, eine spezialisierte Agentur hinzuzuziehen.
Ja! Wir beraten, analysieren und optimieren bestehende WordPress-Websites hinsichtlich Barrierefreiheit – technisch und redaktionell. Wir nutzen dabei u. a. das Plugin WP Accessibility, führen Tests durch und geben Schulungen zur Content-Pflege.
