Widget einbinden

So bringen Sie das Widget auf Ihre Website.

Schritt 1: Website anlegen

Unter Websites die Website mit Namen und Adresse anlegen. Das Dashboard legt dabei einen Token an und erlaubt die Adresse der Website, zum Beispiel https://www.beispiel.de.

Schritt 2: Weitere Adressen erlauben (falls nötig)

Läuft Ihre Website auch unter anderen Adressen, zum Beispiel mit und ohne „www.“ oder auf einem Testsystem, tragen Sie diese unter Sicherheit ein. Auf allen anderen Adressen lehnt der Server das Widget ab.

Schritt 3: Code einfügen

Den Einbindungscode aus dem Bereich Einbindung auf jeder Seite Ihrer Website einfügen, am besten vor </body>:

<script src="https://a11y.pocket-rocket.io/widget.js?token=IHR_TOKEN" defer></script>

In vielen Redaktionssystemen gibt es dafür ein Feld für eigenen Code im Seitenende. Für WordPress gibt es ein Plugin, für Websites mit React, Vue, Nuxt oder Next.js ein npm-Paket.

widget.js ist ein kleiner Lader. Er holt das eigentliche Widget erst, wenn Ihre Seite fertig geladen ist, damit es Ihre Seite nicht bremst. Hat jemand schon Einstellungen gewählt, etwa eine Sprache oder größere Schrift, lädt das Widget sofort. Ein Klick auf einen eigenen Auslöser oder Strg+Umschalt+A vor diesem Zeitpunkt lädt es ebenfalls sofort und öffnet es.

Browser behalten den Lader fünf Minuten im Cache, das Widget selbst dauerhaft, bis es eine neue Version gibt. Nach einem Update haben Ihre Besucher die neue Version also spätestens nach fünf Minuten.

Schritt 4: Prüfen

Öffnen Sie Ihre Website: Das Widget erscheint als schwebender Knopf. In der Übersicht der Website steht danach, wann das Widget zuletzt geladen wurde. Enthält Ihr Paket nur das Produkt Übersetzung, ist der Knopf ein Globus und öffnet direkt die Sprachliste.

Eigener Button

Jedes Element mit dem Attribut data-rocket-a11y-trigger öffnet und schließt das Widget und bekommt aria-expanded:

<button type="button" data-rocket-a11y-trigger>Barrierefreiheit</button>

Soll nur Ihr eigener Button erscheinen, stellen Sie unter Design beim Widget-Button einen eigenen Auslöser ein. Mit der Tastatur öffnet Strg + Umschalt + A das Widget.

Ein Link mit der Adresse #pocket-rocket-a11y-dgs oder ein Element mit data-rocket-a11y-dgs öffnet direkt die Videos in Gebärdensprache und die Texte in Leichter Sprache, siehe Gebärdensprache.

Wenn das Widget nicht erscheint

• Adresse nicht erlaubt: Unter Sicherheit stehen die Adressen, auf denen das Widget zuletzt abgelehnt wurde. Mit Erlauben tragen Sie eine davon ein. Achten Sie auf die genaue Schreibweise: www.beispiel.de und beispiel.de sind zwei Adressen, http:// und https:// ebenfalls.
• Token falsch: Prüfen Sie, ob der Code genau so auf der Seite steht wie unter Einbindung.
• Für Fachleute: In den Entwicklerwerkzeugen des Browsers (Netzwerk) antwortet widget.js mit 401, wenn der Token nicht stimmt, und mit 403, wenn die Adresse nicht erlaubt ist. In der Konsole schreibt das Widget, warum es nicht startet, mit dem Präfix [A11Y Widget].

Wenn das Widget langsam lädt

• Mit Vorübersetzen liegen Übersetzungen schon bereit, bevor Besucher eine Sprache wählen.
• Übersetzungen, die ein Browser schon einmal geladen hat, merkt sich das Widget dort. Wer wieder auf dieselbe Seite kommt, sieht die Übersetzung sofort, ohne Anfrage an den Server.
• Weniger eingeschaltete Features machen das Panel des Widgets schlanker.