navable Widget für WordPress installieren: Schritt für Schritt

Das navable WordPress-Plugin bindet das Widget über einen externen Dienst in Deine Website ein. Dafür brauchst Du neben dem Plugin ein navable-Konto und eine registrierte Domain. Diese Anleitung zeigt Dir die Einrichtung und wie Du anschließend prüfst, ob das Widget auf Deiner Seite lädt.

Die Installation allein belegt keine WCAG-Konformität. Plane auch Tests Deiner Inhalte, Formulare und Navigation ein. Einen Überblick über die Anforderungen und Prüfwege findest Du im WCAG-Hub.

Vor der Installation

Du brauchst Zugriff auf die Plugin-Verwaltung Deiner WordPress-Website. Prüfe auf der offiziellen Plugin-Seite die Anforderungen und Hinweise zur Kompatibilität mit Deiner WordPress-Version. Richte Änderungen nach Möglichkeit zuerst auf einer Testkopie Deiner Website ein.

Für die Registrierung Deiner Domain folgst Du dem navable-Onboarding. Die aktuellen Angebote findest Du unter Preise. Eine sichtbare Option im WordPress-Plugin bedeutet noch nicht, dass die zugehörige Funktion für Deine Domain freigeschaltet ist.

1. Plugin installieren und aktivieren

1. Melde Dich in Deinem WordPress-Dashboard an.
2. Öffne Plugins → Installieren und suche nach navable Accessibility Widget.
3. Klicke auf Jetzt installieren und anschließend auf Aktivieren.

Die Abbildungen stammen aus der bisherigen Anleitung und zeigen die deutsche Oberfläche. Beschriftungen können je nach WordPress- und Plugin-Version abweichen. Die allgemeinen Installationswege beschreibt auch die WordPress-Dokumentation zur Plugin-Verwaltung.

2. Widget einschalten und Einstellungen speichern

Öffne Einstellungen → navable Widget.

Setze den Haken bei Aktiviere das navable Widget auf allen Seiten. Wähle die gewünschten Optionen und klicke unten auf Einstellungen speichern.

Das Plugin übergibt Deine Auswahl an den Widget-Dienst. Im veröffentlichten Plugin-Quellcode sind beispielsweise Optionen für Tastaturnavigation und Kontrast als Konfigurationswerte hinterlegt. Daraus lässt sich noch nicht ableiten, welche Änderungen der Dienst auf Deiner konkreten Seite ausführt. Prüfe jede verwendete Einstellung auf Deiner Website.

Bei Beschriftungen, Fokusreihenfolge und Kontrast solltest Du Fehler auch direkt in Inhalten, Theme oder Komponenten beheben. Die W3C-Erläuterung zur Fokusreihenfolge beschreibt, warum die Reihenfolge beim Durchtabben Sinn und Bedienbarkeit erhalten muss. Zusätzliche Tab-Indizes sind dafür keine pauschale Lösung.

3. Domain registrieren und Website öffnen

Registriere Deine Website im navable-Dashboard und schließe die dort angezeigten Schritte zur Domain-Verifizierung ab. Vergleiche die hinterlegte Domain mit der Adresse, unter der Du die Website tatsächlich öffnest. Prüfe eine Testdomain separat, bevor Du dort dieselbe Freischaltung erwartest.

Öffne anschließend eine öffentliche Seite Deiner Website. Kontrolliere auch eine Unterseite und eine Seite mit Formular. Prüfe, ob das Widget lädt und ob Deine gewählten Einstellungen dort wie beabsichtigt wirken.

Wenn das Widget nicht erscheint

Gehe die Einbindung in dieser Reihenfolge durch:

• Plugin und Widget-Schalter: Ist das Plugin aktiviert und der Haken zur Anzeige gespeichert? Der Plugin-Code gibt das Widget-Script erst aus, wenn der gespeicherte Schalter aktiv ist.
• Einbindung im Seitenquelltext: Suche nach navable-widget-embed-script. Fehlt der Eintrag, prüfe die gespeicherte Einstellung und ob Dein Theme den WordPress-Hook wp_footer aufruft. An diesen Hook hängt das Plugin seine Ausgabe.
• Laden des externen Scripts: Ist der Eintrag vorhanden, prüfe in den Browser-Entwicklerwerkzeugen unter „Netzwerk“, ob der Aufruf von https://api.navable.io/widget/v1/accessibility erfolgreich ist. Notiere einen Fehlerstatus für den Support. Prüfe auch, ob eine Sicherheits- oder Consent-Einstellung das Script blockiert.
• Domain und Freischaltung: Kontrolliere die Domain im navable-Dashboard. Ein vorhandenes Script-Element bestätigt die Einbindung durch WordPress, aber noch nicht, dass der Dienst die gewünschte Funktion bereitstellt.

Wenn Du Unterstützung brauchst, gib die betroffene URL, Deine WordPress- und Plugin-Version sowie den beobachteten Fehler an. Entferne Zugangsdaten und persönliche Daten aus Screenshots oder Netzwerkprotokollen.

Nach der Einrichtung die Nutzung prüfen

Vergleiche die Seite mit ein- und ausgeschaltetem Widget. Öffne das Menü, fülle ein Formular aus und löse einen Fehler aus. Prüfe mit der Tastatur, ob Du alle benötigten Bedienelemente erreichst, den Fokus erkennst und Dialoge wieder verlassen kannst. Kontrolliere auch die Zustände, die erst nach einer Interaktion erscheinen.

Prüfe Text und Hintergrund zusammen, wenn Du Farben änderst. Die W3C-Erläuterung zum Textkontrast beschreibt Anforderungen und Ausnahmen. Ein aktivierter Kontrast-Schalter ersetzt diese Prüfung auf der betroffenen Seite nicht.

Für maschinell prüfbare Befunde kannst Du ergänzend den navable Audit nutzen. Halte fest, welche Seiten und Zustände Du geprüft hast und welche manuell zu bewertenden Fragen offenbleiben.