Dokumentation
Alles, was Sie über die Implementierung und Nutzung von Accessly wissen müssen
1Erste Schritte
Accessly ist eine umfassende Lösung für Web-Barrierefreiheit, die Ihre Website für alle Benutzer zugänglich macht. Unser Widget bietet benutzerseitige Barrierefreiheitsanpassungen, während unsere professionellen Dienste die WCAG-Konformität sicherstellen.
**Schnellstart:**
- Kontaktieren Sie uns, um Ihren Plan auszuwählen
- Erhalten Sie Ihren eindeutigen Widget-Code
- Fügen Sie den Code zu Ihrer Website hinzu
- Konfigurieren Sie die Einstellungen (optional)
- Ihre Website ist jetzt barrierefreier!
2Installationsanleitung
**Schritt 1: Widget-Code erhalten**
Nach dem Abonnement erhalten Sie einen eindeutigen JavaScript-Code, der so aussieht:
<script src="https://cdn-accessly.mnikolic.work/modular/loader.js" data-api-key="IHR_EINDEUTIGER_SCHLÜSSEL" defer></script>
**Schritt 2: Zu Ihrer Website hinzufügen**
- •WordPress: Fügen Sie es zur footer.php Ihres Themes hinzu oder verwenden Sie ein Plugin wie "Insert Headers and Footers"
- •HTML/Statische Websites: Fügen Sie es vor dem schließenden `</body>`-Tag ein
- •React/Next.js: Fügen Sie es zu Ihrer _document.js oder Layout-Komponente hinzu
- •Andere Plattformen: Kontaktieren Sie uns für spezifische Anweisungen
**Schritt 3: Installation überprüfen**
Nachdem Sie den Code hinzugefügt haben, aktualisieren Sie Ihre Website. Sie sollten das Accessly-Widget-Symbol in der Ecke der Seite sehen.
3Widget-Funktionen
Das Accessly-Widget bietet folgende Barrierefreiheitsfunktionen:
**Visuelle Anpassungen:**
- •Kontrastverbesserung: Hochkontrastmodus für bessere Sichtbarkeit
- •Textgröße: Text vergrößern oder verkleinern
- •Textabstand: Buchstaben- und Zeilenabstand anpassen
- •Schriftoptionen: Lesbare Schriftalternativen
- •Farbanpassungen: Farben invertieren, Graustufen, Monochrom-Modi
- •Cursorgröße: Größerer Cursor für einfacheres Tracking
**Navigationshilfen:**
- •Tastaturnavigation: Vollständige Tastaturunterstützung
- •Fokusindikatoren: Klare visuelle Fokuszustände
- •Skip-Links: Zum Hauptinhalt springen
- •Lesehilfe: Horizontale Linie zur Unterstützung beim Lesen
- •Lesemaske: Aktuellen Lesebereich hervorheben
**Inhaltsanpassungen:**
- •Bildbeschreibungen: Alt-Text-Anzeige
- •Link-Hervorhebung: Alle Links hervorheben
- •Animationen pausieren: Automatisch abspielende Inhalte stoppen
- •Screenreader-Optimierung: Verbesserte Kompatibilität
**Sprache & Lokalisierung:**
- •Mehrsprachige Benutzeroberfläche
- •Unterstützung für Rechts-nach-Links-Text (RTL)
4Konfigurationsoptionen
**Widget-Position**
Das Widget erscheint standardmäßig auf der linken Seite des Bildschirms. Benutzer können:
- •Seite wechseln: Mit dem integrierten Schalter im Widget zwischen linker und rechter Seite wechseln
- •Vertikal verschieben: Drag-and-Drop-Funktionalität ermöglicht es Benutzern, das Widget-Symbol entlang der vertikalen Achse nach oben oder unten zu verschieben
Die Position wird automatisch im Browser des Benutzers gespeichert und bleibt bei wiederholten Besuchen erhalten.
**Farbanpassung**
Business-Plan-Abonnenten können Widget-Farben an ihre Marke anpassen. Kontaktieren Sie uns für weitere Informationen zur Anpassung:
- •Primäre Widget-Farbe
- •Icon-Farbe
- •Panel-Hintergrundfarbe
- •Text- und Akzentfarben
**Oberflächensprache**
Das Widget erkennt automatisch die Website-Sprache und passt die Oberfläche an. Unterstützte Sprachen:
- •Englisch (en)
- •Serbisch (sr)
- •Deutsch (de)
- •Kroatisch (hr)
- •Ungarisch (hu)
Benutzer können die Sprache auch manuell direkt im Widget ändern.
5WCAG-Konformitätsabdeckung
**Was das Widget abdeckt**
Das Accessly-Widget hilft bei der Erfüllung vieler WCAG 2.1 Level AA-Kriterien, einschließlich:
- •1.4.3 Kontrast (Minimum): Kontrastverbesserungstools
- •1.4.4 Textgröße ändern: Textskalierung bis zu 200%
- •1.4.8 Visuelle Darstellung: Textabstand und Formatierung
- •1.4.12 Textabstand: Anpassbare Abstandssteuerungen
- •2.1.1 Tastatur: Vollständige Tastaturnavigationsunterstützung
- •2.4.7 Fokus sichtbar: Verbesserte Fokusindikatoren
**Was zusätzliche Arbeit erfordert**
Das Widget allein garantiert keine vollständige WCAG-Konformität. Sie benötigen auch:
- •Korrekte HTML-Struktur: Semantisches Markup, Überschriftenhierarchie
- •Alt-Text: Beschreibender Text für alle Bilder
- •Formularbeschriftungen: Korrekt beschriftete Formularfelder
- •ARIA-Attribute: Wo für komplexe Komponenten erforderlich
- •Farbunabhängigkeit: Informationen nicht nur durch Farbe vermittelt
- •Video-Untertitel: Untertitel und Transkripte für Multimedia
**Professionelle Audit-Dienste**
Unser Business-Plan umfasst ein professionelles WCAG-Audit zur Identifizierung und Behebung dieser zusätzlichen Anforderungen. Kontaktieren Sie uns für weitere Informationen.
6Fehlerbehebung
**Widget wird nicht angezeigt**
- •Überprüfen Sie, ob das Skript vor dem `</body>`-Tag hinzugefügt wurde
- •Überprüfen Sie die Browser-Konsole auf JavaScript-Fehler
- •Stellen Sie sicher, dass Ihre eindeutige ID korrekt ist
- •Leeren Sie den Browser-Cache und laden Sie neu
- •Überprüfen Sie, ob die Content Security Policy (CSP) das Skript blockiert
**Widget funktioniert nicht richtig**
- •Aktualisieren Sie auf die neueste Widget-Version (automatisch)
- •Überprüfen Sie auf JavaScript-Konflikte mit anderen Plugins
- •Deaktivieren Sie Browser-Erweiterungen vorübergehend
- •Testen Sie im Inkognito-/Privatmodus
**Styling-Konflikte**
- Ihrer Website-URL - Browser und Version - Screenshot des Problems
- •Das Widget verwendet isoliertes CSS, um Konflikte zu vermeiden
- •Wenn Sie Probleme haben, kontaktieren Sie den Support mit:
**Leistungsbedenken**
- •Das Widget ist optimiert und lädt asynchron
- •Typische Ladezeit: <50ms
- •Keine Auswirkungen auf Core Web Vitals
- •Funktionen werden nur bei Verwendung geladen
**Haben Sie immer noch Probleme?**
Kontaktieren Sie unser Support-Team unter support@accessly.net mit:
- •Ihrer Website-URL
- •Beschreibung des Problems
- •Browser- und Geräteinformationen
- •Screenshots oder Bildschirmaufnahmen (falls zutreffend)
7API-Referenz (Erweitert)
**Programmgesteuerte Steuerung**
Für fortgeschrittene Benutzer können Sie das Widget über JavaScript steuern:
```javascript // Widget öffnen window.Accessly.open();
// Widget schließen window.Accessly.close();
// Bestimmte Funktion umschalten window.Accessly.toggle('highContrast');
// Aktuelle Einstellungen abrufen const settings = window.Accessly.getSettings();
// Auf Widget-Ereignisse hören window.addEventListener('accessly:ready', function() { console.log('Accessly-Widget ist bereit'); });
window.addEventListener('accessly:change', function(e) { console.log('Einstellung geändert:', e.detail); }); ```
**Verfügbare Methoden:**
- •`open()` - Widget-Panel öffnen
- •`close()` - Widget-Panel schließen
- •`toggle(feature)` - Funktion umschalten
- •`enable(feature)` - Funktion aktivieren
- •`disable(feature)` - Funktion deaktivieren
- •`reset()` - Alle Einstellungen auf Standard zurücksetzen
- •`getSettings()` - Aktuelle Benutzereinstellungen abrufen
**Ereignisse:**
- •`accessly:ready` - Widget geladen und bereit
- •`accessly:open` - Widget-Panel geöffnet
- •`accessly:close` - Widget-Panel geschlossen
- •`accessly:change` - Einstellung geändert
8Support & Ressourcen
**Hilfe erhalten**
- •E-Mail-Support: support@accessly.net
- •Antwortzeit: Innerhalb von 24 Stunden (Business-Plan: Priority-Support)
- •Dokumentation: Diese Seite und unsere Wissensdatenbank
- •Kontaktformular: Verfügbar auf unserer Website
**Zusätzliche Ressourcen**
- •WCAG-Richtlinien: https://www.w3.org/WAI/WCAG21/quickref/
- •WebAIM: https://webaim.org/
- •Barrierefreiheits-Checkliste: Kontaktieren Sie uns für unsere umfassende Checkliste
**Schulung & Beratung**
Wir bieten:
- •Barrierefreiheitsschulungen für Ihr Team
- •WCAG-Konformitätsberatung
- •Individuelle Barrierefreiheitslösungen
- •Laufendes Barrierefreiheits-Monitoring
Kontaktieren Sie uns unter legal@accessly.net, um Ihre Bedürfnisse zu besprechen.