Das brauchst du
TYPO3 14.3 oder 13.4 LTS (PHP 8.2 bis 8.5) oder TYPO3 12.4 mit ELTS (PHP 8.1 bis 8.4) und ein Backend-Konto mit Zugriff auf die Site-Verwaltung. Zum Installieren brauchst du Composer oder, ohne Composer, Zugriff auf das Extension-Modul. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Installiere die Extension
accessonautaus dem Abschnitt „Die TYPO3-Extension“ weiter unten: mit Composer oder ohne Composer über Admin Tools → Extensions → „Upload Extension“. Führe im Composer-Modus danachvendor/bin/typo3 extension:setupaus. - TYPO3 13.4 und 14.3: Öffne Site Management → Sites, bearbeite deine Site und füge unter Sets „Accessonaut Lesehilfen-Widget“ hinzu. Alternativ trägst du
accessonaut/widgetin die Abhängigkeiten des Sets deines Sitepackages ein. - Öffne Site Management → Settings, wähle deine Site und die Kategorie „Accessonaut-Lesehilfen“. Trage die öffentliche Projekt-ID aus der Einbauseite deines Accessonaut-Projekts ein und behalte die Service-Adresse https://accessonaut.com. In TYPO3 12.4 nutzt du stattdessen den Reiter „Accessonaut“ der Site-Konfiguration; er funktioniert in allen Versionen.
- Lies den Hinweis zum externen Dienst, schalte das Widget ein und speichere. Die Änderung gilt ab dem nächsten Seitenaufruf, auch für Seiten aus dem TYPO3-Seitencache. Prüfe danach mehrere öffentliche Seiten in einem privaten Fenster.
Die TYPO3-Extension
Die Extension „Accessonaut reading aids“ (Extension-Key accessonaut, Composer-Paket accessonaut/typo3-accessibility) setzt das Script für dich ein, ohne Template- oder TypoScript-Änderung. Sie läuft mit TYPO3 14.3 und 13.4 LTS sowie 12.4 (nur noch mit ELTS) und ist in jeder Site zunächst ausgeschaltet. Erst wenn du sie einschaltest und eine gültige Projekt-ID einträgst, lädt der Browser etwas vom Dienst. Im Backend erscheint das Widget nie.
accessonaut_1.0.0.zip
SHA-256-Prüfsumme · Lizenz: GPLv2 oder neuer
Die Veröffentlichung auf Packagist und im TYPO3 Extension Repository (TER) ist vorbereitet. Bis dahin installierst du die ZIP-Datei: ohne Composer über Admin Tools → Extensions → „Upload Extension“, mit Composer als lokales Paket:
mkdir -p packages
cp ~/Downloads/accessonaut_1.0.0.zip packages/
composer config repositories.accessonaut artifact ./packages
composer require accessonaut/typo3-accessibility:^1.0
vendor/bin/typo3 extension:setupOhne Extension oder Bundle kannst du den Einbaucode weiterhin selbst einsetzen. Er steht im nächsten Abschnitt; wie es geht, beantworten die häufigen Fragen weiter unten.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Nutze genau eine Einbauart und entferne einen älteren Eintrag in page.footerData oder im Template. Findet die Extension auf einer Seite schon ein Script desselben Dienstes, fügt sie kein zweites hinzu. Statische Seiten-Caches, Proxies und CDNs musst du selbst leeren. Hat jede Site eine eigene Domain, braucht jede ein eigenes Accessonaut-Projekt. Eine aktive Content-Security-Policy im Frontend muss deine Service-Origin erlauben.
Häufige Fragen zu TYPO3
Wie binde ich das Widget ohne Extension ein?
Per TypoScript in deinem Sitepackage: Ergänze dein PAGE-Objekt um einen freien Eintrag, etwa page.footerData.1729 = TEXT, und setze den unveränderten Einbaucode als page.footerData.1729.value. TYPO3 gibt footerData am Ende der Seite aus. Leere danach über das Blitz-Symbol die Frontend-Caches. Installierst du später die Extension, entferne diesen Eintrag.
Wie richte ich mehrere Sites ein?
Die Extension liest ihre Einstellungen pro Site. Schalte das Widget in jeder Site ein, die es zeigen soll. Hat jede Site eine eigene Domain, lege je Domain ein Accessonaut-Projekt an und trage dessen Projekt-ID in der passenden Site ein. Die Sprachen einer Site teilen sich die Einstellungen.
Was ist bei aktiver Frontend-CSP zu tun?
Ist security.frontend.enforceContentSecurityPolicy aktiv, erweitere die Richtlinie der Site in config/sites/<site>/csp.yaml. Ergänze per mutations mit mode: "extend" deine Service-Adresse in den Direktiven script-src und connect-src. Das Widget fügt außerdem style-Elemente ohne Nonce ein. Prüfe deshalb, ob style-src eingebettete Styles zulässt.
Brauche ich für jede Sprache eine eigene Einstellung?
Nein. Mit der Sprache „auto“ folgt das Widget dem lang-Attribut deiner Seite, solange im Projektdesign keine feste Sprache gespeichert ist. Es spricht Deutsch, Englisch und Spanisch. Eine feste Sprache in der Extension gilt für alle Seiten dieser Site und hat Vorrang vor dem Projektdesign.
Wie entferne ich das Widget wieder?
Schalte es in den Site-Einstellungen oder im Reiter „Accessonaut“ aus. Das gilt ab dem nächsten Seitenaufruf. Willst du die Extension ganz entfernen, nutze composer remove accessonaut/typo3-accessibility oder deinstalliere sie im Extension-Modul. Leere danach statische Caches, Proxies und CDNs.
Wenn etwas nicht klappt
Das Script fehlt im Quelltext.
Ursache: Das Widget ist in dieser Site nicht eingeschaltet, die Projekt-ID hat ein ungültiges Format oder die Service-Adresse ist keine HTTPS-Adresse. Bindet die Site das Site Set ein, gelten nur dessen Einstellungen und nicht der Reiter „Accessonaut“.
Lösung: Prüfe Schalter, Projekt-ID (20 bis 40 Kleinbuchstaben und Ziffern) und Service-Adresse in genau der Site, die die Seite ausliefert. Leere statische Caches und CDNs.
Die Browser-Konsole meldet einen CSP-Verstoß.
Ursache: Die Frontend-Richtlinie von TYPO3 erlaubt deine Service-Adresse noch nicht.
Lösung: Ergänze sie in der csp.yaml der Site und leere die Caches.
Ein älterer Einbau wirkt weiter, Änderungen in der Extension greifen nicht.
Ursache: Im Sitepackage steht noch ein Eintrag mit dem Einbaucode, etwa in page.footerData. Die Extension fügt dann kein zweites Script hinzu.
Lösung: Entferne den alten Eintrag und wähle „Flush frontend caches“.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.