Übersicht
Dieser umfassende Leitfaden führt Sie durch die Integration der Zugänglichkeitsplattform Accesstive in Ihre mit Contentful betriebene Website. Accesstive hilft Ihnen, Ihre Website durch KI-gestützte Tools und Überwachung inklusiver und konformer mit den Zugänglichkeitsstandards zu machen.
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
Dies ist die gängigste Methode zur Integration von Accesstive in Contentful-basierte Websites und funktioniert mit jedem Front-End-Framework (React, Next.js, Vue usw.).
Schritt-für-Schritt-Anleitung:
- Zugriff auf Ihre Front-End-Codebasis: Öffnen Sie Ihre Projektdateien, die mit der Contentful-Inhaltsbereitstellung verbunden sind.
- Suchen Sie Ihre Layout- oder Vorlagendatei: Suchen Sie die Haupt-HTML-Vorlagendatei (z. B. index.html, _document.js oder die Layout-Datei in Ihrem Framework).
- Fügen Sie das Skript-Snippet hinzu: 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>- Änderungen speichern: Bestätigen oder speichern Sie die Änderungen in Ihrem Code-Editor.
- Bereitstellen: Übertragen Sie Ihre Änderungen auf Ihre Hosting-Plattform (z. B. Vercel, Netlify, AWS).
Profi-Tipp
Das Skript wird asynchron geladen, so dass es die Ladegeschwindigkeit und Leistung Ihrer Website nicht beeinträchtigt.
Accesstive-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
Das Widget wird nicht angezeigt
- Überprüfen Sie, ob der Code vor dem schließenden </body>-Tag platziert wurde.
- Überprüfen Sie, ob der Code in Ihrem bereitgestellten Build enthalten ist.
- Stellen Sie sicher, dass Ihre Website nach dem Hinzufügen des Codes neu bereitgestellt wurde.
- Löschen Sie Ihren Browser-Cache und laden Sie die Seite neu.
Probleme beim Laden von Skripten
- Ü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.