Estimated reading time: 8 Minuten

So bringst du echte Barrierefreiheit auf deine WordPress-Website

Barrierefreiheit im Web ist seit Jahren ein Thema, das in Präsentationen und Checklisten vorkommt – aber in der Praxis viel zu oft hinten runterfällt. „Mache ich später“, „ist bestimmt kompliziert“ oder „betrifft meine Seite doch gar nicht“ sind typische Reaktionen, die ich selbst schon oft gehört habe.

Als ich mir das WordPress-Plugin BarrierFree genauer angesehen habe, war für mich spannend: Kann ein relativ schlankes Plugin die Lücke zwischen Theorie (WCAG, BITV, EU-Richtlinien) und Alltag schließen? Mit BarrierFree 2.1 ist eine Version erschienen, die genau das ernsthaft versucht – ohne den typischen Overkill an Optionen und ohne SaaS-Abo-Modell.

In diesem Artikel zeige ich dir, wie BarrierFree 2.1 funktioniert, was sich gegenüber früheren Versionen getan hat und warum ich das Plugin für viele WordPress-Websites als extrem sinnvollen Baustein sehe.

Warum Barrierefreiheit nicht nur „nice to have“ ist

Bevor wir in Funktionen einsteigen, kurz der Blick auf das Warum:

• Immer mehr Websites sind rechtlich zur Barrierefreiheit verpflichtet (öffentliche Stellen, Hochschulen, bald auch viele Unternehmen).
• Die Bevölkerung altert – Schriftgrößen, Kontrast und Lesbarkeit werden immer wichtiger.
• Menschen mit Sehbehinderungen, Legasthenie oder kognitiven Einschränkungen sind eine reale Zielgruppe, nicht nur eine Randnotiz.
• Auch „normale“ Nutzer profitieren von besserer Lesbarkeit, klaren Links und individuellen Anpassungsmöglichkeiten.

Die Wahrheit ist: Das meiste, was wir heute unter moderner UX zusammenfassen, überschneidet sich stark mit Barrierefreiheit. BarrierFree setzt genau hier an und bringt diese Funktionen als Toolbar direkt ins Frontend deiner WordPress-Seite.

Was macht BarrierFree 2.1 eigentlich?

BarrierFree fügt deiner Website eine zugängliche Toolbar hinzu, die für Besucherinnen und Besucher immer sichtbar ist – als runder oder halbrunder Button am Bildschirmrand. Ein Klick darauf öffnet ein Panel mit verschiedenen Hilfsfunktionen:

• Texte vorlesen lassen (ganze Seite oder markierte Textstellen)
• Schriftgröße und Zeichenabstand anpassen
• Farben umschalten (Graustufen, invertierte Farben)
• Links hervorheben
• Großen Mauszeiger aktivieren
• Zeilenlineal zum besseren Lesen einblenden

Das Ganze läuft direkt im Browser des Besuchers, ohne externe Dienste, ohne Cloud-Anbindung und ohne zusätzliche Logins. Für mich als Admin heißt das: installieren, konfigurieren, fertig – keine laufenden Abhängigkeiten.

Was ist neu in Version 2.1?

Mit Version 2.1 hat das Plugin einen sichtbaren Sprung gemacht. Ich gehe hier auf die Punkte ein, die mir im Test am stärksten aufgefallen sind.

1. Deutlich modernisierte Toolbar

Die Toolbar wirkt in 2.1 wesentlich aufgeräumter und moderner:

• klar strukturierte Buttons mit verständlichen Beschriftungen
• prominenter Hauptbutton „Seite vorlesen“
• logische Gruppierung von Funktionen (z. B. Schrift, Darstellung, TTS)
• voll responsiv, auf Desktop wie Mobile gut bedienbar

Man merkt sehr gut, dass hier nicht nur „noch ein Panel“ an die Seite gehängt wurde, sondern dass jemand die Bedienung aus Nutzersicht durchdacht hat.

2. Flexible Positionierung im Frontend

Einer der Klassiker bei Frontend-Plugins: Sie liegen irgendwann über einem Cookie-Banner, Chat-Widget oder CTA-Button. BarrierFree 2.1 gibt dir deshalb im Backend die Wahl:

• oben links (halbrunder Button am oberen Rand)
• oben rechts
• unten links (freischwebender runder Button)
• unten rechts

