Übersicht
Dieser umfassende Leitfaden führt Sie durch die Integration der Zugänglichkeitsplattform Accesstive in Ihre von Storyblok betriebene Website. Accesstive hilft Ihnen, Ihre Website durch KI-gestützte Tools und Überwachung inklusiver zu machen und die Zugänglichkeitsstandards zu erfüllen.
Was ist Accesstive?
Accesstive ist eine All-in-One-Plattform für Barrierefreiheit, die Websites dabei hilft, inklusiv, konform und benutzerfreundlich zu werden. Sie kombiniert leistungsstarke Tools wie ein Accessibility-Assistent-Widget, KI-basierte Live-Audits, Monitoring und einen intelligenten Assistenten. Accesstive wurde für Unternehmen, Entwickler und Agenturen entwickelt und macht Barrierefreiheit einfach, skalierbar und intelligent.
Wichtigste Merkmale
- Access Assistent: Anpassungen für Screenreader und Tastaturnavigation
- 40+ Funktionen für Barrierefreiheit: Schriftgrößenanpassung, Farbkontrast, Textlupe und mehr
- Access Monitor: Regelmäßige Scans und Analysen
- WCAG-Konformität: Beseitigung gängiger Barrieren für die Barrierefreiheit
- Kundenspezifisches Branding: Vollständig anpassbar an das Design Ihrer Website
- Access AI Audit: Echtzeit-Scan mit KI-Korrekturen per Klick
- Access Accy: KI-gestützter Barrierefreiheits-Chatbot
Installationsmethoden
Die meisten Storyblok-Projekte sind headless und verwenden ein Front-End-Framework wie Next.js, Nuxt.js, Vue oder React. Sie können Accesstive integrieren, indem Sie das Skript zu Ihrer Layoutvorlage hinzufügen.
Schritt-für-Schritt-Anleitung:
- Zugriff auf Ihr Front-End-Projekt
Öffnen Sie Ihre Projektdateien in Ihrem bevorzugten Code-Editor. - Suchen Sie Ihre Hauptlayoutdatei
Suchen Sie die globale Layout-Vorlage (z. B. App.vue, _app.js, default.vue oder index.html), in der globale Skripte geladen werden. - Fügen Sie das Skript-Snippet ein
Fügen Sie den folgenden Codeschnipsel vor dem schließenden </body>-Tag ein:
<script async src="https://cdn.accesstive.com/assistance.js" type="module"></script>- Speichern Sie Ihre Änderungen
Bestätigen oder speichern Sie Ihre Änderungen lokal. - Bereitstellen Ihrer Website
Übertragen Sie den aktualisierten Code an Ihren Hosting-Anbieter (z. B. Vercel, Netlify, AWS).
Profi-Tipp
Das Skript wird asynchron geladen, so dass es die Ladegeschwindigkeit und Leistung Ihrer Website nicht beeinträchtigt.
Zugriffsfähige Konfiguration
Nach der Installation können Sie Ihre Accesstive-Einstellungen über das Accesstive-Dashboard konfigurieren:
- Widget-Anpassung: Anpassung an Ihre Markenfarben und Ihr Styling
- Auswahl der Funktionen: Wählen Sie aus, welche Zugänglichkeitsfunktionen angezeigt werden sollen
- Platzierung: Platzierung und Verhalten des Widgets festlegen
- Analytik: Überwachung der Nutzung und Verbesserung der Zugänglichkeit
Vorschau und Test
Nach der Installation sollten Sie das Accesstive-Widget auf Ihrer Website sehen. Hier erfahren Sie, wie Sie es testen können:
- Sichtbarkeit des Widgets: Suchen Sie nach dem Symbol für Barrierefreiheit (normalerweise in der unteren Ecke)
- Funktionstest: Klicken Sie auf das Widget und probieren Sie verschiedene Zugänglichkeitsoptionen aus.
- Cross-Browser-Tests: Überprüfen Sie die Funktionalität in verschiedenen Browsern
- Mobile Tests: Überprüfung der Widget-Reaktionsfähigkeit auf mobilen Geräten
Fehlersuche bei häufigen Problemen
Widget wird nicht angezeigt
- Überprüfen Sie, ob das Skript der richtigen Layout- oder Vorlagendatei hinzugefügt wurde.
- Stellen Sie sicher, dass die Code-Änderungen erfolgreich implementiert wurden.
- Löschen Sie den Browser-Cache und laden Sie die Seite neu.
Probleme beim Laden des Skripts
- Überprüfen Sie die Browserkonsole auf JavaScript-Fehler
- Überprüfen Sie, ob die Skript-URL korrekt und zugänglich ist.
- Stellen Sie sicher, dass keine anderen Skripte in Konflikt stehen.
Überlegungen zur Leistung
Accesstive ist so konzipiert, dass es leichtgewichtig und leistungsfähig ist:
Metrik | Auswirkung | Einzelheiten |
| Ladezeit | Minimal | Asynchrones Laden verhindert Blockieren |
| Größe der Datei | ~45KB | Komprimiert und optimiert |
| Leistung | < 1% Auswirkung | Basierend auf Google PageSpeed |
Fangen Sie noch heute an
Bereit, Ihre Storyblok-Website barrierefreier zu gestalten? Melden Sie sich noch heute bei Accesstive an und starten Sie eine kostenlose Testversion, um allen Ihren Besuchern ein inklusiveres Web-Erlebnis zu bieten.