Barrierefreiheit
Das Barrierefreiheits-Widget von Entrydeck: 17 Module in vier Gruppen, Einbindung per Script-Tag auf jeder Website, Sprungziele, Tastenkürzel, ohne Cookies und ohne Tracking — Unterstützung für BFSG und WCAG.
Stand: 23.09.2026
Auf dieser Seite
Das Barrierefreiheits-Widget lässt Besucher eine Website an ihre Bedürfnisse anpassen: Schriftgröße, Zeilenhöhe, Kontraste, Leselinie, Bilder ausblenden, Sprungziele. Es ist in jedem Entrydeck-Paket enthalten, wird je Website unter Barrierefreiheit konfiguriert und lässt sich per Script-Tag auch auf Websites einbinden, die nicht mit Entrydeck laufen. Auf der Produktseite steht die Kurzfassung.
Warum
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG): Viele Websites und Online-Shops, die Verbraucherverträge anbahnen, müssen barrierefrei sein. Das Widget ersetzt keine barrierefreie Gestaltung (semantisches HTML, Kontraste, Tastaturbedienung bleiben Aufgabe des Frontends), ergänzt sie aber um Anpassungen, die Besucher selbst wählen — orientiert an den Erfolgskriterien der WCAG 2.2: Textgröße und -abstand (1.4.4, 1.4.12), Kontrast (1.4.3, 1.4.6), Bewegung (2.2.2, 2.3.3), Blöcke überspringen (2.4.1), Fokus (2.4.7).
Einbindung
Websites, die Entrydeck rendert, binden das Skript automatisch ein, sobald das Widget aktiv ist. Für alle anderen Systeme genügt ein Tag vor </body>:
<script src="https://entrydeck.app/api/a11y/embed.js?site=SITE_ID" defer></script>Die Konfiguration steckt direkt im Skript — eine Anfrage statt zwei, mit ETag und fünf Minuten Cache. Ist das Widget für die Site abgeschaltet, liefert die Adresse ein leeres, harmloses Skript: kein 404 in der Konsole. Die Konfiguration allein gibt es unter /api/a11y/config?site=SITE_ID (JSON, CORS offen).
Module
Das Panel zeigt Kacheln in vier Gruppen. Jedes Modul lässt sich je Website ein- oder ausschalten; ausgeschaltete Module sind für Besucher unsichtbar.
| Gruppe | Module |
|---|---|
| Inhaltsmodule | Schriftgröße (7 Stufen), Zeilenhöhe (3), Lesbare Schriftart, Großer Cursor, Buchstabenabstand (3), Ausrichten, Schriftstärke |
| Farbmodule | Heller Kontrast, Hoher Kontrast, Monochrom |
| Orientierungsmodule | Leselinie, Lese-Maske, Bilder ausblenden, Inhalt hervorheben, Animationen stoppen, Links hervorheben |
| Navigation | Zum Inhalt springen (Landmarken, Überschriften, eigene Sprungziele) |
Die Schriftgröße skaliert jedes Textelement ausgehend von seiner eigenen Größe — Überschriften bleiben Überschriften. „Lesbare Schriftart" ersetzt die Schrift durch eine serifenlose Systemschrift; es werden keine Schriften nachgeladen. „Animationen stoppen" schaltet Übergänge ab und hält Videos an.
Sprungziele
„Zum Inhalt springen" listet automatisch die Landmarken der Seite (Hauptinhalt, Navigation, Fußbereich) und alle Überschriften. Eigene Sprungziele — das Kontaktformular, die Preisliste — ergänzen Sie mit Beschriftung und CSS-Selektor (#kontakt, form.contact). Fehlt das Element auf einer Seite, wird der Eintrag dort nicht angezeigt.
Erscheinungsbild
Position (vier Ecken), Auslöser als Symbol oder Pille, Akzentfarbe, helles oder dunkles Thema oder automatisch nach System, Beschriftung je Sprache. Das Panel behält seine Größe, auch wenn ein Besucher die Schrift der Website vergrößert. Die Zeile „Unterstützt durch Entrydeck" lässt sich abschalten.
Mehrsprachig
Das Skript bringt vollständige Oberflächentexte für Deutsch und Englisch mit und wählt nach der Seitensprache (html lang). Für andere Sprachen greift die eingestellte Standardsprache; die Beschriftung des Auslösers lässt sich je Sprache pflegen (auch FR, IT, ES vorbelegt).
Tastatur
| Tasten | Wirkung |
|---|---|
Alt + Umschalt + A |
Panel öffnen bzw. schließen; holt eine ausgeblendete Symbolleiste zurück |
Tab / Umschalt + Tab |
im Panel zwischen Kacheln wechseln (Fokus bleibt im Panel) |
Esc |
Panel schließen |
Der Auslöser ist ein echter <button> mit aria-label; das Panel ist ein dialog mit Fokusfalle. Alle Kacheln sind per Tastatur bedienbar und melden ihren Zustand über aria-pressed.
Datenschutz
Alle Einstellungen bleiben im Browser des Besuchers (localStorage) — ohne Cookies, ohne Tracking, ohne Anfrage an einen Dritten. Das Skript wird von unserem Server in Deutschland ausgeliefert und lädt nichts nach. Blendet ein Besucher die Symbolleiste aus, gilt das nur für die Sitzung.
Vorschau im Admin
Die Live-Vorschau lädt das echte Skript auf einer Beispielseite. Was dort funktioniert, funktioniert auch auf der Website — auch vor dem Speichern. Weniger Kacheln machen das Panel übersichtlicher: Nicht jede Website braucht alle Module.