Integration

Barrierefreiheits-Widget in Squarespace einbinden.

Über die globale Code Injection zentral einbinden. Die Lesehilfen ergänzen deine Arbeit an einer zugänglichen Website.

Anleitung geprüft am

Das brauchst du

Ein Squarespace-Tarif mit JavaScript und globaler Code Injection. Die Verfügbarkeit hängt von deinem Tarif ab. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.

Schritt für Schritt

  1. Öffne in den Website-Einstellungen den Bereich Code Injection.
  2. Füge den Accessonaut-Einbaucode in das globale Footer-Feld ein.
  3. Speichere die Änderung und öffne die öffentliche Website außerhalb des Editors.
  4. Prüfe mehrere Unterseiten, mobile Ansichten und Seitenwechsel. Entferne gegebenenfalls einen älteren doppelten Einbau.

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

Ein einzelner Code-Block deckt nicht automatisch die gesamte Website ab. Geschützte Bereiche und Checkout-Seiten können Code Injection beschränken. Prüfe den tatsächlich erreichbaren Umfang.

Häufige Fragen zu Squarespace

Welche Tarife enthalten Code Injection?

Laut Squarespace gehört Code Injection zu den Tarifen Core, Plus und Advanced sowie zu einigen älteren Tarifen wie Business. Fehlt der Bereich bei dir, prüfe deinen Tarif.

Wo finde ich Code Injection in Version 7.0 und 7.1?

In Version 7.1 öffnest du das Seiten-Panel und unten Custom Code → Code Injection. In Version 7.0 liegt der Bereich unter Website Tools. Der Footer-Bereich wird auf jeder Seite vor dem schließenden body-Tag ausgegeben.

Erscheint das Widget im Checkout?

Nein. Squarespace erlaubt auf Checkout-Seiten keinen eigenen Code. Nur Bestellbestätigung und Bestellstatus haben eigene Felder. Prüfe deinen Checkout deshalb gesondert mit der Tastatur.

Was hat Ajax-Laden mit dem Widget zu tun?

Einige Vorlagen der Version 7.0, etwa Brine, Farro, Tremont oder York, laden Seiten per Ajax. Squarespace weist darauf hin, dass das mit eigenem Code kollidieren kann. Version 7.1 hat kein Ajax-Laden. Verhält sich das Widget bei Seitenwechseln seltsam, schalte unter Site Styles „Enable Ajax loading“ aus.

Wenn etwas nicht klappt

Im Editor fehlt das Widget, auf der Live-Seite ist es da.

Ursache: Die Scripts in der Editor-Vorschau sind deaktiviert, etwa über „Disable Scripts in Preview“ oder /safe in der Editor-Adresse.

Lösung: Wähle „Enable Scripts in Preview“. Besuchende sind davon nicht betroffen.

Das Widget zeigt das Standarddesign mit Accessonaut-Hinweis.

Ursache: Du testest auf der squarespace.com-Adresse statt auf deiner eigenen Domain. Dort lädt das Widget deine Projektkonfiguration nicht.

Lösung: Prüfe die Website auf der Domain, die im Accessonaut-Projekt steht.

Du willst das Widget entfernen.

Ursache: Der Code bleibt im Footer-Feld aktiv.

Lösung: Lösche ihn in Code Injection und speichere. Entferne auch Code-Blöcke mit dem Einbaucode auf einzelnen Seiten.

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.

Offizielle Plattform­dokumentation

Squarespace: Code Injection

Praxiswissen für deine nächsten Schritte

Alle Artikel im Wissensbereich