Zum Inhalt springen
Pocket Rocket A11yPocket Rocket A11y
Pocket Rocket A11yPocket Rocket A11y
Zum DashboardEinführung

Erste Schritte

Websites und ÜbersichtEinbindungWidget einbindenWordPressJavaScript und npm

Widget

FeaturesDesignSprachen

Barrierefreiheit

AuditErklärungGebärdenspracheMeldungenStatistik

Erweitert

KI-KonfigurationVorübersetzenSicherheitAPI

Verwaltung

ÜbersetzungenWidget-TexteTeam und KontoPakete und NutzungProfil und AnmeldungKonto und TeamDatenschutz

WordPress

Das Widget mit dem WordPress-Plugin einbinden

Das Plugin Pocket Rocket A11y lädt das Widget auf jeder Seite einer WordPress-Website. Mit einem Verbindungsschlüssel stellen Sie Funktionen, Design und Sprachen des Widgets direkt in WordPress ein und prüfen die Website mit einem Audit. Sie bekommen das Plugin als Zip-Datei von Pocket Rocket. Es braucht WordPress 6.3 oder neuer und PHP 7.4 oder neuer.

Installieren

  1. Im WordPress-Backend unter Plugins → Installieren → Plugin hochladen die Zip-Datei hochladen und aktivieren.
  2. Im Dashboard unter Einbindung den Token der Website kopieren. Hat die WordPress-Website eine andere Adresse als die Website im Dashboard, tragen Sie diese Adresse unter Sicherheit ein.
  3. In WordPress im Menü Pocket Rocket A11y → Verbindung den Token einfügen und speichern.
  4. Verbindung testen drücken.
  5. Optional: Im Dashboard unter API einen Verbindungsschlüssel mit den Rechten „Einstellungen“ und „Audit“ erstellen, in WordPress auf der Seite Verbindung einfügen und speichern.

Verbindung

Das Plugin hat einen eigenen Eintrag im Menü links mit den Seiten Verbindung, Funktionen, Design, Sprachen und Audit.

FeldBedeutung
WidgetWidget auf der Website laden; ausgeschaltet bleiben Token und Server gespeichert
Widget-Tokender Token aus dem Bereich Einbindung; er ist öffentlich und steht im Quelltext der Seite
Serverhttps://a11y.pocket-rocket.io, nur bei einem eigenen Server ändern
Verbindungsschlüsseloptional, für die Seiten Funktionen, Design, Sprachen und Audit; nach dem Speichern zeigt WordPress nur noch seinen Anfang

Das Plugin bindet das Widget mit defer am Ende der Seite ein, im Backend lädt es nichts.

Der Verbindungsschlüssel braucht im Paket des Kontos das Modul Integrationen, für die Seite Audit zusätzlich Audit. Fehlt es, bindet das Plugin das Widget weiter ein, nur die Seiten Funktionen, Design, Sprachen und Audit melden einen Fehler.

Verbindung testen

Der Test fragt den Server mit der Adresse der WordPress-Website als Absender, genauso wie später der Browser eines Besuchers. Mögliche Antworten:

AntwortWas zu tun ist
Verbundennichts, das Widget läuft
Token wurde nicht gefundenden Token erneut aus dem Bereich Einbindung kopieren
nicht als Domain freigegebendie angezeigte Adresse unter Sicherheit eintragen
nicht erreichbardie Server-Adresse prüfen; blockiert eine Firewall des Hosters ausgehende Verbindungen?
Verbindungsschlüssel gültignichts; die Antwort nennt die Website und die Rechte des Schlüssels
Verbindungsschlüssel ungültigder Schlüssel wurde widerrufen oder falsch kopiert: unter API einen neuen erstellen

Paket

Mit gespeichertem Verbindungsschlüssel liest das Plugin das Paket des Kontos und zeigt nur, was darin enthalten ist:

Im Paketim Plugin
immerSeiten Verbindung und Design
BarrierefreiheitSeite Funktionen
ÜbersetzungSeite Sprachen und der Schalter Übersetzung unter Funktionen
Modul KILeichte Sprache und Wörterbuch unter Funktionen
Modul Audit (mit Barrierefreiheit)Seite Audit
Sprachen je WebsiteSprachen zeigt die Grenze und lässt nicht mehr einschalten; Deutsch zählt nicht

