Integration & Plugins

BFSGuard in 2 Minuten in jede Website integrieren — WordPress, Shopify, oder HTML.

Universal JavaScript Snippet

Funktioniert mit jeder Website. Einfach vor </body> einfügen:

<!-- BFSGuard Widget + Auto-Fix -->
<script src="https://bfsguard.de/widget.js"
  data-api-key="IHR_API_KEY"
  data-auto-fix="true">
</script>

Unterstützte Plattformen

WordPress

Shopify

WooCommerce

Webflow

Squarespace

Custom HTML

WordPress Installation

Schritt 1: Gehen Sie zu Design → Theme-Editor → header.php oder footer.php

Schritt 2: Fügen Sie den JavaScript-Code vor </body> ein

Schritt 3: Ersetzen Sie IHR_API_KEY mit Ihrem API-Key aus dem Dashboard

Schritt 4: Speichern und testen — Widget erscheint links unten

Shopify Installation

Schritt 1: Online Store → Themes → Edit Code → theme.liquid

Schritt 2: Fügen Sie den Code vor </body> ein

Schritt 3: Speichern — fertig!

Features

Das Snippet aktiviert automatisch:

Barrierefreiheits-Widget mit 25+ Anpassungen
Auto-Fix für Alt-Texte, Kontraste, ARIA-Labels
Automatische Barrierefreiheitserklärung
Monitoring und E-Mail-Alerts

BFSGuard für WordPress — Installation in 3 Schritten

Plugin herunterladen: bfsguard-wordpress-plugin.zip (Version 1.0.0) — direkt hier, kein Konto nötig.
In WordPress aktivieren: WP-Admin → Plugins → Plugin hochladen → BFSGuard-API-Schlüssel eintragen → Speichern. Der Schlüssel steht in Ihrem Dashboard unter »API«.
API-Schlüssel eintragen: WP-Admin → Einstellungen → BFSGuard. Dort Schlüssel einfügen, Position und Auto-Fix wählen, speichern. Ohne Schlüssel wird bewusst kein Skript ausgeliefert.

Warum ein Plugin statt Theme-Editor? Die weiter oben beschriebene Methode (Snippet in header.php/footer.php) wird bei jedem Theme-Update überschrieben. Das Plugin bindet das Widget über die WordPress-Skript-API ein und übersteht Updates.
Wichtig: Widget und Auto-Fix verbessern die Bedienbarkeit, stellen aber für sich genommen keine BFSG-/WCAG-Konformität her.

Was das Plugin auf Ihrer WordPress-Seite tut

Automatisches Widget-Embed: Schreibt das BFSGuard-Widget-Script in den <head>, ohne dass Sie das Theme bearbeiten müssen.
§ 14-Erklärung als Seite: Generiert automatisch /erklaerung-zur-barrierefreiheit als WordPress-Seite mit aktuellem Konformitätsstand und MLBF-Kontaktdaten.
Cookie-Banner-Kompatibilität: Erkennt Borlabs, Real Cookie Banner, Complianz, OneTrust automatisch und stellt die korrekte Ladereihenfolge sicher.
WooCommerce-Hook: Prüft Produktseiten nach Image-Alt-Text, Tabellen-Header und Checkout-Form-Labels.
Gutenberg-Lint: Hinweise direkt im Block-Editor, wenn Sie einen Block einfügen, der bekannte WCAG-Verstöße enthält (z.B. Image-Block ohne Alt-Text).

Getestete Themes & Builder

Vollständig kompatibel mit den Standard-Themes Twenty Twenty-Four, Twenty Twenty-Three sowie den verbreitetsten Premium-Themes Astra, GeneratePress, Kadence, Blocksy. Auch Page-Builder Elementor (Pro), Bricks, Beaver Builder, Divi und Oxygen werden erkannt und in den Scan einbezogen. WooCommerce 8.x und 9.x sind explizit getestet.

Performance & Datenschutz

Das Plugin lädt sich asynchron und beeinflusst Core Web Vitals (LCP, CLS, INP) messbar nicht. Die wöchentlichen Scans laufen serverseitig auf den BFSGuard-Servern in Frankfurt; auf Ihrer WordPress-Installation läuft nur ein leichter REST-Endpunkt zum Empfangen der Scan-Ergebnisse. Verarbeitete Daten: ausschließlich öffentlich verfügbare URLs und HTML-Quelltext — keine Nutzer- oder Bestelldaten. Auftragsverarbeitungsvertrag (Art. 28 DSGVO) auf Anfrage über datenschutz@bfsguard.de.

Häufige Fragen

Brauche ich den Plan ab Starter (19,99 €) oder geht auch Free?

Die manuelle Plugin-Installation funktioniert auch im Free-Plan (max. 1 Website, monatlicher Scan). Erst der Starter-Plan schaltet Wochen-Scans, § 14-Erklärung und MLBF-Kontrollpaket frei.

Was, wenn ich kein WordPress, sondern Webflow oder Wix nutze?

Wir haben separate Anleitungen unter /webflow-installation und /wix-installation. Das Widget ist eine reine JS-Datei und in jeder CMS-Umgebung einsetzbar.

Wie groß ist die Plugin-ZIP-Datei?

Aktuell 48 KB. Es werden keine Bilder, Fonts oder Build-Artefakte mitgeliefert — nur PHP-Klassen plus eine JSON-Konfigurationsdatei.

Für Entwicklerteams: Barrierefreiheit als Build-Gate

Jeder Pull Request wird geprüft. Verschlechterungen fallen auf, bevor sie live gehen — nicht erst bei der Abmahnung.

GitHub Actions

name: Barrierefreiheit
on: [pull_request]

permissions:
  contents: read
  security-events: write   # damit Befunde im PR erscheinen

jobs:
  bfsg:
    runs-on: ubuntu-latest
    steps:
      - uses: bfsguard/accessibility-action@v1
        with:
          url: https://staging.example.de
          api-key: ${{ secrets.BFSGUARD_API_KEY }}
          max-pages: 25
          max-serious: 0

Jede andere Pipeline (GitLab, Jenkins, Bitbucket, lokal)

Eine Datei, keine Abhängigkeiten, Node ab Version 18:

curl -sO https://bfsguard.de/ci/bfsguard-ci.js

export BFSGUARD_API_KEY=...
node bfsguard-ci.js --url https://staging.example.de --max-pages 25 --max-serious 0

Befunde direkt im Pull Request

Ausgabe als SARIF — GitHub Code Scanning zeigt jeden Verstoß mit betroffener Seite und Beispiel-Element an.

Erst beobachten, dann blockieren

Mit warn-only starten, Ist-Zustand einfrieren, Schwellen schrittweise senken. So blockiert das Gate nur Verschlechterungen.

Klare Exit-Codes

0 bestanden · 1 Schwelle überschritten · 2 Fehler. Ein Netzproblem sieht nicht aus wie ein Barrierefreiheits-Problem.

Was ein grünes Gate bedeutet — und was nicht. Automatisierte Tests decken nur einen Teil der WCAG-Kriterien ab. Alternativtexte, Fokusreihenfolge und Verständlichkeit erfordern eine manuelle Prüfung. „Bestanden" heißt: keine automatisch erkennbaren Verstöße. Es heißt nicht „barrierefrei" und nicht „BFSG-konform". Deshalb ist der Score auf 95/100 gedeckelt.

Vollständige Dokumentation →