Der Abstand zum Rand ist mit 20 Pixeln so gewählt, dass der Button präsent, aber nicht im Weg ist. Für die meisten Layouts reicht das völlig aus.

3. Sieben Farbschemata

Optisch passt sich die Toolbar über vordefinierte Farbschemata an dein Design an:

• Blau (Standard)
• Grün
• Rot
• Lila
• Orange
• Türkis
• Dunkel

Das ist kein Branding-Framework, sondern bewusst pragmatisch gehalten: Du findest in der Regel eine Variante, die zu deinem Theme passt oder zumindest nicht störend heraussticht.

4. Neu strukturierte Text-zu-Sprache-Bedienung

Die TTS-Funktionen (Text-to-Speech) wurden in 2.1 deutlich verbessert:

• Hauptfokus auf: „Seite vorlesen“
• zusätzliche Buttons für:
  • markierten Text vorlesen
  • Vorlesen stoppen
• Info-Bereich mit Hinweisen zu Tastaturkürzeln (z. B. Strg + R)

Gerade für Nutzer, die diese Funktionen häufiger brauchen, ist die TTS-Sektion jetzt deutlich selbsterklärender.

Die Funktionen im Detail – was bringt das deinen Besuchern?

Text-zu-Sprache (TTS) mit der Web Speech API

BarrierFree setzt auf die Web Speech API der Browser. Das hat zwei große Vorteile:

1. keine externen Dienste oder API-Keys
2. keine personenbezogenen Daten, die an Drittanbieter gesendet werden

Die Toolbar bietet unter anderem:

• Seite komplett vorlesen
• nur markierte Textstellen vorlesen
• Vorlesen jederzeit stoppen
• Sprachwahl zwischen Deutsch (de-DE) und Englisch (en-GB), abhängig von Browser und System

In der Premium-Variante lässt sich zusätzlich die Vorlesegeschwindigkeit steuern (0,75x, 1,0x, 1,25x). Für Blogs oder längere Fachartikel ist das ein echter Mehrwert.

Schriftgrößenanpassung mit Speicherfunktion

Klassiker, aber wichtig: Besucher können die Schriftgröße in 10-Prozent-Schritten anpassen:

• A−: bis zu 40 Prozent kleiner
• A: Standardgröße
• A+: bis zu 40 Prozent größer

Die Einstellung wird im LocalStorage gespeichert. Wer deine Seite regelmäßig besucht (z. B. Stammleser oder Kunden), muss das nicht jedes Mal neu einstellen.

Zeichenabstand – gerade für Legastheniker spannend

Der Zeichenabstand lässt sich ebenfalls anpassen:

• aA−: enger
• aA: Standard
• aA+: weiter (bis zu 0,3 em)

Gerade für Menschen mit Legasthenie oder Konzentrationsschwierigkeiten kann ein angepasster Zeichenabstand den Unterschied machen, ob ein Text gut lesbar ist oder nicht.

Visuelle Modi: Graustufe und invertierte Farben

Stichwort „visueller Lärm“: BarrierFree bringt zwei einfache, aber wirkungsvolle Modi:

• Graustufen-Modus: reduziert Farben, hebt den Text stärker hervor
• Invertierte Farben: erzeugt einen dunklen, sehr kontrastreichen Modus

Beide Modi werden per CSS-Filter umgesetzt und sind mit einem Klick wieder deaktiviert.

Links deutlicher kennzeichnen

Wenn du ein sehr minimalistisches Design fährst, verschwinden Links schnell optisch. Die Toolbar kann Links daher:

• mit einem farbigen Hintergrund hervorheben
• konsequent unterstreichen

Das hilft insbesondere älteren Nutzern und allen, die sich in komplexen Texten schwer orientieren.

Großer Mauszeiger und Leselineal

Zwei Funktionen, die im Alltag überraschend oft hilfreich sind:

• Großer Mauszeiger: ersetzt den Standardcursor durch einen deutlich größeren, kontrastreichen Zeiger.
• Zeilenlineal (Reading Guide): ein horizontales „Lineal“, das der Maus folgt und so das Fokussieren von Zeilen erleichtert.

Damit lassen sich lange Textblöcke deutlich entspannter lesen.

Admin-Bereich: Was kann ich als Betreiber einstellen?

Im WordPress-Backend bringt BarrierFree eine eigene Einstellungsseite mit. Die wichtigsten Bereiche:

