Mission Green Web - Accessibility Toolbar Demo

Willkommen zur Live-Demo

Diese Toolbar bietet umfassende Barrierefreiheits-Funktionen für jede Website. Sie lässt sich mit nur einer Zeile Code in beliebige Websites integrieren.

🎯 Live-Demo

Die Toolbar ist auf dieser Seite bereits aktiv. Klicken Sie auf das blaue Accessibility-Symbol rechts, um sie zu öffnen und alle Features zu testen.

15+ Barrierefreiheits-Features

< 50kb Gesamtgröße

100% Cross-Browser

WCAG 2.1 Konform

🚀 Schnelle Integration

Fügen Sie einfach folgende Zeile vor dem schließenden </body>-Tag ein:

<script src="https://toolbar.mission-green-web.de/embed.js" async></script>

Das war's! Die Toolbar ist sofort einsatzbereit und speichert alle Benutzereinstellungen automatisch.

🔧 Features im Detail

📝 Textanpassungen

Textgröße (3 Stufen)
Zeilenhöhe anpassbar
Buchstabenabstand
Dyslexie-Schriftart

🎨 Farbanpassungen

Farben invertieren
Hoher Kontrast
Graustufen-Modus
Anpassbare Themes

🧭 Navigationshilfen

Leselinie
Lese-Maske
Tastaturnavigation
Fokus-Indikatoren

🔊 Erweiterte Features

Text-to-Speech
Seitenstruktur-Anzeige
Screen Reader Support
Persistente Einstellungen

⚙️ Erweiterte Konfiguration

Für erweiterte Anpassungen können Sie vor dem Laden der Toolbar eine Konfiguration definieren:

                <script>
window.a11yConfig = {
    position: 'right',      // Position: 'left' oder 'right'
    language: 'de',         // Sprache
    autoActivate: false,    // Automatisch öffnen
    customColors: {
        primary: '#0066cc',
        secondary: '#ffffff'
    }
};
</script>
<script src="https://toolbar.mission-green-web.de/embed.js" async></script>
            

🔗 Framework-Integration

WordPress

                    // In functions.php
function add_mgw_accessibility_toolbar() {
    wp_enqueue_script(
        'mgw-accessibility-toolbar',
        'https://toolbar.mission-green-web.de/embed.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'add_mgw_accessibility_toolbar');
                

React/Next.js

                    // In _app.js oder Layout-Komponente
useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://toolbar.mission-green-web.de/embed.js';
    script.async = true;
    document.body.appendChild(script);
    
    return () => {
        document.body.removeChild(script);
    };
}, []);
                

Shopify

                    // In theme.liquid vor </body>
{{ 'https://toolbar.mission-green-web.de/embed.js' | script_tag }}
                

✨ Warum unsere Toolbar?

🚀 Einfache Integration

Ein Script-Tag genügt - keine komplexe Konfiguration oder Installation erforderlich.

💾 Persistente Einstellungen

Alle Benutzereinstellungen werden automatisch gespeichert und beim nächsten Besuch wiederhergestellt.

📱 Responsive Design

Funktioniert perfekt auf Desktop, Tablet und mobilen Geräten.

🔒 Datenschutzfreundlich

Alle Daten werden lokal gespeichert - keine Übertragung persönlicher Informationen.

📊 Analytics & Monitoring

Optional können Sie Analytics aktivieren, um die Nutzung der Barrierefreiheits-Features zu verstehen:

                window.a11yConfig = {
    analytics: {
        enabled: true,
        endpoint: 'https://your-domain.com/api/analytics'
    }
};
            

Alle gesammelten Daten sind anonymisiert und DSGVO-konform.

🆘 Support & Dokumentation

Benötigen Sie Hilfe oder haben Sie Fragen? Wir unterstützen Sie gerne:

📧 Support kontaktieren 📚 Vollständige Dokumentation 🐛 Issues melden