Auf der Seite Verbindung zeigt der Kasten Paket Name, Produkte, das Ende einer Testphase und die Seiten im Paket; der Verbindungstest nennt das Paket ebenfalls. Bei einem Paket nur mit Übersetzung deckt der Textvorschlag für die Datenschutzerklärung nur die Übersetzung ab und der Button des Shortcodes heißt „Sprache“.

Das Plugin fragt das Paket alle 12 Stunden ab, beim Verbindungstest und bei jedem Speichern sofort. Ändern Sie das Paket im Dashboard, zeigt WordPress das spätestens nach 12 Stunden. Ruft jemand eine Seite auf, die nicht im Paket ist, erscheint ein Hinweis statt eines Fehlers. Ohne Verbindungsschlüssel kennt das Plugin das Paket nicht und zeigt alle Seiten.

Funktionen, Design und Sprachen

Mit gespeichertem Verbindungsschlüssel zeigen diese Seiten die aktuellen Einstellungen der Website im Dashboard. Speichern ändert sie dort; Besucher sehen die Änderung auf der nächsten Seite, die sie öffnen.

SeiteWas Sie einstellen
Funktionenjede Funktion an oder aus, je Kategorie auch alle auf einmal; Suchfeld, Symbole, Einstellungen der Besucher merken
DesignWidget-Button oder eigener Auslöser, Farben des Buttons, Position, Größen und die acht Farben des Widgets; eine Vorschau zeigt Änderungen schon vor dem Speichern
Sprachendie Sprachen, in die das Widget übersetzt, und die Flagge, die es neben jeder Sprache zeigt, mit Vorschau

Funktionen, die eine KI brauchen (Leichte Sprache, Wörterbuch), erscheinen erst, wenn sie im Dashboard eingerichtet ist. Haben Sie im Dashboard eigene Abschnitte angelegt, bleiben sie: Eine in WordPress eingeschaltete Funktion kommt in den ersten Abschnitt, eine ausgeschaltete verschwindet aus ihrem Abschnitt. Abschnitte, Reihenfolge, Favoriten, Symbole und alles Weitere stellen Sie im Dashboard ein.

Der Verbindungsschlüssel bleibt auf dem WordPress-Server und erscheint nie im Quelltext der Seiten. Nur Administratoren sehen die Seiten. Wird ein Schlüssel nicht mehr gebraucht, widerrufen Sie ihn im Dashboard unter API.

Audit

Mit einem Verbindungsschlüssel mit dem Recht „Audit“ prüft die Seite Audit die Website wie der Audit im Dashboard. Der Audit läuft auf dem Server von Pocket Rocket, Sie können die Seite währenddessen verlassen.

BereichInhalt
Neuer AuditZahl der Seiten (vorbelegt mit dem Seitenlimit aus dem Zeitplan im Dashboard) und optional eine Startadresse, die zur Website gehören muss
Audit läuftgeprüfte Seiten mit Fortschrittsbalken, alle paar Sekunden aktualisiert; „Audit abbrechen“ beendet den Lauf. Danach zeigt die Seite von selbst das Ergebnis
ErgebnisPunktzahl, Vergleich mit dem vorherigen Audit, geprüfte Seiten, Probleme, betroffene Elemente und Probleme je Schweregrad
Problemenach Schweregrad, aufklappbar mit Beschreibung, betroffenen Seiten und Link zur Regel bei Deque
SeitenPunktzahl und Zahl der Probleme je Seite, die niedrigste Punktzahl zuerst
Verlaufdie letzten 20 Audits; ein Klick zeigt das Ergebnis eines älteren Audits

Die Texte zu den Problemen kommen auf Deutsch vom Server, auch wenn WordPress auf Englisch eingestellt ist.

PDF-Bericht