Grundeinstellungen

• Position der Toolbar
• Auswahl des Farbschemas
• Größe des Buttons (40–100 px, Standard: 60 px)
• optionaler Debug-Modus mit erweiterten Konsolenmeldungen

Gerade der Debug-Modus ist beim ersten Einrichten hilfreich, falls du sehen willst, was im Hintergrund passiert.

Icon-Auswahl

Die Hauptschaltfläche kann mit verschiedenen Icons ausgestattet werden, z. B.:

• Standard-Accessibility-Symbol
• Rollstuhl
• Auge, Hand, Herz, Stern, Zahnrad, Fragezeichen
• eigenes Icon per externer Bild-URL (SVG, PNG, JPG, GIF)

Die Icon-Größe ist separat einstellbar (16–48 px). Praktisch, wenn du das Icon an dein restliches UI anpassen möchtest.

Premium-Optionen

Mit einem Aktivierungscode lassen sich zusätzliche Funktionen freischalten:

1. Anpassung der Vorlesegeschwindigkeit
2. Eigener Footer-Link in der Toolbar (URL + Text einstellbar)
3. Premium-Badge in der Toolbar

Gerade für Agenturen oder Unternehmen, die das Plugin in Kundenprojekten einsetzen, ist der konfigurierbare Footer-Link interessant (z. B. für eine Barrierefreiheitsseite, Kontakt oder Dokumentation).

Technik und Performance

Aus technischer Sicht verhält sich BarrierFree angenehm unauffällig:

• schlanke CSS- und JavaScript-Dateien
• Frontend-Assets werden nur geladen, wo sie gebraucht werden
• keine zusätzlichen Datenbankabfragen im normalen Betrieb
• Nutzerzustände (z. B. Schriftgröße) werden im LocalStorage statt in der Datenbank gespeichert
• Unterstützung moderner Browser (Chrome, Firefox, Safari, Edge, Opera)
• ARIA-Labels und Screen-Reader-Kompatibilität sind mitgedacht

Wenn du schon genug „Performance-Ballast“ im Projekt hast, ist es beruhigend, dass BarrierFree hier nicht zusätzlich negativ auffällt.

Für wen lohnt sich BarrierFree 2.1?

Meiner Einschätzung nach ist das Plugin besonders spannend für:

• Blogs und Magazinseiten, die viele längere Texte veröffentlichen
• Unternehmensseiten, die eine wachsende, heterogene Zielgruppe ansprechen
• Kommunale Einrichtungen, Schulen, Vereine, die Barrierefreiheit stärker berücksichtigen müssen
• Agenturen, die Barrierefreiheit als festen Bestandteil in WordPress-Projekten etablieren wollen

Wichtig: BarrierFree ist kein kompletter WCAG-Automatismus. Themen wie semantische HTML-Struktur, saubere Formular-Labels oder PDF-Barrierefreiheit musst du weiterhin selbst (bzw. im Projektteam) angehen. Das Plugin löst nicht alles, nimmt dir aber einen großen Teil der Frontend-Hürden ab.

Installation: In wenigen Minuten startklar

Die Einrichtung ist so, wie man es von einem klassischen WordPress-Plugin erwartet:

1. Plugin-ZIP hier , herunterladen
2. Im Backend zu „Plugins → Installieren → Plugin hochladen“
3. ZIP hochladen, Plugin aktivieren
4. Unter „Einstellungen → BarrierFree“ Position, Farbschema und Icon setzen
5. Änderungen speichern, Frontend prüfen – fertig

Die Premium-Funktionen werden über einen Aktivierungscode freigeschaltet, der im Einstellungsbereich hinterlegt wird.

Fazit: Ein pragmatischer Schritt in Richtung inklusives Web

BarrierFree 2.1 ist kein „All-in-one-Wunderwerkzeug“, das deine Seite auf Knopfdruck 100 Prozent WCAG-konform macht. Das wäre auch unrealistisch.

Was es aber sehr gut macht:

• Es bringt konkrete, spürbare Verbesserungen für echte Nutzergruppen.
• Es bleibt überschaubar konfigurierbar und überfordert dich nicht mit 50 Untermenüs.
• Es verzichtet auf externe Dienste und komplexe Lizenzmodelle.
• Es lässt sich in wenigen Minuten in bestehende Websites integrieren.