Eine barrierefreie WordPress-Website stellt sicher, dass alle Nutzer:innen – unabhängig von körperlichen oder technischen Einschränkungen – auf Website Inhalte zugreifen und interagieren können. Dies umfasst Menschen mit Sehbehinderungen, motorischen Einschränkungen oder Hörschäden. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) sind in der EU viele Websites zur Einhaltung der WCAG 2.2 AA verpflichtet. Hier erfährst du, wie du eure WordPress-Website barrierefrei zugänglich gestalten, entwickeln und umsetzen kannst.
Konkret behandelt dieser Beitrag nachfolgende Themen. Du kannst einfach auf ein Thema klicken um direkt zu diesem Abschnitt zu gelangen:
Grundlagen der Barrierefreiheit verstehen
Die Web Content Accessibility Guidelines (WCAG) 2.2 und die europäische Norm EN 301 549 sind die zentralen Standards für die europäische und deutsche Gesetzgebung zur Barriefreiheit von Websites. Sie definieren Anforderungen wie:
- Wahrnehmbarkeit: Inhalte müssen für alle Sinne zugänglich sein (z.B. Alt-Texte für Bilder).
- Bedienbarkeit: Navigation per Tastatur und ausreichende Zeit zum Lesen von Inhalten.
- Verständlichkeit: Klare Sprache und vorhersehbare Navigation.
- Robustheit: Kompatibilität mit assistiven Technologien wie Screenreadern.
Bedeutung der Barrierefreiheit
Barrierefreiheit ist nicht nur eine technische Anforderung, sondern auch eine ethische und oft rechtliche Verpflichtung. Sie ermöglicht:
- Inklusion: Menschen mit Behinderungen können gleichberechtigt am digitalen Leben teilhaben.
- Verbesserte Benutzererfahrung: Eine barrierefreie WordPress-Website ist für alle Nutzer benutzerfreundlicher.
- Größere Reichweite: Du erreichst ein breiteres Publikum, einschließlich älterer Menschen und Nutzer mit temporären Einschränkungen.
- SEO-Vorteile: Viele Barrierefreiheitsmaßnahmen verbessern auch die Suchmaschinenoptimierung.
Für wen gilt das Gesetz (BFSG)?
Private Angebote sowie rein geschäftliche (B2B) Leistungen fallen nicht unter die Regelungen des Barrierefreiheitsstärkungsgesetzes (BFSG). Darüber hinaus sind Kleinunternehmen von den Anforderungen ausgenommen. Als Kleinunternehmen gelten Betriebe mit weniger als zehn Beschäftigten oder einem Jahresumsatz beziehungsweise einer Bilanzsumme von maximal zwei Millionen Euro.
Sollten die notwendigen Anpassungen an einer Dienstleistung ein erhebliches wirtschaftliches Risiko für dein Unternehmen darstellen, kannst du ebenfalls von den Pflichten des BFSG befreit werden.
Konsultiere im Zweifel einen rechtlichen Berater und lasse prüfen, ob dein Unternehmen den Vorgaben des BFSG unterliegt. Selbst wenn du nicht gesetzlich verpflichtet bist, kann eine barrierefreie WordPress-Website viele Vorteile bieten – von einer größeren Zielgruppe über Verbesserung bei der Suchmaschinen-Optimierung (SEO) bis hin zu einer verbesserten Nutzererfahrung (UX) für alle. Daher empfehlen wir die Entwicklung einer barrierefreien Website grundsätzlich jedem.
Welche Standards gibt es in Bezug auf die Konformitätsstufen der Barrierefreiheit?
Die Web Content Accessibility Guidelines (WCAG) definieren drei Konformitätsstufen: A, AA und AAA. Eine Website gilt aktuell als barrierefrei, wenn sie die Anforderungen der Konformitätsstufe AA erfüllt. Diese Stufe wird als Standard angesehen, da sie sicherstellt, dass die meisten Barrieren beseitigt sind, und die Website somit für eine breite Nutzergruppe zugänglich ist.
| A | AA | AAA | |
|---|---|---|---|
| Wahrnehmbarkeit | Bereitstellung von Textalternativen für nicht-textliche Inhalte und die Möglichkeit, Inhalte individuell anzupassen. | Verbesserter Kontrast, die Möglichkeit zur Anpassung von Textgrößen und das Hinzufügen von Untertiteln für Live-Medien. | Höherer Kontrast (mindestens 7:1), Bereitstellung von Gebärdensprachübersetzungen und detaillierte Audiobeschreibungen. |
| Bedienbarkeit | Unterstützung durch Navigationshilfen und vollständige Bedienbarkeit der Website über die Tastatur. | Bereitstellung mehrerer Navigationsoptionen und deutlich sichtbare Fokusmarkierungen. | Uneingeschränkte Tastaturzugänglichkeit und klar strukturierte Abschnitte zur besseren Inhaltsorganisation. |
| Verständlichkeit | Vorhersehbares Verhalten der Seiten sowie Unterstützung bei der Eingabe von Informationen. | Einheitliche Navigation und klare Kennzeichnung von Elementen. | Verbesserung der Lesbarkeit, einfache Erklärungen für komplexe Begriffe und Unterstützung durch Aussprachehilfen. |
Automatisierte Anpassungen für WordPress
Es gibt etwa 50 WCAG-Kriterien, welche die Barrierefreiheit von Websites definieren. Da WordPress selbst und optional verfügbare Themes und Plugins von Haus aus bereits einige Kriterien erfüllen und die Barrierefreiheit teilweise herstellen, legen wir in diesem Beitrag den Fokus nicht auf alle WCAG-Kriterien, sondern gehen in Bezug zu WordPress lediglich auf die wichtigsten Kriterien ein.
Wir unterscheiden hierbei zunächst zwischen automatischen und automatisierten Anpassungen durch Themes oder Plugins. Später im Beitrag erweitern wir diese Optionen um manuell umsetzbare Kriterien.
Barrierefreies WordPress-Theme wählen
Nutze Themes, die als „accessibility-ready“ zertifiziert sind. Diese erfüllen Mindestanforderungen wie:
- Tastaturnavigation: Menüs und Links sind ohne Maus bedienbar.
- Semantisches HTML: Korrekte Verwendung von Überschriften (H1–H6) für Screenreader.
- Farbkontraste: Mindestens 4,5:1 zwischen Text und Hintergrund bei einer Schriftgröße unter 24 Pixel. Für größeren Text ist ein Kontrast von 3:1 ausreichend.
Barrierefreiheits-Plugins einsetzen
Plugins ergänzen fehlende Funktionen und automatisieren Anpassungen:
- One Click Accessibility oder WP Accessibility: Fügt Sprunglinks hinzu, korrigiert ARIA-Attribute und bietet eine Toolbar für Schriftvergrößerung oder Kontrastmodus.
- One Click Accessibility: Ermöglicht Nutzer:innen, Schriftgrößen anzupassen und Links zu unterstreichen.
- Accessibility Checker: Prüft Beiträge automatisch auf WCAG-Konformität.
Die wichtigsten WCAG-Kriterien für WordPress
Neben den oben genannten automatischen und automatisierten Optionen listen wir im Folgenden die Kriterien auf, die beim Erstellen, Pflegen und Aktualisierungen deiner Webseite unbedingt beachtet werden sollten. Zum einen, um Barrierefreiheit herzustellen und auch langfristig zu erhalten. Konkret geht es dabei um folgende Themen:
- Struktur des Inhalts
- Medien müssen immer lesbar sein
- Barrierefreies Webdesign
- Barrierefreie Formulare
- Bedienung
Struktur des Inhalts
Die Inhalte müssen semantisch korrekt im HTML ausgewiesen sein:
- Überschriften: Headlines müssen immer in der hierarchisch korrekten Reihenfolge erfolgen. Die
H1darf nur 1x pro Seite vorkommen und nachfolgend sind die ÜberschriftenH2–H6zu verwenden. So kann auf eineH2keineH5folgen. - Texte: Fließtexte und Textabsätze sind immer in
<p>-Paragraphen zu einzufassen. Texthervorhebungen können mittels<em>kursiv oder<strong>fett vorgenommen werden. - Listen: Nutze für Listen immer das
<ol>oder<ul>Element mit den untergeordneten<li>-Elementen. - Zitate: Alle Zitate gehören in
<blockquote>-Elemente (oder<q>-Elemente für kürzere Zitate innerhalb von Fließtexten). Quellen zum Zitat können im<cite>-Element zugehörig angeben werden. - Sprache: Die Website sollte grundsätzlich in leicht verständlicher Sprache verfasst sein. Textbausteine einer abweichenden Sprachen als der Hauptsprache wird mit einem
lang-Attribut gekennzeichnet, zum Beispiel<span lang="en-US">. - Links: Verlinkungen und klickbare Elemente müssen als solche erkennbar sein und mit abweichendem Kontrast, Farbgebung und einer Hervorhebung (unterstrichen oder fett) ausreichend lesbar sein. Es reicht nicht aus Links ausschließlich farblich zu kennzeichnen. Es muss immer erkennbar sein, wohin der Link führt. Wenn der Link keinen Linktext enthält, kann mit
aria-labelangegeben werden. - Tabellen: Tabellen müssen auch für Screenreader durch korrekte semantische Auszeichnungen verständlich sein. Tabellen sollten immer eine Tabellenbeschreibung besitzen mit dem HTML-Element
<caption>. Nutze außerdem immer<thead>und/oder<th>-Elemente für die Kopfzeilen von Tabellen. Für komplexere Tabellen mit mehreren<th>-Elementen benötigst du außerdem dasscope="row"bzw.scope="col"-Attribut für die Kennzeichnung der Spalten und Zeilen.
<caption>Überschrift zur Tabelle</caption>
<table>
<thead><tr><th scope="col">Modul</th><th scope="col">Datum</th</tr></thead>
<tbody>
<tr><th scope="row">Modul 1</th><td>März</td></tr>
<tr><th scope="row">Modul 2</th><td>April</td></tr>
</tbody>
</table>
Barrierefreies Webdesign
Bereits beim Webdesign können wichtige Kriterien zur Barrierefreiheit berücksichtigt werden:
- Farbgebung und Kontraste: Das Kontrastverhältnis zwischen Text und Hintergrund sollte ausreichend hoch sein, um die Lesbarkeit zu gewährleisten. Für Texte mit einer Schriftgröße unter 24 px ist ein Mindestkontrast von 4,5:1 erforderlich. Bei Schriftgrößen über 24 px (oder 18,66 px bei fettgedrucktem Text) genügt ein Kontrastverhältnis von mindestens 3:1. Auch ohne Farben muss eine Website in schwarz-weiß ausreichend bedienbar sein (im Falle einer Farbenblindheit). Tools wie beispielsweise WebAIM Contrast Checker helfen, die WCAG-Vorgaben zu erfüllen.
- Typografie: Verwende klare Schriftarten, meist serifenlose Schriften, wie Arial oder Open Sans.
- Responsive Design: Stelle sicher, dass Texte auf mobilen Geräten ohne Zoomen lesbar sind.
- Mindestgröße von Bedienelementen: Damit alle Elemente bedienbar sind, sollten sie eine Mindestgröße von 24 x 24 Pixeln aufweisen. Im Idealfall sind Elemente größer.
- Konsistenz: Design und Navigation sollten immer möglichst gleich bleiben und sich ähnlich verhalten.
Medien müssen immer lesbar sein
Medien wie Bilder, Audio, Videos und Grafiken müssen immer lesbar sein:
- Bilder: Alle Bilder müssen eine textlich lesbare Bildbeschreibung (Alt-Tag, Title-Tag und Screenreader Text) besitzen. Auf den Bildern darf kein essentieller Text vorhanden sein. Rein dekorative Hintergrundbilder und Icons sind von dieser Regelung ausgenommen, wohingegen Bilder und Icons, die als Links dienen, einen Hinweis darauf geben müssen, wohin die Verlinkung führt.
- Audio: Audioinhalte müssen entweder eine Audiodeskription enthalten oder eine Zusammenfassung des Inhalts bereitstellen.
- Video: Videos müssen Untertitel besitzen. Das gilt sowohl für lokal eingebundene Videos als auch Videos über Videoportale wie beispielsweise YouTube und Vimeo. Die Regel gilt auch für Livestreams und Live-Vorträge.
Barrierefreie Formulare
Damit Formulare als barrierefrei gelten, müssen folgende Voraussetzungen erfüllt sein:
- Label: Jedes Eingabefeld muss ein zugehöriges
<label>-Element als Beschriftung besitzen. - Autofill: Erforderliche Felder sollen sich nach Möglichkeit automatisch ausfüllen lassen mithilfe des
autocomplete-Attributs automaisch befüllen, zum Beispielautocomplete="given-name"für den Vornamen. - Hervorhebung: Fokussierte Elemente müssen farblich hervorgehoben werden.
- Wiederholung: Daten dürfen nicht mehrfach eingeben werden.
- Validierung: Fehler beim Ausfüllen des Formulars müssen eine genaue Fehlerbeschreibung und einen Lösungshinweis haben.
- Buttons: Schaltflächen müssen ein einheitliches Aussehen und eine gleichbleibende Beschriftung haben. Das Formular darf erst nach einem Klick auf den Submit-Button abgesendet werden, nicht durch ein Hover oder Focus.
- Rückgängigkeit: Bei wichtigen Angaben muss eine Funktion bereitgestellt werden um Änderungen rückgängig zu machen.
Bedienung
Folgende Kriterien zur Website-Bedienung gelten zur Barrierefreiheit:
- Tastaturbedienung: Die Website muss ohne Maus bedienbar sein. Es soll möglich sein, nur mit der Tab-Taste durch die Seite zu springen. Eventuell verwendete Tastenkürzel müssen abschaltbar sein.
- Bildschirm drehen: Es muss möglich sein, auf mobilen Endgeräten den Bildschirm zu drehen.
- Zoombarkeit: Es muss immer möglich sein, die Seite per Zoom zu vergrößern. Deine Website sollte sowohl bei einer Breite von 1280 Pixel und 400% Zoom als auch bei einer Breite von 320px vollständig funktionsfähig bleiben, sodass alle Inhalte und Funktionen weiterhin zugänglich sind. Texte dürfen dabei nicht in zwei Richtungen (horizontal und vertikal) gescrollt werden müssen. Ausnahmen gelten für Elemente wie Tabellen oder Videos, bei denen zweidimensionales Scrollen unvermeidbar ist.
- Animationen, Töne und Benachrichtigungen: Animationen und Töne müssen lautlos gestellt werden können sowie Benachrichtigungen lesbar und abschaltbar sein. Blinkende und automatisch gestartete Animationen dürfen nicht öfter als 3x pro Sekunde und 3x abgespielt werden (auch GIFs).
- Zeitkritische Aktionen: Für eine Aktion muss immer ausreichend Zeit zur Verfügung stehen.
- Zeilenabstand und Textüberhang: Bei einer Anpassung des Zeilenabstands darf kein Text abgeschnitten werden.
- Modals: Popups und Models müssen per Tastatur zu öffnen und zu schließen sein.
- Drag & Drop: Es muss zum Wischen oder Ziehen eines Elementes immer eine alternative Navigationsmöglichkeit geben.
- Alternative Navigation: Suche, Sitemap und Sprunglinks bei sich wiederholenden Elementen – z.B. beim Headermenü – bieten alternative Navigationsmöglichkeiten.
Die Herstellung und Einhaltung von barrierefreien WordPress-Websites
Rechtliche Anforderungen beachten
Ab Juni 2025 gilt in der EU das Barrierefreiheitsstärkungsgesetz (BFSG), das viele Websites zur Einhaltung der WCAG 2.2 AA verpflichtet. Eine Umsetzung vermeidet rechtliche Risiken und erweitert deine Zielgruppe. Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Durch regelmäßige Tests schaffst du eine inklusive Website, die allen Nutzer:innen eine positive Erfahrung bietet.
Bitte denke auch daran, eine neue Unterseite mit einer Erklärung zur Barrierefreiheit zusätzlich zu deinem Impressum, Datenschutz und AGB in deine Webpräsenz mit aufzunehmen. Außerdem muss es auf deiner Website eine exta Kontakt-Möglichkeit geben, damit eventuell doch vorhandene Barrieren gemeldet werden können.
FAQ: Häufig gestellte Fragen zu barriefreien WordPress Websites
Welche Strafen drohen, wenn meine Website nicht barrierefrei ist?
Stellt eine Marktüberwachungsbehörde fest, dass deine WordPress-Website (noch) nicht barrierefrei ist, wirst du zunächst aufgefordert, die Barrierefreiheit zu schaffen. Ignorierst du diese Aufforderungen mehrfach, kann die Behörde anordnen, deine Website so lange inaktiv zu stellen, bis die Barrierefreiheit geschaffenist. Darüber hinaus können Bußgelder in Höhe von bis zu mehreren Tausend Euro verhängt werden. Die zuständige Behörde kann entweder eigenständig aktiv werden oder auch auf Hinweis von Verbraucher:innen oder Verbänden tätig werden.
Müssen eingebundene Lösungen von Drittanbietern auch barrierefrei sein?
Du bist selbst dafür verantwortlich, dass dein Online-Auftritt barrierefrei ist – ganz gleich, ob du eine Funktion selbst entwickelt oder von einem Drittanbieter eingebunden hast.
Achte deshalb darauf, Drittanbieter zu wählen, deren Produkte barrierefrei sind. Falls es für deinen spezifischen Bedarf keinen barrierefreien Anbieter gibt, dokumentiere die bestehenden Barrierefreiheitsprobleme in deiner „Erklärung zur Barrierefreiheit“ und verlinke auf die Website des Anbieters. Biete außerdem eine barrierefreie Alternative zu den betroffenen Inhalten an. Zum Beispiel könntest du anstelle einer interaktiven Kartenansicht eine einfache Adressliste bereitstellen.
Was kostet es eine Website barrierefrei umzusetzen?
Neue Websites bei uns sind standardmäßig immer barrierefrei, insofern dein Unternehmen dafür qualifiziert sein muss. Was es kostet eine bestehende Website nachträglich barrierefrei zu machen hängt von vielen Faktoren ab. Kontaktiere uns hierzu unverbindlich und wir unterbreiten dir gerne ein unverbindliches Angebot.
Regelmäßige Audits durchführen
Nutze Online-Tools, um automatisch Barrieren zu identifizieren. Kombiniere diese Tools mit eigenen manuellen Tests, z.B. indem du Menschen mit Einschränkungen bittest, deine Website zu prüfen. Um die Barrierefreiheit zu überprüfen, können verschiedene Methoden angewendet werden:
- Automatisierte Tools: Wie WAVE oder axe, die grundlegende Probleme identifizieren können.
- Manuelle Tests: Durchführung von Tastatur-Navigation und Screenreader-Tests.
- Nutzertests: Einbeziehung von Menschen mit Behinderungen in den Testprozess.
Indem die oben aufgeführten Grundlagen angewendet werden, legst du den Grundstein für eine barrierefreie WordPress-Website und inklusive Online-Präsenz. Es ist ein kontinuierlicher Prozess, der regelmäßiges Überprüfen und Anpassen erfordert. So stellst du sicher, dass sich die Website mit künftigen Standards und Technologien Schritt halten kann.
Hilfe bei Umsetzung anfragen
Wir bei ComMotion haben uns auf WordPress Websites spezialisiert. Wir unterstützen dich gerne bei der Erstellung, Umsetzung und Anpassung deiner Websites, damit diese künftig die Anforderungen des Barrierefreiheitsstärkungsgesetz (BFSG) erfüllen kann. Frage jetzt unverbindlich bei uns an und wir senden dir umgehend ein unverbindliches Angebot.
