Für deine Website
Das Tipps-Widget. Ein Knopf, der sofort hilft.
Der Knopf oben auf dieser Seite („Barrierefrei-Tipps für dein Gerät“)
ist ein Produkt — und du kannst ihn auf deine Website holen. Er zeigt deinen
Besuchern die eingebauten Bordmittel ihres Geräts: Lupe, Vorlesen, Kontrast, Diktat —
für Windows, Android, iPhone/iPad und Mac, mit den passenden Tipps zuerst.
Dreizehn Sprachen: Deutsch, Englisch, Türkisch, Französisch, Spanisch,
Italienisch, Polnisch, Russisch, Ukrainisch, Arabisch (mit Rechts-nach-links-Layout),
Mandarin, Hindi und Japanisch. Das Widget startet automatisch in der Systemsprache
des Besuchers — umschaltbar direkt im Fenster.
Barrierefreiheit in der Barrierefreiheit: Ein Hilfefenster bringt nichts,
wenn man es nicht wahrnehmen kann. Deshalb hat das Fenster selbst einen großen
Vorlesen-Knopf (liest die Tipps laut vor) und einen Größer-Knopf (Text bis 175 %).
Und jetzt der No-Bullshit-Teil: Dieses Widget macht deine Website
NICHT barrierefrei. Es ist bewusst das Gegenteil der „Overlay“-Werkzeuge,
die Konformität versprechen und nicht liefern. Es verändert deine Seite nicht,
trackt nichts, lädt nichts nach, setzt keine Cookies — es hilft nur deinen
Besuchern. Echte Barrierefreiheit ist Handwerk; dabei helfe ich gern persönlich.
Einbinden — eine Zeile, fertig
<script src="https://younameit.tv/wp-content/uploads/no-barrier/widget/nb-tipps.js" defer></script>
Die Zeile kommt vor das schließende </body> deiner Seite —
bei WordPress z. B. über einen Footer-Code-Bereich oder ein Snippet-Plugin.
Der Knopf erscheint unten links. Das war die ganze Installation.
Anpassen — per data-Attribut
data-lang |
Startsprache: auto (Standard) oder de, en, tr, fr, es, it, pl, ru, uk, ar, zh, hi, ja |
data-position |
bottom-left (Standard), bottom-right oder inline — inline setzt den Knopf genau an die Stelle des Script-Tags |
data-color |
Deine Markenfarbe (Hex oder CSS-Variable). Die Textfarbe des Knopfs stellt sich automatisch auf lesbaren Kontrast ein. |
data-label |
Eigener Buttontext statt der Standard-Beschriftung |
Beispiel — rechts unten, Englisch, in Markenfarbe
<script src="https://younameit.tv/wp-content/uploads/no-barrier/widget/nb-tipps.js" defer
data-position="bottom-right" data-lang="en" data-color="#7c3aed"></script>
Lieber selbst hosten? Im Download liegt die Datei samt Anleitung — auf den eigenen
Server legen, src anpassen, fertig. Keine Abhängigkeiten, kein Build.