Widget demo
Portable accessibility controls you can add to any page. No external CSS, no build step, just include the script.
hw-ada-*) so styles do not collide.localStorage.Copy the script into your project and include it near the end of body.
<script src="/js/ada-widget.js" defer></script>Optional: set your own storage key before loading.
<script>
window.hwAdaConfig = { storageKey: 'mySiteAdaPrefs' };
</script>This paragraph and the links below respond to every toggle. Try high contrast, underline, or highlight on these links: WCAG and WebAIM.
Large text and spacing make long reads calmer. Reduce motion cuts transitions. The reading guide follows your pointer.
| Feature | What it does | Status |
|---|---|---|
| Large text | Boosts base font size and line-height. | Ready |
| Reading guide | Highlights the line under your cursor. | Ready |
| Reset | Clears preferences and restores defaults. | Ready |
Toggle "Reduce motion" in the widget to pause the shimmer and floating orb below.
hwAda.open() / hwAda.close() to control the panel.hwAda.set('largeText', true) to flip specific features.hwAda.reset() to clear saved preferences.Use the "Accessibility" button floating at the bottom-right. Every option applies to this page immediately.