Installation

Methode 1: Upload über WordPress

1. Laden Sie die Plugin-ZIP-Datei aus Ihrem Kundenbereich herunter
2. Greifen Sie auf das WordPress-Administrationspanel zu
3. Gehen Sie zu Plugins → Neu hinzufügen
4. Klicken Sie auf Plugin hochladen
5. Wählen Sie die ZIP-Datei und klicken Sie auf Jetzt installieren
6. Aktivieren Sie das Plugin

Methode 2: Upload über FTP

1. Entpacken Sie die Plugin-ZIP-Datei
2. Verbinden Sie sich über FTP mit Ihrem Server
3. Laden Sie den usabilis Ordner nach /wp-content/plugins/ hoch
4. Greifen Sie auf das WordPress-Panel zu und gehen Sie zu Plugins
5. Finden Sie Usabilis und klicken Sie auf Aktivieren

Nach der Installation

Nach der Aktivierung des Plugins:

• Gehen Sie zu Einstellungen → Usabilis
• Geben Sie Ihren Lizenzschlüssel ein
• Konfigurieren Sie die Widget-Einstellungen
• Überprüfen Sie, ob das Widget korrekt im Frontend angezeigt wird

Konfiguration

Lizenzaktivierung

1. Zugriff auf Einstellungen → Usabilis
2. Geben Sie den Lizenzschlüssel in das entsprechende Feld ein
3. Klicken Sie auf Lizenz speichern
4. Überprüfen Sie, ob der Status "Aktive Lizenz" anzeigt

Widget-Konfiguration

Button-Position

Sie können wählen, wo der Widget-Öffnungsbutton positioniert werden soll:

• Unten rechts (Standard)
• Unten links
• Mitte rechts
• Mitte links

Support-E-Mail

Geben Sie die E-Mail-Adresse ein, die in der Barrierefreiheitserklärung angezeigt wird, damit Benutzer Sie kontaktieren können.

Widget aktivieren/deaktivieren

Sie können das Widget vorübergehend deaktivieren, indem Sie die Option "Barrierefreiheitspanel im Frontend anzeigen" deaktivieren.

Neue Sichtbarkeitsoptionen (v3.3.0+)

Auf Mobilgeräten ausblenden

Diese Option ermöglicht es Ihnen, das Widget auf Mobilgeräten vollständig auszublenden. Nützlich wenn:

• Sie eine dedizierte mobile App mit integrierten Barrierefreiheitsfunktionen haben
• Ihr mobiles Design unterschiedliche Ansätze für die Barrierefreiheit verwendet
• Sie die Leistung auf Geräten mit begrenzten Ressourcen optimieren möchten

Bereichsverwaltung

Sie können jetzt genau auswählen, welche Widget-Bereiche Ihren Benutzern angezeigt werden sollen:

So konfigurieren Sie:

1. Gehen Sie zu Einstellungen → Usabilis
2. Finden Sie den Bereich "Widget-Konfiguration"
3. Aktivieren/Deaktivieren Sie die Kontrollkästchen für jeden Bereich
4. Klicken Sie auf "Konfiguration speichern"

Widget-Funktionen

Barrierefreiheitsprofile

Inhaltssteuerung

Farbsteuerung

Orientierungswerkzeuge

Erweiterte Barrierefreiheitswerkzeuge

Das Barrierefreiheits-Widget

Wie es funktioniert

Das Widget wird automatisch auf allen Seiten Ihrer WordPress-Website geladen. Benutzer können:

1. Auf den Barrierefreiheitsbutton klicken, um das Panel zu öffnen
2. Ein vorkonfiguriertes Profil auswählen oder einzelne Einstellungen anpassen
3. Einstellungen werden im Browser gespeichert und bei nachfolgenden Besuchen automatisch angewendet

"Seite vorlesen"-Funktion

Wie die Sprachsynthese funktioniert

Wenn der Benutzer die Funktion "Seite vorlesen" aktiviert:

1. Der Mauszeiger verwandelt sich in einen Leseindikator
2. Beim Klicken auf ein Textelement wird der Inhalt laut vorgelesen
3. Ein Mini-Player erscheint und zeigt den Lesestatus an
4. Das vorgelesene Element wird visuell hervorgehoben
5. Das Vorlesen kann jederzeit gestoppt werden

Unterstützte Inhaltstypen

• Normaler Text: Absätze, Titel, Listen
• Links: Kündigt "Link:" gefolgt vom Text an
• Buttons: Kündigt "Button:" gefolgt vom Text an
• Bilder: Liest Alternativtext vor, falls vorhanden
• Formulare: Liest Feldbeschriftungen vor

Tastaturkürzel

Browser-Kompatibilität

Das Widget ist mit allen modernen Browsern kompatibel:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Sprachsynthese-Unterstützung nach Browser

Anpassung

Farbanpassung (Pro/Enterprise)

Mit einer Pro- oder Enterprise-Lizenz können Sie anpassen:

• Hauptfarbe: Die Farbe des Buttons und der aktiven Elemente
• Icon-Größe: Klein, Mittel, Groß oder Sehr groß

// Einstellungen werden automatisch gespeichert
// und in Echtzeit auf das Widget angewendet

Benutzerdefiniertes CSS (Enterprise)

Mit einer Enterprise-Lizenz können Sie benutzerdefiniertes CSS hinzufügen, um das Widget-Erscheinungsbild vollständig zu ändern:

/* Beispiel: Widget-Randradius ändern */
.wpap-section {
    border-radius: 0 !important;
}

