Widget Integration
Barrierefreiheit in wenigen Minuten auf Ihrer Website.
Schnellstart
Script-Tag (Empfohlen)
Einfachste Methode für die meisten Websites
<script
src="https://cdn.bfsg-compliance.com/widget.js"
data-site-id="IHRE_SITE_ID"
data-key="IHR_WIDGET_KEY"
async
></script>Fügen Sie diesen Code vor dem schließenden </body>-Tag ein.
npm Package
Für React, Vue, Angular oder andere Frameworks
npm install @a11y-suite/widget
// In Ihrer App
import { initA11yWidget } from '@a11y-suite/widget';
initA11yWidget({
siteId: 'IHRE_SITE_ID',
key: 'IHR_WIDGET_KEY'
});Initialisieren Sie das Widget nach dem DOM-Load.
Widget-Funktionen
Kontrast-Modi
Normal, Hoher Kontrast, Invertiert, Monochrom
Schriftgröße
Anpassbar von 80% bis 150%
Lesehilfen
Lesemaske, Zeilenabstand, Wortabstand
Tastatur-Navigation
Verbesserte Fokus-Indikatoren
Konfigurationsoptionen
| Option | Pflicht | Beschreibung |
|---|---|---|
data-site-id | Ja | Ihre eindeutige Site-ID |
data-key | Ja | Widget-Authentifizierungsschlüssel |
data-position | Nein | Position: 'bottom-right' (default), 'bottom-left' |
data-theme | Nein | Farbschema: 'auto', 'light', 'dark' |
data-language | Nein | Sprache: 'de' (default), 'en' |
data-compact | Nein | Kompakter Modus: 'true', 'false' |
Performance
~6KB
gzip-komprimiert
<100ms
Ladezeit
0
Externe Abhängigkeiten
Shadow DOM: Das Widget verwendet Shadow DOM für vollständige CSS-Isolation. Ihre Styles beeinflussen das Widget nicht und umgekehrt.