Karte eins
Ein kurzer Beispieltext.
Wichtig: Creatal Access ersetzt keine barrierefreie Umsetzung einer Website und macht sie nicht „konform“ im Sinne von WCAG, BITV oder BFSG. Es ergänzt eine barrierefrei umgesetzte Website um persönliche Einstellungen.
Einbindung
Vor dem schließenden </body> oder im Head (mit defer) einfügen:
<script src="https://a11y.creatal.de/v1/creatal-access.js" defer
data-accent="#e30613"
data-position="bottom-right"
data-statement-url="/barrierefreiheit"></script>Optionen
| Attribut | Standard | Beschreibung |
|---|---|---|
data-accent | #1f6feb | Akzentfarbe (Hex). Textfarbe darauf wird automatisch kontrastreich gewählt. |
data-accent-text | automatisch | Textfarbe auf der Akzentfarbe erzwingen. |
data-position | bottom-right | bottom-right, bottom-left, top-right, top-left |
data-mobile-position | wie Desktop | Eigene Position unter 600 px Breite. |
data-offset-x, data-offset-y | 20 | Abstand zum Rand in Pixeln (mobil: data-mobile-offset-x/-y, Standard 12). |
data-lang | auto | de, en oder auto (nach <html lang>). |
data-statement-url | – | Link zur Erklärung zur Barrierefreiheit im Fußbereich des Bedienfelds. |
data-disable | – | Kommagetrennt Funktionen ausblenden, z. B. tts,hideImages,profiles,structure. |
data-main | main, [role=main], #main, article | Selektor für „Hauptinhalt vorlesen“. |
data-z-index | 2147483000 | Stapelreihenfolge. |
JavaScript-Schnittstelle
CreatalAccess.open(); // Bedienfeld öffnen
CreatalAccess.set('fontSize', 2);
CreatalAccess.profile('dyslexia');
CreatalAccess.reset();Testbereich
Probieren Sie die Funktionen über den Button unten rechts aus. Hier etwas Inhalt zum Testen, mit einem Link und einer pulsierenden Animation.
Karte zwei
Noch ein Beispieltext.
Karte drei
Und ein dritter.
Datenschutz
Einstellungen werden ausschließlich im localStorage des Browsers gespeichert. Es werden keine Cookies gesetzt und keine Daten an Creatal oder Dritte übertragen. Die Vorlesefunktion nutzt die Sprachausgabe des Browsers bzw. Betriebssystems.