For your website
The tips widget. A button that provides immediate help.
The button at the top of this page („Accessibility tips for your device“)
is a product — and you can bring it to your website. It shows your
visitors the built-in features of their devices: magnifier, screen reader, contrast, dictation —
for Windows, Android, iPhone/iPad, and Mac, with the most relevant tips shown first.
Thirteen languages: German, English, Turkish, French, Spanish,
Italian, Polish, Russian, Ukrainian, Arabic (with right-to-left layout),
Mandarin, Hindi and Japanese. The widget automatically starts in the visitor's system language — switchable directly within the window.
Accessibility within accessibility: A help window is of no use if you cannot perceive it. That is why the window itself features a large Read Aloud button (which reads the tips aloud) and an Enlarge button (text up to 175%).
Free — even for commercial sites. There is no catch and no paid version. The only "price": A small credit with my name and a link back here will remain at the bottom of the window. That is my marketing effect — and your good karma point for spreading the word.
And now for the no-bullshit part: This widget does NOT make your website accessible. It is intentionally the opposite of "overlay" tools that promise compliance but fail to deliver. It does not change your site, tracks nothing, loads no additional content, and sets no cookies — it only helps your visitors. True accessibility is a craft; I am happy to provide personal assistance with it.
Integrate — one line, done
<script src="https://cdn.jsdelivr.net/gh/spm231177-coder/[email protected]/nb-tipps.js" defer></script>
The line goes before the closing
Customize — via data attribute
data-lang |
Start language: auto (Default) or de, en, tr, fr, es, it, pl, ru, uk, ar, zh, hi, ja |
data-position |
bottom-left (Default), bottom-right or inline — inline places the button exactly at the position of the script tag |
data-color |
Your brand color (Hex or CSS variable). The button text color will automatically adjust to a readable contrast. |
data-label |
Custom button text instead of the standard label |
Example — bottom right, English, in brand color
<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 adjust, and you're done. No dependencies, no build.
Das Widget ist gratis und bleibt es. Wenn es dir hilft, freue ich mich über einen Kaffee:
paypal.me/saschapaulmanke ♥