/* Beispiel: Benutzerdefinierte Schrift für Titel */
.wpap-sidebar-header h2 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Beispiel: Benutzerdefinierte Animation für Button */
.wpap-toggle-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Beispiel: Lese-Mini-Player anpassen */
.wpap-reading-mini-player {
    background: #1a202c !important;
    border-radius: 20px !important;
}

/* Beispiel: Stil für hervorgehobenen Text beim Lesen */
.wpap-reading-active {
    background: rgba(52, 179, 228, 0.2) !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

White Label (Enterprise)

Enterprise-Lizenzen entfernen automatisch das "Entwickelt von STUDIO 09"-Branding aus dem Widget.

Sichtbarkeit und Bereichssteuerung

Gerätesichtbarkeit

Auf Mobilgeräten ausblenden

Das Widget kann auf Mobilgeräten vollständig ausgeblendet werden. Dies ist nützlich für:

• Mobile Apps: Wenn Sie eine App mit integrierten Barrierefreiheitsfunktionen haben
• Responsives Design: Wenn Ihr mobiles Design andere Ansätze verwendet
• Leistung: Zur Optimierung des Ladens auf Geräten mit langsamen Verbindungen

Wie funktioniert die Mobilgeräteerkennung?

Das System verwendet drei Methoden zur Identifizierung von Mobilgeräten:

1. User Agent: Erkennt Android, iOS, Windows Phone usw.
2. Touchscreen: Überprüft Touch-Fähigkeiten
3. Bildschirmgröße: Betrachtet Mobilgeräte mit Breite ≤ 768px

// Das Widget überprüft automatisch, ob es auf einem Mobilgerät ist
if (config.hideOnMobile && isMobileDevice()) {
    // Widget wird nicht geladen
    return;
}

Granulare Bereichssteuerung

Warum Bereiche steuern?

Nicht alle Websites haben die gleichen Bedürfnisse. Einige Beispiele:

• Minimalistischer Blog: Sie möchten möglicherweise nur Textsteuerungen
• Unternehmensseite: Nur voreingestellte Profile für Einfachheit
• E-Commerce: Fokus auf Kontrast und Lesbarkeit
• Bildungsportal: Alle Funktionen aktiv

Best Practices

Konfigurationsbeispiele

"Essentielle" Konfiguration

✓ Barrierefreiheitsprofile
✗ INHALT-Bereich
✗ FARBEN-Bereich
✗ ORIENTIERUNG-Bereich

Ideal für: Websites mit bereits optimiertem Design, die nur schnelle Profile anbieten möchten.

"Lese"-Konfiguration

✗ Barrierefreiheitsprofile
✓ INHALT-Bereich
✗ FARBEN-Bereich
✓ ORIENTIERUNG-Bereich

Ideal für: Blogs, Nachrichtenseiten, Dokumentationsportale.

"Visuelle" Konfiguration

✗ Barrierefreiheitsprofile
✗ INHALT-Bereich
✓ FARBEN-Bereich
✗ ORIENTIERUNG-Bereich

Ideal für: Galerien, Portfolios, Websites mit starker visueller Komponente.

Häufig gestellte Fragen

Fehlerbehebung

Das Widget erscheint nicht auf der Website

1. Überprüfen Sie, ob das Plugin aktiv ist
2. Prüfen Sie, ob die Lizenz gültig und aktiv ist
3. Stellen Sie sicher, dass die Option "Barrierefreiheitspanel anzeigen" aktiv ist
4. Leeren Sie den Website- und Browser-Cache
5. Überprüfen Sie die Browser-Konsole auf JavaScript-Fehler

Fehler "Ungültige Lizenz"

• Überprüfen Sie, ob Sie den Lizenzschlüssel korrekt kopiert haben
• Prüfen Sie, ob die Lizenz nicht abgelaufen ist
• Stellen Sie sicher, dass die Domain für diese Lizenz autorisiert ist
• Versuchen Sie, auf "Jetzt überprüfen" zu klicken, um den Status zu aktualisieren

Die "Seite vorlesen"-Funktion funktioniert nicht

• Überprüfen Sie, ob der Browser Web Speech API unterstützt (siehe Kompatibilitätstabelle)
• Prüfen Sie, ob Audio im Browser nicht stummgeschaltet ist
• Auf einigen mobilen Browsern erfordert die Sprachsynthese eine Benutzerinteraktion, bevor sie funktioniert
• Stellen Sie sicher, dass keine Browser-Erweiterungen die Sprachsynthese blockieren

Konflikte mit anderen Plugins

Wenn Sie auf Kompatibilitätsprobleme stoßen:

1. Deaktivieren Sie vorübergehend andere Plugins einzeln
2. Identifizieren Sie, welches Plugin den Konflikt verursacht
3. Kontaktieren Sie den Support mit Konfliktdetails

Leistungsprobleme

• Überprüfen Sie, ob Ihr Hosting die Mindestanforderungen erfüllt
• Verwenden Sie ein Caching-Plugin (W3 Total Cache, WP Rocket)
• Aktivieren Sie GZIP-Komprimierung auf dem Server
• Erwägen Sie die Verwendung eines CDN
• Wenn Sie "Animationen deaktivieren" verwenden, können einige Funktionen wie Leselinie und Lupe automatisch deaktiviert werden

Debug-Modus

Um den Debug-Modus zu aktivieren und weitere Informationen zu erhalten:

// wp-config.php
define('WPAP_DEBUG', true);

Changelog