PDF-Bericht öffnet den Bericht zum angezeigten Audit in einem neuen Tab, ohne Anmeldung im Dashboard. Dort speichert „Als PDF speichern oder drucken“ ihn als PDF. Deckblatt, Einleitung, Kontakt und Hinweis kommen aus den Berichtsangaben des Inhabers des Kontos im Dashboard, „Erstellt für“ aus der Website.

Der Link gilt eine Stunde und nur für diesen Audit. Sein Schlüssel steht hinter # in der Adresse; diesen Teil schickt der Browser nicht an den Server, er landet also in keinem Server-Log. Für einen neuen Link drücken Sie in WordPress noch einmal PDF-Bericht.

Andere Übersetzungs-Plugins

Ist Weglot, GTranslate, TranslatePress, WPML oder Polylang aktiv, zeigt die Seite Sprachen oben einen Kasten mit dem gefundenen Plugin und seinen Sprachen. Die anderen Seiten des Plugins weisen mit einem Hinweis darauf hin.

  • Zusammenarbeit: Solange das andere Plugin aktiv ist, zeigt das Widget dessen Sprachen zuerst und übergibt sie daran; Besucher bekommen keine zwei Übersetzungen. Alle anderen Sprachen übersetzt das Widget. Mehr unter Andere Übersetzungswerkzeuge.
  • Sprachen übernehmen: Der Button schaltet die Sprachen des anderen Plugins im Widget ein, zusätzlich zu den schon eingeschalteten. Dafür braucht es den Verbindungsschlüssel mit dem Recht „Einstellungen“.
  • Ersetzen: Die Anleitung im Kasten führt durch den Wechsel: Sprachen übernehmen, Sprachumschalter entfernen, die übersetzten Adressen wie /en/ dauerhaft auf die Originalseiten umleiten (mit einer fertigen Zeile für die .htaccess), das Plugin löschen, den Cache leeren und ein Abo kündigen.

Sprachumschalter

Der Shortcode [pocket_rocket_a11y_switcher] setzt einen Sprachumschalter wie in WPML: Flagge und Name der aktuellen Sprache mit einem kleinen Pfeil, zum Beispiel „Deutsch ▾“. Ein Klick öffnet direkt darunter eine Liste mit der Sprache der Seite und den eingeschalteten Sprachen, je mit Flagge und Namen; die Wahl übersetzt die Seite sofort, ohne das Widget zu öffnen. Flagge und Name wechseln mit („English ▾“). Die Liste lässt sich mit den Pfeiltasten, Pos1, Ende, dem ersten Buchstaben und Escape bedienen und schließt bei einem Klick daneben. Mit einer Widget-Version vor 1.0.3 öffnet der Klick stattdessen die Sprachauswahl des Widgets.

VarianteAnzeige
[pocket_rocket_a11y_switcher]Flagge und Name in der eigenen Sprache
[pocket_rocket_a11y_switcher show="code"]Flagge und Kürzel, zum Beispiel DE
[pocket_rocket_a11y_switcher show="flag"]nur die Flagge; Screenreader hören trotzdem „Sprache wählen, aktuell: Deutsch“
  • Im Menü: einen individuellen Link mit der URL #pocket-rocket-a11y und der CSS-Klasse pocket-rocket-a11y-switcher anlegen (CSS-Klassen unter Design → Menüs in den Ansicht-Optionen einblenden). In Page Buildern wie Oxygen oder Elementor das Shortcode-Element verwenden.
  • Aussehen: Der Umschalter übernimmt Schrift, Farbe und Großschreibung des Menüs und bringt keine eigenen Farben mit. Die Liste ist weiß mit dunkler Schrift; anpassen lässt sie sich im eigenen CSS mit --pr-a11y-menu-bg, --pr-a11y-menu-text, --pr-a11y-menu-border und --pr-a11y-menu-hover. Die Flaggen kommen vom Server und folgen der Wahl unter Flaggen im Widget.
  • Nur Ihr Umschalter: Soll der runde Widget-Button verschwinden, wählen Sie unter Design „Eigener Trigger“.

Eigenes CSS

