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 %).
Kostenlos — auch für kommerzielle Seiten. Es gibt keinen Haken
und keine Bezahlversion. Der einzige „Preis“: Im Fuß des Fensters bleibt
ein kleiner Hinweis mit meinem Namen und einem Link hierher. Das ist mein Werbeeffekt —
und dein guter Karma-Punkt fürs Weitersagen.
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://cdn.jsdelivr.net/gh/spm231177-coder/[email protected]/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://cdn.jsdelivr.net/gh/spm231177-coder/[email protected]/nb-tipps.js" defer
data-position="bottom-right" data-lang="en" data-color="#7c3aed"></script>
Open Source (MIT). Der ganze Code liegt offen auf GitHub —
du kannst selbst nachlesen, dass nichts getrackt und nichts nachgeladen wird.
Lieber selbst hosten? Datei herunterladen, auf den eigenen Server legen,
src anpassen, fertig. Keine Abhängigkeiten, kein Build.
Im Einsatz auf
Beide Seiten nutzen dieselbe eine Zeile von oben — einmal inline im Seitenkopf,
einmal als fester Knopf unten links. Genau so landet es auch auf deiner Seite.
Das Widget ist gratis und bleibt es. Wenn es dir hilft, freue ich mich über einen Kaffee:
paypal.me/saschapaulmanke ♥