Barrierefreiheit

Accessdeck, das Barrierefreiheits-Widget von Entrydeck, lässt Besucher eine Website an ihre Bedürfnisse anpassen: Schriftgröße, Zeilenhöhe, Kontraste, Leselinie, Vorlesen, Lesemodus, Leichte Sprache, 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.

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.

Vorlesen

Liest den Hauptinhalt der Seite mit der Sprachausgabe des Browsers vor (Web Speech API) — ohne Server, ohne Dritte. Hat der Besucher Text markiert, wird nur die Markierung gelesen. Der gerade gelesene Satz bekommt einen Rahmen in der Akzentfarbe und rückt sanft in den sichtbaren Bereich. Im Panel: Start/Pause, Stopp und drei Geschwindigkeiten (0,8×, 1×, 1,2×); Alt + Umschalt + R startet und pausiert. Die Stimme folgt der Seitensprache (html lang), sonst der Sprache des Panels. Fehlt dem Browser eine Sprachausgabe, bleibt die Kachel unsichtbar; beim Verlassen der Seite endet das Vorlesen.

Lesemodus

Zeigt nur den Hauptinhalt (<main>, sonst <article>, sonst die Seite ohne Navigation, Kopf, Fuß und Seitenleisten) in einer ruhigen Ansicht: höchstens 70 Zeichen je Zeile, große Schrift, Bilder bleiben, aber begrenzt. Schriftgröße, Zeilenhöhe, Kontraste, Schriftart und Links hervorheben wirken auch im Lesemodus. Schließen über die Schaltfläche oben oder Esc.

Schrift für Legasthenie

Ersetzt die Schrift durch OpenDyslexic (SIL Open Font License). Die Schriftdateien kommen von unserem Server (/api/a11y/fonts/…, ein Jahr Cache) und werden erst geladen, wenn ein Besucher das Modul einschaltet — es gibt keine Anfrage an Dritte. Dieses Modul und „Lesbare Schriftart" schließen sich gegenseitig aus.

Leichte Sprache

Die Kachel wechselt zur Fassung der Seite in Leichter Sprache. Das Widget findet sie von selbst, wenn die Seite im <head> einen Link <link rel="alternate" hreflang="de-x-leicht" href="…"> oder ein Element mit data-easy-language-href hat. Alternativ hinterlegen Sie im Admin unter Leichte Sprache ein Adressmuster mit {path} als Platzhalter für den aktuellen Pfad, etwa /leicht{path}. Auf der Fassung in Leichter Sprache (html lang="de-x-leicht" oder ein Link mit hreflang="de") heißt die Kachel „Zur Standardsprache". Gibt es weder Link noch Muster, bleibt die Kachel unsichtbar — das Modul ist standardmäßig eingeschaltet und schadet auf Seiten ohne Leichte-Sprache-Fassung nicht.

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

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; einzige Ausnahme ist die Schrift für Legasthenie, die ebenfalls von unserem Server kommt und nur auf Wunsch des Besuchers geladen wird. Das Vorlesen nutzt die Sprachausgabe des Browsers — der Text verlässt das Gerät nicht. 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.