Auf der Seite Verbindung nimmt das Feld Eigenes CSS Regeln auf, die das Plugin auf jeder Seite lädt, zum Beispiel für den Sprachumschalter (.pocket-rocket-a11y-switcher, .pocket-rocket-a11y-switcher-flag img, .pocket-rocket-a11y-switcher-arrow) oder den Button des Shortcodes (.pocket-rocket-a11y-button). Das Widget-Panel selbst erreicht es nicht; Farben und Größen dort stellen Sie unter Design ein.

:root { --pr-a11y-menu-bg: #1d1d1b; --pr-a11y-menu-text: #ffffff; --pr-a11y-menu-hover: rgba(255, 255, 255, 0.1); }
.pocket-rocket-a11y-switcher { gap: 0.6em; font-weight: 600; }
.pocket-rocket-a11y-switcher-flag img { border-radius: 50%; width: 1.2em; height: 1.2em; }

Eigener Button

  • Shortcode: [pocket_rocket_a11y_button] setzt einen Button „Barrierefreiheit“. Eigener Text und eigene CSS-Klassen: [pocket_rocket_a11y_button label="Hilfen" class="wp-element-button"].
  • Menü: im Menü oder Navigationsblock einen individuellen Link mit der URL #pocket-rocket-a11y anlegen. In klassischen Menüs wirkt auch die CSS-Klasse pocket-rocket-a11y an einem Menüpunkt.
  • Überall: jeder Link und Button mit der Adresse #pocket-rocket-a11y öffnet das Widget.
  • Gebärdensprache: ein Link mit der URL #pocket-rocket-a11y-dgs öffnet die Videos in Gebärdensprache und die Texte in Leichter Sprache, sobald sie unter Gebärdensprache eingerichtet sind.

Solche Links werden zu Buttons mit aria-expanded und lassen sich mit Enter und Leertaste bedienen; die Adresse der Seite ändert sich beim Klick nicht. Soll nur der eigene Button erscheinen, wählen Sie auf der Seite Design in WordPress „Eigener Trigger“ oder stellen im Dashboard unter Design beim Widget-Button einen eigenen Auslöser ein.

Datenschutz

Das Plugin legt unter Einstellungen → Datenschutz → Leitfaden einen Textvorschlag für die Datenschutzerklärung ab. Derselbe Text steht auf der Seite Verbindung im Kasten Datenschutz mit dem Button Text kopieren; er passt zum Paket, bei einem Paket nur mit Übersetzung beschreibt er nur die Übersetzung. Ergänzen Sie die Rechtsgrundlage und entfernen Sie Abschnitte zu Werkzeugen, die Sie nicht mehr nutzen, etwa Weglot. Solange die Datenschutzerklärung Pocket Rocket A11y nicht erwähnt, zeigt das Plugin auf dem Dashboard, der Seite Plugins und seinen eigenen Seiten einen Hinweis; ebenso, wenn keine Datenschutzseite gefunden wird oder die Erklärung nach dem Entfernen noch Weglot nennt. Geprüft wird die unter Einstellungen → Datenschutz festgelegte Seite, ohne sie eine Seite mit der Adresse datenschutz, datenschutzerklaerung oder privacy-policy, auch mit Inhalten aus Page Buildern wie Oxygen oder Elementor. Mehr unter Datenschutz. Das Plugin selbst speichert nur seine Einstellungen und setzt keine Cookies. Funktionen, Design und Sprachen speichert es nicht in WordPress, sondern schickt sie direkt an den Server von Pocket Rocket. Audit-Ergebnisse liegen nur dort; WordPress zeigt sie an, ohne sie zu speichern.

Entfernen

Plugin deaktivieren und löschen: Die Einstellungen werden dabei mit gelöscht, auch der Verbindungsschlüssel. Widerrufen Sie ihn danach im Dashboard unter API.

Widget einbinden

Schritt für Schritt das Widget auf Ihrer Website einbinden

JavaScript und npm

Das Widget per JavaScript steuern und mit dem npm-Paket in React, Vue, Nuxt oder Next.js einbinden

Auf dieser Seite

InstallierenVerbindungVerbindung testenPaketFunktionen, Design und SprachenAuditPDF-BerichtAndere Übersetzungs-PluginsSprachumschalterEigenes CSSEigener ButtonDatenschutzEntfernen