Mach deine Webseite inklusiv. Für alle.
Area11y ist ein leistungsstarkes, einbettbares Accessibility-Widget, entwickelt mit React, TypeScript und Tailwind CSS. Es bietet umfassende Text- und Lesbarkeitsanpassungen wie Textskalierung, Zeilenhöhe, Zeichen- und Wortabstände, dyslexiefreundliche Schriftarten, einen vergrößerten Mauszeiger, eine Lesemaske, Link-Hervorhebung mit Fokus-Ringen, Reduce-Motion-Einstellungen sowie eine Vorlesefunktion mit Screenreader-Unterstützung. Zusätzlich stehen Dark Mode, Hochkontrast- und Night-Shift-Lesemodi, das Ausblenden von Medien mit barrierefreien Platzhaltern, Verbesserungen der Tastaturnavigation und persistente Benutzereinstellungen zur Verfügung.
Das Widget-Menü ist in Deutsch, Englisch, Französisch, Spanisch, Italienisch, Niederländisch, Portugiesisch, Polnisch, Türkisch, Russisch, Arabisch, Chinesisch (vereinfacht) und Japanisch verfügbar.
Alle Funktionen lassen sich mit einer einzigen Code-Zeile in unter fünf Minuten in jede Webseite integrieren.
Area11y verwendet ein abonnementbasiertes Lizenzmodell. Für den produktiven Einsatz ist ein gültiger Lizenzschlüssel erforderlich. Verfügbare Pläne sind Basic (bis zu 5 Websites) und Pro (bis zu 20 Websites), jeweils mit einer 7-tägigen kostenlosen Testphase.
Voller Zugriff auf alle Area11y-Funktionen für bis zu 5 Websites. Ideal für persönliche Projekte, Freelancer und kleine Unternehmensseiten.
Voller Zugriff auf alle Area11y-Funktionen für bis zu 20 Websites. Perfekt für Agenturen, wachsende Teams und mehrere Kundenprojekte.
Dokumentation
Die Dokumentation erklärt alle Funktionen, Konfigurationsoptionen und Integrationswege des Area11y - von der einfachen Einbindung per Script-Tag bis hin zur individüllen Anpassung über API und Events.
Binde den Loader per Script-Tag ein. Er validiert die Lizenz serverseitig und lädt anschliessend den Core.
<script
src="https://area11y-engine.vercel.app/loader.js"
data-key="YOUR-LICENSE"
data-position="bottom-right"
data-primary-color="#6366f1"
data-hotkey="Alt+A"
data-locale="en"
defer
></script>Nutze das npm-Paket, um den Loader programmgesteuert einzubinden.
npm install @niclasbork/area11yReact
import { loadA11Y } from '@niclasbork/area11y'
loadA11Y({
apiBaseUrl: 'https://area11y-engine.vercel.app',
licenseKey: 'YOUR-LICENSE',
position: 'bottom-right',
primaryColor: '#6366f1',
hotkey: 'Alt+A',
locale: 'en',
})Vue/Vanilla
import { loadA11Y } from '@niclasbork/area11y/loader'
loadA11Y({
apiBaseUrl: 'https://area11y-engine.vercel.app',
licenseKey: 'YOUR-LICENSE',
position: 'bottom-right',
primaryColor: '#6366f1',
hotkey: 'Alt+A',
locale: 'en',
})| Option | Typ | Default | Beschreibung |
|---|---|---|---|
selector | string | 'body' | DOM-Selector, an dem der Widget-Container gemountet wird. |
position | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | Position des Floating-Buttons. |
primaryColor | string | '#2563eb' | Hintergrundfarbe für Button und Akzente. |
licenseKey | string | YOUR-LICENSE | Validiert die Installation und schaltet Premium-Module frei. |
apiBaseUrl | string | 'https://area11y-engine.vercel.app' | Basis-URL für API- und Core-Requests (ohne /loader.js). |
hotkey | string | undefined | Tastaturkürzel zum öffnen (z. B. Alt+A). |
locale | string | undefined | Fixe Sprache; leer lassen für <html lang>. |
Beim ersten Laden des Widgets wird die Domain automatisch erkannt und der Lizenz hinzugefügt. Das gilt für den Basic- und den Pro-Plan – eine manuelle Einrichtung ist nicht erforderlich.
Basic: bis zu 5 Domains. Pro: bis zu 20 Domains. Sobald das jeweilige Limit erreicht ist, werden weitere Domains automatisch abgelehnt.
Nein. localhost und 127.0.0.1 zählen nicht zum Domain-Limit.
Ja. Ein Upgrade auf den Pro-Plan ist jederzeit möglich. Das neue Domain-Limit wird sofort aktiv.
Ja. Alle Pläne enthalten eine 7-tägige kostenlose Testphase. Während dieser Zeit hast du vollen Zugriff auf alle Funktionen und kannst jederzeit kündigen, ohne dass Kosten entstehen.
Wenn das Abo gekündigt wird oder abläuft, wird das Widget auf deinen Websites nicht mehr aktiviert. Inhalte oder Layout deiner Webseite werden dabei nicht verändert.
Ja. Staging- und Preview-Umgebungen werden unterstützt, solange sie innerhalb deines Domain-Limits liegen. localhost ist davon immer ausgenommen.
Das Widget prüft automatisch den Lizenzschlüssel und die Domain über den Area11y Lizenzdienst. Die Validierung erfolgt im Hintergrund und erfordert keine manuelle Aktion.
Nach dem Abschluss des Abos erhältst du deinen persönlichen Lizenzschlüssel automatisch per E-Mail. Zusätzlich findest du ihn jederzeit in deinem Kundenbereich bei Lemon Squeezy.
Nein. Domains werden automatisch beim ersten Laden des Widgets registriert. Sobald das Domain-Limit deines Plans erreicht ist, werden weitere Domains nicht mehr aktiviert.
Nein. Für die Lizenzprüfung werden ausschließlich der Lizenzschlüssel und die aktuelle Domain verwendet. Es werden keine personenbezogenen Daten gespeichert oder ausgewertet.