Try it
A floating button appeared in the bottom-right corner of this page. Click it, or press Alt + A, to open the toolbar.
Try "High contrast", "Readable font", or the text-size stepper. Your choices persist across page loads.
Add it to your site
Paste this before </body> on any page:
<script
src="https://a11y-widget.pages.dev/widget.js"
data-primary="#F7941D"
async></script>Options
data-primary— hex color for the launcher button & highlights (default#2563eb)data-account— reserved for Phase 2 analytics
What users can do
- Text — scale font to 110% / 125% / 150% / 175%, wide spacing, tall lines, readable (dyslexia-friendly) font
- Color — high contrast, invert, grayscale, brighter colors
- Navigation — highlight links, highlight headings, reading mask
- Motion — pause animations, big cursor
- Shortcuts — Alt + A to open, Esc to close, Tab to navigate
- Persistence — choices saved in localStorage, survive page reloads
Example content to test against
Heading one
This is normal paragraph text. Here is a link you can highlight. Toggle "Highlight links" in the widget to see it change.
Heading two
Try "High contrast" — everything becomes black/white/yellow for maximum legibility. Toggle "Readable font" to switch to a dyslexia-friendly face.
Flip "Grayscale" to desaturate the whole page. "Invert colors" is great for reading at night.
What it doesn't do
A widget helps users adapt a page — it does not create ADA or WCAG compliance on its own. Your HTML still needs to be semantic, your images need alt text, your forms need labels, and your color palette needs real contrast. This widget is the right final layer on top of a well-built site, not a shortcut.