Accessibility · ADA Widget

A portable ADA widget you can drop into any site.

Built because I love creating systems that actually help people—this widget adds contrast, text sizing, spacing, motion reduction, and reading aids without touching your CSS.

Download widget View live demo GitHub repo
No dependencies Namespaced styles LocalStorage prefs WCAG-friendly controls

What it includes.

A single script that injects its own markup and styles so it won’t collide with your design system.

  • Large text, spacing, contrast, underline, and highlight modes
  • Motion reduction, grayscale, invert, and reading guide
  • Keyboard-accessible panel with focus states baked in
  • Preferences stored via localStorage under a configurable key
  • Namespaced classes (hw-ada-*) to avoid CSS conflicts
Copy-paste ready Drop-in script

Embed it in seconds:

<script>
  window.hwAdaConfig = { storageKey: 'yourSiteAdaPrefs' };
</script>
<script src="/ada-widget/ada-widget.js" defer></script>

After load, you can control it with hwAda.open(), hwAda.set('largeText', true), or hwAda.reset().

Why we built it.

Every site should be easier to use—no excuses. This widget came from a simple belief: build systems that actually help people, not just check a box.

  • Rapid accessibility uplift while deeper fixes are underway
  • Portable for demos, audits, and legacy sites
  • Transparent, readable source you can extend
See it working Demo + README

Explore the live demo and documentation to understand how it behaves before you embed it.

Open demo Read the README

Need help deploying it or remediating your site?

We can implement the widget, run an ADA audit, and prioritize fixes so your experience is inclusive and compliant.

Talk accessibility